feat: syntax highlight inline template (#59)

* feat: syntax highlight inline template

* fix: include new lines in interpolation

* Update src/.vuepress/markdown/highlight.js

Co-Authored-By: Phan An <me@phanan.net>

* Update src/.vuepress/config.js

Co-Authored-By: Phan An <me@phanan.net>

* Update src/.vuepress/markdown/highlight.js

Co-Authored-By: Phan An <me@phanan.net>

Co-authored-by: Phan An <me@phanan.net>

Author: znck

src/.vuepress/config.js

@@ -45,10 +45,14 @@ module.exports = {
   title: 'Vue.js',
   description: 'Vue.js - The Progressive JavaScript Framework',
   head: [
-    ['link', {
-      href: 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
-      rel: 'stylesheet'
-    }]
+    [
+      'link',
+      {
+        href:
+          'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+        rel: 'stylesheet'
+      }
+    ]
   ],
   themeConfig: {
     nav: [
@@ -97,5 +101,13 @@ module.exports = {
         }
       }
     }
+  },
+  markdown: {
+    /** @param {import('markdown-it')} md */
+    extendMarkdown: md => {
+      md.options.highlight = require('./markdown/highlight')(
+        md.options.highlight
+      )
+    }
   }
 }

src/.vuepress/markdown/highlight.js

@@ -0,0 +1,158 @@
+const { parse } = require('@babel/parser')
+const { default: traverse } = require('@babel/traverse')
+const prism = require('prismjs')
+const loadLanguages = require('prismjs/components/index')
+const MARKER = '__INLINE_TEMPLATE_STRING__'
+
+/**
+ * @param {(code: string, lang?: string) => string} fancyHighlight
+ */
+module.exports = fancyHighlight => {
+  prism.languages['vue-html'] = prism.languages.extend('markup', {})
+
+  prism.languages.insertBefore('vue-html', 'tag', {
+    interpolation: {
+      pattern: /{{((?!}})(.|\n))*}}/,
+      inside: {
+        punctuation: /^{{|}}$/,
+        'inline-js language-js': {
+          pattern: /.*/,
+          inside: prism.languages.javascript
+        }
+      }
+    }
+  })
+
+  prism.languages['vue-html'].tag.inside = prism.languages.insertBefore(
+    'inside',
+    'attr-value',
+    {
+      directive: {
+        pattern: /(?<=\s)((v-[a-z0-9-]+)|:|@|#)(((?<=[:@#])|:)([a-z0-9-]+|(\[[^\]]+\])))?(\.[a-z0-9]+)*="[^"]+"/i,
+        inside: {
+          'punctuation directive-shorthand': /^[:@#]/,
+          'identifier directive-name': /^v-[a-z0-9-]+/i,
+          'directive-argument': [
+            {
+              pattern: /^((?<=[:@#])|:)[a-z0-9-]+/i,
+              inside: {
+                punctuation: /^:/,
+                identifier: /[a-z0-9-]+/i
+              }
+            },
+            {
+              pattern: /^((?<=[:@#])|:)(\[[^\]]+\])/,
+              inside: {
+                punctuation: /^\[|\]$/,
+                'inline-js language-js': {
+                  pattern: /.*/,
+                  inside: prism.languages.javascript
+                }
+              }
+            }
+          ],
+          'directive-modifier': {
+            pattern: /^.[a-z0-9-]+/i,
+            inside: {
+              punctuation: /^./,
+              identifier: /[a-z0-9-]+/i
+            }
+          },
+          'directive-expression': {
+            pattern: /^=(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,
+            inside: {
+              puntuation: [/^=/, /^["']|["']$/],
+              'inline-js language-js': {
+                pattern: /.*/,
+                inside: prism.languages.javascript
+              }
+            }
+          }
+        }
+      }
+    },
+    prism.languages['vue-html'].tag
+  )
+
+  /**
+   * Highlight template strings in JavaScript.
+   *
+   * @param {string} code
+   * @param {string|undefined} lang?
+   */
+  return function highlight(code, lang) {
+    if (lang !== 'js') {
+      return fancyHighlight(code, lang)
+    }
+
+    const source = extractTemplate(code)
+    if (!source) return fancyHighlight(code, lang)
+
+    try {
+      const copy = code.replace(source, MARKER)
+      const output = fancyHighlight(copy, lang)
+      const template = `<span class="language-html">${prism.highlight(
+        source,
+        prism.languages['vue-html'],
+        'html'
+      )}</span>`
+
+      return output.replace(MARKER, template)
+    } catch (error) {
+      console.log(error)
+
+      return fancyHighlight(code, lang)
+    }
+  }
+}
+
+/**
+ * @param {string} code
+ */
+function extractTemplate(code) {
+  try {
+    const AST = parse(code, { sourceType: 'module' })
+
+    let source = ''
+
+    traverse(AST, {
+      /**
+       * @param {import("@babel/traverse").NodePath<import('@babel/types').ObjectExpression>} node$
+       */
+      ObjectExpression(node$) {
+        /**
+         * @type {import("@babel/traverse").NodePath<import("@babel/types").ObjectProperty>|null}
+         */
+        const property$ = node$.get('properties').find(node$ => {
+          if (node$.isObjectProperty()) {
+            const key$ = node$.get('key')
+
+            return key$.isIdentifier({ name: 'template' })
+          }
+        })
+
+        if (!property$) return
+
+        const template$ = property$.get('value')
+
+        if (template$.isTemplateLiteral()) {
+          if (template$.get('quasis').length === 1) {
+            const item$ = template$.get('quasis')[0]
+
+            if (item$.isTemplateElement()) {
+              source = item$.node.value.raw
+            }
+          }
+        } else if (template$.isStringLiteral()) {
+          source = template$.node.value
+        }
+      }
+    })
+
+    return source
+  } catch (error) {
+    return ''
+  }
+}
+
+module.exports()