fix: rangeless multi chars highlighting (#168)

rehype-pretty · Jan 22, 2024 · a70e07f · a70e07f
1 parent a982b45
commit a70e07f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 3 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -383,10 +383,14 @@ export default function rehypePrettyCode(
               chars: string;
               charsIdAndOrRange: string;
             };
-            const [range, id] = charsIdAndOrRange.split('#');
             charsList.push(chars);
-            range && charsListNumbers.push(rangeParser(range));
-            id && charsListIdMap.set(chars, id);
+            if (charsIdAndOrRange === '') {
+              charsListNumbers.push([]);
+            } else {
+              const [range, id] = charsIdAndOrRange.split('#');
+              range && charsListNumbers.push(rangeParser(range));
+              id && charsListIdMap.set(chars, id);
+            }
           });
         }
 

diff --git a/test/fixtures/highlightedMultipleCharsRange.md b/test/fixtures/highlightedMultipleCharsRange.md
@@ -9,3 +9,33 @@ const strLen = getStringLength('str');
 
 const anotherStrLen = getStringLength('anotherStr');
 ```
+
+/getStringLength/ /str/2,3
+
+```js /getStringLength/ /str/2,3
+const getStringLength = (str) => str.length;
+
+const strLen = getStringLength('str');
+
+const anotherStrLen = getStringLength('anotherStr');
+```
+
+/getStringLength/2 /str/
+
+```js /getStringLength/2 /str/
+const getStringLength = (str) => str.length;
+
+const strLen = getStringLength('str');
+
+const anotherStrLen = getStringLength('anotherStr');
+```
+
+/Length/1 /str/ /const/2-3 /get/
+
+```js /Length/1 /str/ /const/2-3 /get/
+const getStringLength = (str) => str.length;
+
+const strLen = getStringLength('str');
+
+const anotherStrLen = getStringLength('anotherStr');
+```
diff --git a/test/results/highlightedMultipleCharsRange.html b/test/results/highlightedMultipleCharsRange.html
@@ -65,3 +65,42 @@ <h2>Highlight multiple chars range</h2>
 <span data-line=""> </span>
 <span data-line=""><span style="color:#F97583">const</span><span style="color:#79B8FF"> anotherStrLen</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> getStringLength</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'anotherStr'</span><span style="color:#E1E4E8">);</span></span></code></pre>
 </figure>
+<p>/getStringLength/ /str/2,3</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:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">getStringLength</span></mark><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">str</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> </span><mark data-highlighted-chars="" class="word"><span style="color:#E1E4E8">str</span></mark><span style="color:#E1E4E8">.</span><span style="color:#79B8FF">length</span><span style="color:#E1E4E8">;</span></span>
+<span data-line=""> </span>
+<span data-line=""><span style="color:#F97583">const</span><span style="color:#79B8FF"> </span><mark data-highlighted-chars="" class="word"><span style="color:#79B8FF">str</span></mark><span style="color:#79B8FF">Len</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">getStringLength</span></mark><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'str'</span><span style="color:#E1E4E8">);</span></span>
+<span data-line=""> </span>
+<span data-line=""><span style="color:#F97583">const</span><span style="color:#79B8FF"> anotherStrLen</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">getStringLength</span></mark><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'anotherStr'</span><span style="color:#E1E4E8">);</span></span></code></pre>
+</figure>
+<p>/getStringLength/2 /str/</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:#B392F0"> getStringLength</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><mark data-highlighted-chars="" class="word"><span style="color:#FFAB70">str</span></mark><span style="color:#E1E4E8">) </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> </span><mark data-highlighted-chars="" class="word"><span style="color:#E1E4E8">str</span></mark><span style="color:#E1E4E8">.</span><span style="color:#79B8FF">length</span><span style="color:#E1E4E8">;</span></span>
+<span data-line=""> </span>
+<span data-line=""><span style="color:#F97583">const</span><span style="color:#79B8FF"> </span><mark data-highlighted-chars="" class="word"><span style="color:#79B8FF">str</span></mark><span style="color:#79B8FF">Len</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">getStringLength</span></mark><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'</span><mark data-highlighted-chars="" class="word"><span style="color:#9ECBFF">str</span></mark><span style="color:#9ECBFF">'</span><span style="color:#E1E4E8">);</span></span>
+<span data-line=""> </span>
+<span data-line=""><span style="color:#F97583">const</span><span style="color:#79B8FF"> anotherStrLen</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> getStringLength</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'anotherStr'</span><span style="color:#E1E4E8">);</span></span></code></pre>
+</figure>
+<p>/Length/1 /str/ /const/2-3 /get/</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:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">get</span></mark><span style="color:#B392F0">String</span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">Length</span></mark><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><mark data-highlighted-chars="" class="word"><span style="color:#FFAB70">str</span></mark><span style="color:#E1E4E8">) </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> </span><mark data-highlighted-chars="" class="word"><span style="color:#E1E4E8">str</span></mark><span style="color:#E1E4E8">.</span><span style="color:#79B8FF">length</span><span style="color:#E1E4E8">;</span></span>
+<span data-line=""> </span>
+<span data-line=""><mark data-highlighted-chars="" class="word"><span style="color:#F97583">const</span></mark><span style="color:#79B8FF"> </span><mark data-highlighted-chars="" class="word"><span style="color:#79B8FF">str</span></mark><span style="color:#79B8FF">Len</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> getStringLength</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'</span><mark data-highlighted-chars="" class="word"><span style="color:#9ECBFF">str</span></mark><span style="color:#9ECBFF">'</span><span style="color:#E1E4E8">);</span></span>
+<span data-line=""> </span>
+<span data-line=""><mark data-highlighted-chars="" class="word"><span style="color:#F97583">const</span></mark><span style="color:#79B8FF"> anotherStrLen</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> getStringLength</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'anotherStr'</span><span style="color:#E1E4E8">);</span></span></code></pre>
+</figure>