css.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /*
  2. Language: CSS
  3. Category: common, css
  4. Website: https://developer.mozilla.org/en-US/docs/Web/CSS
  5. */
  6. export default function(hljs) {
  7. var FUNCTION_LIKE = {
  8. begin: /[\w-]+\(/, returnBegin: true,
  9. contains: [
  10. {
  11. className: 'built_in',
  12. begin: /[\w-]+/
  13. },
  14. {
  15. begin: /\(/, end: /\)/,
  16. contains: [
  17. hljs.APOS_STRING_MODE,
  18. hljs.QUOTE_STRING_MODE,
  19. hljs.CSS_NUMBER_MODE,
  20. ]
  21. }
  22. ]
  23. }
  24. var ATTRIBUTE = {
  25. className: 'attribute',
  26. begin: /\S/, end: ':', excludeEnd: true,
  27. starts: {
  28. endsWithParent: true, excludeEnd: true,
  29. contains: [
  30. FUNCTION_LIKE,
  31. hljs.CSS_NUMBER_MODE,
  32. hljs.QUOTE_STRING_MODE,
  33. hljs.APOS_STRING_MODE,
  34. hljs.C_BLOCK_COMMENT_MODE,
  35. {
  36. className: 'number', begin: '#[0-9A-Fa-f]+'
  37. },
  38. {
  39. className: 'meta', begin: '!important'
  40. }
  41. ]
  42. }
  43. }
  44. var AT_IDENTIFIER = '@[a-z-]+' // @font-face
  45. var AT_MODIFIERS = "and or not only"
  46. var MEDIA_TYPES = "all print screen speech"
  47. var AT_PROPERTY_RE = /@\-?\w[\w]*(\-\w+)*/ // @-webkit-keyframes
  48. var IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*';
  49. var RULE = {
  50. begin: /(?:[A-Z\_\.\-]+|--[a-zA-Z0-9_-]+)\s*:/, returnBegin: true, end: ';', endsWithParent: true,
  51. contains: [
  52. ATTRIBUTE
  53. ]
  54. };
  55. return {
  56. name: 'CSS',
  57. case_insensitive: true,
  58. illegal: /[=\/|'\$]/,
  59. contains: [
  60. hljs.C_BLOCK_COMMENT_MODE,
  61. {
  62. className: 'selector-id', begin: /#[A-Za-z0-9_-]+/
  63. },
  64. {
  65. className: 'selector-class', begin: /\.[A-Za-z0-9_-]+/
  66. },
  67. {
  68. className: 'selector-attr',
  69. begin: /\[/, end: /\]/,
  70. illegal: '$',
  71. contains: [
  72. hljs.APOS_STRING_MODE,
  73. hljs.QUOTE_STRING_MODE,
  74. ]
  75. },
  76. {
  77. className: 'selector-pseudo',
  78. begin: /:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/
  79. },
  80. // matching these here allows us to treat them more like regular CSS
  81. // rules so everything between the {} gets regular rule highlighting,
  82. // which is what we want for page and font-face
  83. {
  84. begin: '@(page|font-face)',
  85. lexemes: AT_IDENTIFIER,
  86. keywords: '@page @font-face'
  87. },
  88. {
  89. begin: '@', end: '[{;]', // at_rule eating first "{" is a good thing
  90. // because it doesn’t let it to be parsed as
  91. // a rule set but instead drops parser into
  92. // the default mode which is how it should be.
  93. illegal: /:/, // break on Less variables @var: ...
  94. returnBegin: true,
  95. contains: [
  96. {
  97. className: 'keyword',
  98. begin: AT_PROPERTY_RE
  99. },
  100. {
  101. begin: /\s/, endsWithParent: true, excludeEnd: true,
  102. relevance: 0,
  103. keywords: AT_MODIFIERS,
  104. contains: [
  105. {
  106. begin: /[a-z-]+:/,
  107. className:"attribute"
  108. },
  109. hljs.APOS_STRING_MODE,
  110. hljs.QUOTE_STRING_MODE,
  111. hljs.CSS_NUMBER_MODE
  112. ]
  113. }
  114. ]
  115. },
  116. {
  117. className: 'selector-tag', begin: IDENT_RE,
  118. relevance: 0
  119. },
  120. {
  121. begin: '{', end: '}',
  122. illegal: /\S/,
  123. contains: [
  124. hljs.C_BLOCK_COMMENT_MODE,
  125. RULE,
  126. ]
  127. }
  128. ]
  129. };
  130. }