feat: allow double quotes as chars delimiter (#131)

rehype-pretty · Dec 8, 2023 · e4ba418 · e4ba418
1 parent 403a4bb
commit e4ba418
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -349,17 +349,23 @@ export default function rehypePrettyCode(
         const charsListNumbers: Array<number[]> = [];
         const charsListIdMap = new Map();
         const charsMatches = meta
-          ? [...meta.matchAll(/\/(.*?)\/(\S*)/g)]
+          ? [
+              ...meta.matchAll(
+                /(?<delimiter>["/])(?<chars>.*?)\k<delimiter>(?<charsIdAndOrRange>\S*)/g,
+              ),
+            ]
           : undefined;
 
         if (Array.isArray(charsMatches)) {
-          charsMatches.forEach((_, index) => {
-            const word = charsMatches[index][1];
-            const charsIdOrRange = charsMatches[index][2];
-            const [range, id] = charsIdOrRange.split('#');
-            charsList.push(word);
+          charsMatches.forEach((name) => {
+            const { chars, charsIdAndOrRange } = name.groups as {
+              chars: string;
+              charsIdAndOrRange: string;
+            };
+            const [range, id] = charsIdAndOrRange.split('#');
+            charsList.push(chars);
             range && charsListNumbers.push(rangeParser(range));
-            id && charsListIdMap.set(word, id);
+            id && charsListIdMap.set(chars, id);
           });
         }
 

diff --git a/test/fixtures/highlightChars.md b/test/fixtures/highlightChars.md
@@ -7,3 +7,9 @@ function carrot() {
   return 'carrot';
 }
 ```
+
+"path/to/carrot"
+
+```js "path/to/carrot"
+const path = 'path/to/carrot';
+```
diff --git a/test/results/highlightChars.html b/test/results/highlightChars.html
@@ -63,3 +63,12 @@ <h2>Highlight chars</h2>
 <span data-line=""><span style="color:#F97583">  return</span><span style="color:#9ECBFF"> '</span><mark data-highlighted-chars="" class="word"><span style="color:#9ECBFF">carrot</span></mark><span style="color:#9ECBFF">'</span><span style="color:#E1E4E8">;</span></span>
 <span data-line=""><span style="color:#E1E4E8">}</span></span></code></pre>
 </figure>
+<p>"path/to/carrot"</p>
+<figure data-rehype-pretty-code-figure="">
+  <pre
+    style="background-color: #24292e; color: #e1e4e8"
+    tabindex="0"
+    data-language="js"
+    data-theme="github-dark"
+  ><code data-language="js" data-theme="github-dark" style="display: grid;"><span data-line=""><span style="color:#F97583">const</span><span style="color:#79B8FF"> path</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> '</span><mark data-highlighted-chars="" class="word"><span style="color:#9ECBFF">path/to/carrot</span></mark><span style="color:#9ECBFF">'</span><span style="color:#E1E4E8">;</span></span></code></pre>
+</figure>