handlebars.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. /*
  2. Language: Handlebars
  3. Requires: xml.js
  4. Author: Robin Ward <robin.ward@gmail.com>
  5. Description: Matcher for Handlebars as well as EmberJS additions.
  6. Website: https://handlebarsjs.com
  7. Category: template
  8. */
  9. function handlebars(hljs) {
  10. const regex = hljs.regex;
  11. const BUILT_INS = {
  12. $pattern: /[\w.\/]+/,
  13. built_in: [
  14. 'action',
  15. 'bindattr',
  16. 'collection',
  17. 'component',
  18. 'concat',
  19. 'debugger',
  20. 'each',
  21. 'each-in',
  22. 'get',
  23. 'hash',
  24. 'if',
  25. 'in',
  26. 'input',
  27. 'link-to',
  28. 'loc',
  29. 'log',
  30. 'lookup',
  31. 'mut',
  32. 'outlet',
  33. 'partial',
  34. 'query-params',
  35. 'render',
  36. 'template',
  37. 'textarea',
  38. 'unbound',
  39. 'unless',
  40. 'view',
  41. 'with',
  42. 'yield'
  43. ]
  44. };
  45. const LITERALS = {
  46. $pattern: /[\w.\/]+/,
  47. literal: [
  48. 'true',
  49. 'false',
  50. 'undefined',
  51. 'null'
  52. ]
  53. };
  54. // as defined in https://handlebarsjs.com/guide/expressions.html#literal-segments
  55. // this regex matches literal segments like ' abc ' or [ abc ] as well as helpers and paths
  56. // like a/b, ./abc/cde, and abc.bcd
  57. const DOUBLE_QUOTED_ID_REGEX = /""|"[^"]+"/;
  58. const SINGLE_QUOTED_ID_REGEX = /''|'[^']+'/;
  59. const BRACKET_QUOTED_ID_REGEX = /\[\]|\[[^\]]+\]/;
  60. const PLAIN_ID_REGEX = /[^\s!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~]+/;
  61. const PATH_DELIMITER_REGEX = /(\.|\/)/;
  62. const ANY_ID = regex.either(
  63. DOUBLE_QUOTED_ID_REGEX,
  64. SINGLE_QUOTED_ID_REGEX,
  65. BRACKET_QUOTED_ID_REGEX,
  66. PLAIN_ID_REGEX
  67. );
  68. const IDENTIFIER_REGEX = regex.concat(
  69. regex.optional(/\.|\.\/|\//), // relative or absolute path
  70. ANY_ID,
  71. regex.anyNumberOfTimes(regex.concat(
  72. PATH_DELIMITER_REGEX,
  73. ANY_ID
  74. ))
  75. );
  76. // identifier followed by a equal-sign (without the equal sign)
  77. const HASH_PARAM_REGEX = regex.concat(
  78. '(',
  79. BRACKET_QUOTED_ID_REGEX, '|',
  80. PLAIN_ID_REGEX,
  81. ')(?==)'
  82. );
  83. const HELPER_NAME_OR_PATH_EXPRESSION = { begin: IDENTIFIER_REGEX };
  84. const HELPER_PARAMETER = hljs.inherit(HELPER_NAME_OR_PATH_EXPRESSION, { keywords: LITERALS });
  85. const SUB_EXPRESSION = {
  86. begin: /\(/,
  87. end: /\)/
  88. // the "contains" is added below when all necessary sub-modes are defined
  89. };
  90. const HASH = {
  91. // fka "attribute-assignment", parameters of the form 'key=value'
  92. className: 'attr',
  93. begin: HASH_PARAM_REGEX,
  94. relevance: 0,
  95. starts: {
  96. begin: /=/,
  97. end: /=/,
  98. starts: { contains: [
  99. hljs.NUMBER_MODE,
  100. hljs.QUOTE_STRING_MODE,
  101. hljs.APOS_STRING_MODE,
  102. HELPER_PARAMETER,
  103. SUB_EXPRESSION
  104. ] }
  105. }
  106. };
  107. const BLOCK_PARAMS = {
  108. // parameters of the form '{{#with x as | y |}}...{{/with}}'
  109. begin: /as\s+\|/,
  110. keywords: { keyword: 'as' },
  111. end: /\|/,
  112. contains: [
  113. {
  114. // define sub-mode in order to prevent highlighting of block-parameter named "as"
  115. begin: /\w+/ }
  116. ]
  117. };
  118. const HELPER_PARAMETERS = {
  119. contains: [
  120. hljs.NUMBER_MODE,
  121. hljs.QUOTE_STRING_MODE,
  122. hljs.APOS_STRING_MODE,
  123. BLOCK_PARAMS,
  124. HASH,
  125. HELPER_PARAMETER,
  126. SUB_EXPRESSION
  127. ],
  128. returnEnd: true
  129. // the property "end" is defined through inheritance when the mode is used. If depends
  130. // on the surrounding mode, but "endsWithParent" does not work here (i.e. it includes the
  131. // end-token of the surrounding mode)
  132. };
  133. const SUB_EXPRESSION_CONTENTS = hljs.inherit(HELPER_NAME_OR_PATH_EXPRESSION, {
  134. className: 'name',
  135. keywords: BUILT_INS,
  136. starts: hljs.inherit(HELPER_PARAMETERS, { end: /\)/ })
  137. });
  138. SUB_EXPRESSION.contains = [ SUB_EXPRESSION_CONTENTS ];
  139. const OPENING_BLOCK_MUSTACHE_CONTENTS = hljs.inherit(HELPER_NAME_OR_PATH_EXPRESSION, {
  140. keywords: BUILT_INS,
  141. className: 'name',
  142. starts: hljs.inherit(HELPER_PARAMETERS, { end: /\}\}/ })
  143. });
  144. const CLOSING_BLOCK_MUSTACHE_CONTENTS = hljs.inherit(HELPER_NAME_OR_PATH_EXPRESSION, {
  145. keywords: BUILT_INS,
  146. className: 'name'
  147. });
  148. const BASIC_MUSTACHE_CONTENTS = hljs.inherit(HELPER_NAME_OR_PATH_EXPRESSION, {
  149. className: 'name',
  150. keywords: BUILT_INS,
  151. starts: hljs.inherit(HELPER_PARAMETERS, { end: /\}\}/ })
  152. });
  153. const ESCAPE_MUSTACHE_WITH_PRECEEDING_BACKSLASH = {
  154. begin: /\\\{\{/,
  155. skip: true
  156. };
  157. const PREVENT_ESCAPE_WITH_ANOTHER_PRECEEDING_BACKSLASH = {
  158. begin: /\\\\(?=\{\{)/,
  159. skip: true
  160. };
  161. return {
  162. name: 'Handlebars',
  163. aliases: [
  164. 'hbs',
  165. 'html.hbs',
  166. 'html.handlebars',
  167. 'htmlbars'
  168. ],
  169. case_insensitive: true,
  170. subLanguage: 'xml',
  171. contains: [
  172. ESCAPE_MUSTACHE_WITH_PRECEEDING_BACKSLASH,
  173. PREVENT_ESCAPE_WITH_ANOTHER_PRECEEDING_BACKSLASH,
  174. hljs.COMMENT(/\{\{!--/, /--\}\}/),
  175. hljs.COMMENT(/\{\{!/, /\}\}/),
  176. {
  177. // open raw block "{{{{raw}}}} content not evaluated {{{{/raw}}}}"
  178. className: 'template-tag',
  179. begin: /\{\{\{\{(?!\/)/,
  180. end: /\}\}\}\}/,
  181. contains: [ OPENING_BLOCK_MUSTACHE_CONTENTS ],
  182. starts: {
  183. end: /\{\{\{\{\//,
  184. returnEnd: true,
  185. subLanguage: 'xml'
  186. }
  187. },
  188. {
  189. // close raw block
  190. className: 'template-tag',
  191. begin: /\{\{\{\{\//,
  192. end: /\}\}\}\}/,
  193. contains: [ CLOSING_BLOCK_MUSTACHE_CONTENTS ]
  194. },
  195. {
  196. // open block statement
  197. className: 'template-tag',
  198. begin: /\{\{#/,
  199. end: /\}\}/,
  200. contains: [ OPENING_BLOCK_MUSTACHE_CONTENTS ]
  201. },
  202. {
  203. className: 'template-tag',
  204. begin: /\{\{(?=else\}\})/,
  205. end: /\}\}/,
  206. keywords: 'else'
  207. },
  208. {
  209. className: 'template-tag',
  210. begin: /\{\{(?=else if)/,
  211. end: /\}\}/,
  212. keywords: 'else if'
  213. },
  214. {
  215. // closing block statement
  216. className: 'template-tag',
  217. begin: /\{\{\//,
  218. end: /\}\}/,
  219. contains: [ CLOSING_BLOCK_MUSTACHE_CONTENTS ]
  220. },
  221. {
  222. // template variable or helper-call that is NOT html-escaped
  223. className: 'template-variable',
  224. begin: /\{\{\{/,
  225. end: /\}\}\}/,
  226. contains: [ BASIC_MUSTACHE_CONTENTS ]
  227. },
  228. {
  229. // template variable or helper-call that is html-escaped
  230. className: 'template-variable',
  231. begin: /\{\{/,
  232. end: /\}\}/,
  233. contains: [ BASIC_MUSTACHE_CONTENTS ]
  234. }
  235. ]
  236. };
  237. }
  238. export { handlebars as default };