fix(transformers): word highlight support any symbol, fix #110

Author: antfu

packages/shikiji-transformers/src/transformers/notation-highlight-word.ts

@@ -23,10 +23,14 @@ export function transformerNotationWordHighlight(
 
   return createCommentNotationTransformer(
     'shikiji-transformers:notation-highlight-word',
-    /^\s*(?:\/\/|\/\*|<!--|#)\s+\[!code word:(\w+)(:\d+)?\]\s*(?:\*\/|-->)?/,
+    // comment-start             | marker    | word           | range | comment-end
+    /^\s*(?:\/\/|\/\*|<!--|#)\s+\[!code word:((?:\\.|[^:\]])+)(:\d+)?\]\s*(?:\*\/|-->)?/,
     function ([_, word, range], _line, comment, lines, index) {
       const lineNum = range ? Number.parseInt(range.slice(1), 10) : lines.length
 
+      // escape backslashes
+      word = word.replace(/\\(.)/g, '$1')
+
       lines
         // Don't include the comment itself
         .slice(index + 1, index + 1 + lineNum)

packages/shikiji-transformers/src/transformers/transformer-meta-highlight-word.ts

@@ -5,9 +5,12 @@ export function parseMetaHighlightWords(meta: string): string[] {
   if (!meta)
     return []
 
-  const match = Array.from(meta.matchAll(/\/(\w+)\//g))
+  // https://regex101.com/r/BHS5fd/1
+  const match = Array.from(meta.matchAll(/\/((?:\\.|[^\/])+?)\//ig))
 
-  return match.map(v => v[1])
+  return match
+    // Escape backslashes
+    .map(v => v[1].replace(/\\(.)/g, '$1'))
 }
 
 export interface TransformerMetaWordHighlightOptions {

packages/shikiji-transformers/test/fixtures/highlight-word/complex.js

@@ -0,0 +1,9 @@
+export function transformerNotationFocus(
+  // [!code word:options.a]
+  options = {}, // [!code word:console.log:2]
+) {
+  const options = 'options'
+  console.log(options) // TODO: cross-token highlighting should be supported
+  options.a = "HELLO"
+  console.log('// [!code word:options.a]')
+}

packages/shikiji-transformers/test/fixtures/highlight-word/complex.js.output.html

@@ -0,0 +1,7 @@
+<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> transformerNotationFocus</span><span style="color:#E1E4E8">(</span></span><span class="line"><span style="color:#FFAB70">  options</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {}, </span></span><span class="line"><span style="color:#E1E4E8">) {</span></span><span class="line"><span style="color:#F97583">  const</span><span style="color:#79B8FF"> options</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'options'</span></span><span class="line"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(options) </span><span style="color:#6A737D">// TODO: cross-token highlighting should be supported</span></span><span class="line"><span style="color:#E1E4E8">  </span><span style="color:#E1E4E8" class="highlighted-word">options.a</span><span style="color:#E1E4E8"> </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "HELLO"</span></span><span class="line"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'// [!code word:</span><span style="color:#9ECBFF" class="highlighted-word">options.a</span><span style="color:#9ECBFF">]'</span><span style="color:#E1E4E8">)</span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
+<style>
+body { margin: 0; }
+.shiki { padding: 1em; }
+.line { display: block; width: 100%; height: 1.2em; }
+.highlighted-word { background-color: #8885; }
+</style>

packages/shikiji-transformers/test/meta-word-highlight.test.ts

@@ -4,5 +4,6 @@ import { parseMetaHighlightWords } from '../src/transformers/transformer-meta-hi
 it('parseHighlightWords', () => {
   expect(parseMetaHighlightWords('')).toEqual([])
   expect(parseMetaHighlightWords('/hello/')).toEqual(['hello'])
-  expect(parseMetaHighlightWords('// /f// /hello/')).toEqual(['f', 'hello'])
+  expect(parseMetaHighlightWords('/ /f /hello/')).toEqual([' ', 'hello'])
+  expect(parseMetaHighlightWords('/foo bar/ /foo.bar\\/foo/')).toEqual(['foo bar', 'foo.bar/foo'])
 })