css.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /*
  2. Language: CSS
  3. Category: common, css
  4. Website: https://developer.mozilla.org/en-US/docs/Web/CSS
  5. */
  6. /** @type LanguageFn */
  7. function css(hljs) {
  8. var FUNCTION_LIKE = {
  9. begin: /[\w-]+\(/, returnBegin: true,
  10. contains: [
  11. {
  12. className: 'built_in',
  13. begin: /[\w-]+/
  14. },
  15. {
  16. begin: /\(/, end: /\)/,
  17. contains: [
  18. hljs.APOS_STRING_MODE,
  19. hljs.QUOTE_STRING_MODE,
  20. hljs.CSS_NUMBER_MODE,
  21. ]
  22. }
  23. ]
  24. };
  25. var ATTRIBUTE = {
  26. className: 'attribute',
  27. begin: /\S/, end: ':', excludeEnd: true,
  28. starts: {
  29. endsWithParent: true, excludeEnd: true,
  30. contains: [
  31. FUNCTION_LIKE,
  32. hljs.CSS_NUMBER_MODE,
  33. hljs.QUOTE_STRING_MODE,
  34. hljs.APOS_STRING_MODE,
  35. hljs.C_BLOCK_COMMENT_MODE,
  36. {
  37. className: 'number', begin: '#[0-9A-Fa-f]+'
  38. },
  39. {
  40. className: 'meta', begin: '!important'
  41. }
  42. ]
  43. }
  44. };
  45. var AT_IDENTIFIER = '@[a-z-]+'; // @font-face
  46. var AT_MODIFIERS = "and or not only";
  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. }
  131. module.exports = css;