Add Support for Highlighting Multiple Words in the Same Line (#2059)

MarkBind · Dec 10, 2023 · 11702c9 · 11702c9
1 parent c7d912d
commit 11702c9
Show file tree

Hide file tree

Showing 13 changed files with 607 additions and 79 deletions.
diff --git a/docs/userGuide/syntax/code.md b/docs/userGuide/syntax/code.md
@@ -92,13 +92,77 @@ function add(a, b) {
 
 ##### Line highlighting
 
-You can add the `highlight-lines` attribute to add highlighting to your code block. Refer to the example code block
+You can add the `highlight-lines` attribute to add highlighting to your code block. Refer to the examples
 below for a visual demonstration of all the possible ways of highlighting a code block.
 
+**Full text highlight**
 <include src="codeAndOutputCode.md" boilerplate >
+<variable name="code">
+```js {start-from=6 .line-numbers highlight-lines="7, 9"}
+function add(a, b) {
+    const sum = a + b;
+    console.log(`${a} + ${b} = ${sum}`);
+    return sum;
+}
+```
+</variable>
+</include>
+
+**Substring highlight**
+<include src="codeAndOutputCode.md" boilerplate >
+<variable name="code">
+```js {.line-numbers highlight-lines="1['function'], 2['a'], 2['b'], 4['diff']"}
+function subtract(a, b) {
+    const diff = a - b;
+    console.log(`${a} + ${b} = ${diff}`);
+    return diff;
+}
+```
+</variable>
+</include>
+
+**Character-bounded highlight**
+<include src="codeAndOutputCode.md" boilerplate >
+<variable name="code">
+```js {.line-numbers highlight-lines="1[0:3], 1[6:10], 2[5:], 3[:6]"}
+function multiply(a, b) {
+    const product = a * b;
+    console.log('Product = ${product}');
+    return product;
+}
+```
+</variable>
+</include>
+
+**Word-bounded highlight**
+<include src="codeAndOutputCode.md" boilerplate >
+<variable name="code">
+```js {.line-numbers highlight-lines="1[1::3], 1[5::7], 2[2::], 3[::3]"}
+// Function returns the distance travelled assuming constant speed
+function calculateDistance(speed, time) {
+    const distance = speed * time;
+    console.log(`Distance travelled = ${distance}`);
+    return distance;
+}
+```
+</variable>
+</include>
 
+**Full-line highlight**
+<include src="codeAndOutputCode.md" boilerplate >
 <variable name="code">
-```java {.line-numbers highlight-lines="1[:],3['Inventory'],4['It\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26"}
+```js {start-from=10 .line-numbers highlight-lines="11[:]"}
+function add(a, b) {
+    return a + b;
+}
+```
+</variable>
+</include>
+
+**Sample Combined Usage**
+<include src="codeAndOutputCode.md" boilerplate >
+<variable name="code">
+```java {.line-numbers highlight-lines="1[:],3['Inventory'],3[4::6],4['It\'s designed'],5,6[8:15],6[18:],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26"}
 import java.util.List;
 
 // Inventory is a class that stores inventory items in a list.
@@ -126,7 +190,6 @@ public class Inventory {
         return items.remove(item);
     }
 }
-
 ```
 </variable>
 </include>

diff --git a/packages/cli/test/functional/test_site/expected/testCodeBlocks.html b/packages/cli/test/functional/test_site/expected/testCodeBlocks.html
@@ -268,15 +268,15 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
 </span></code></pre>
         <p><strong><code class="line-numbers hljs inline no-lang" v-pre>highlight-lines</code> attr with full character-variant line-slice syntax should highlight only at specified range</strong></p>
         <pre><code class="line-numbers hljs xml" v-pre><span><span class="hljs-tag">&lt;<span class="hljs-name highlighted">foo</span>&gt;</span>
-</span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr highlighted">type</span><span class="highlighted">=</span><span class="hljs-string"><span><span class="highlighted">&quot;na</span>me&quot;</span></span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span>
+</span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr"><span><span class="highlighted">typ</span>e</span></span>=<span class="hljs-string"><span>&quot;n<span class="highlighted">ame&quot;</span></span></span><span class="highlighted">&gt;</span></span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span>
 </span><span>  <span class="hljs-tag">&lt;<span class="hljs-name"><span>b<span class="highlighted">az</span></span></span><span class="highlighted"> </span><span class="hljs-attr highlighted">type</span><span class="highlighted">=</span><span class="hljs-string">&quot;name&quot;</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">baz</span>&gt;</span>
 </span><span>  <span class="highlighted"><span class="hljs-tag">&lt;<span class="hljs-name">qux</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">qux</span>&gt;</span></span>
 </span><span>  <span class="highlighted"><span class="hljs-tag">&lt;<span class="hljs-name">quux</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">quux</span>&gt;</span></span>
 </span><span><span class="hljs-tag"><span>&lt;<span class="highlighted">/</span></span><span class="hljs-name"><span><span class="highlighted">fo</span>o</span></span>&gt;</span>
 </span></code></pre>
         <p><strong><code class="line-numbers hljs inline no-lang" v-pre>highlight-lines</code> attr with partial character-variant line-slice syntax should default highlight to start/end of line</strong></p>
         <pre><code class="line-numbers hljs xml" v-pre><span><span class="hljs-tag">&lt;<span class="hljs-name highlighted">foo</span><span class="highlighted">&gt;</span></span>
-</span><span>  <span class="hljs-tag"><span class="highlighted">&lt;</span><span class="hljs-name highlighted">bar</span><span class="highlighted"> </span><span class="hljs-attr highlighted">type</span><span class="highlighted">=</span><span class="hljs-string"><span><span class="highlighted">&quot;na</span>me&quot;</span></span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span>
+</span><span>  <span class="hljs-tag"><span class="highlighted">&lt;</span><span class="hljs-name highlighted">bar</span><span class="highlighted"> </span><span class="hljs-attr"><span>typ<span class="highlighted">e</span></span></span><span class="highlighted">=</span><span class="hljs-string highlighted">&quot;name&quot;</span><span class="highlighted">&gt;</span></span><span class="highlighted">goo</span><span class="hljs-tag highlighted">&lt;/<span class="hljs-name">bar</span>&gt;</span>
 </span><span>  <span class="hljs-tag">&lt;<span class="hljs-name"><span>b<span class="highlighted">az</span></span></span><span class="highlighted"> </span><span class="hljs-attr highlighted">type</span><span class="highlighted">=</span><span class="hljs-string highlighted">&quot;name&quot;</span><span class="highlighted">&gt;</span></span><span class="highlighted">goo</span><span class="hljs-tag highlighted">&lt;/<span class="hljs-name">baz</span>&gt;</span>
 </span><span>  <span class="highlighted"><span class="hljs-tag">&lt;<span class="hljs-name">qux</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">qux</span>&gt;</span></span>
 </span><span>  <span class="highlighted"><span class="hljs-tag">&lt;<span class="hljs-name">quux</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">quux</span>&gt;</span></span>
@@ -294,19 +294,48 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
 </span></code></pre>
         <p><strong><code class="line-numbers hljs inline no-lang" v-pre>highlight-lines</code> attr with full word-variant line-slice syntax should highlight only at specified word ranges</strong></p>
         <pre><code class="line-numbers hljs xml" v-pre><span><span class="hljs-tag highlighted">&lt;<span class="hljs-name">foo</span>&gt;</span>
-</span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span> goo <span class="hljs-tag highlighted">&lt;/<span class="hljs-name">bar</span>&gt;</span>
+</span><span>  <span class="hljs-tag"><span class="highlighted">&lt;</span><span class="hljs-name highlighted">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span><span> <span class="highlighted">goo</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span>
 </span><span>  <span class="hljs-tag highlighted">&lt;<span class="hljs-name">baz</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span> goo <span class="hljs-tag">&lt;/<span class="hljs-name">baz</span>&gt;</span>
 </span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">qux</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span><span> <span class="highlighted">goo </span></span><span class="hljs-tag highlighted">&lt;/<span class="hljs-name">qux</span>&gt;</span>
 </span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">quux</span> <span class="hljs-attr highlighted">type</span><span class="highlighted">=</span><span class="hljs-string highlighted">&quot;name&quot;</span><span class="highlighted">&gt;</span></span><span><span class="highlighted"> goo</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">quux</span>&gt;</span>
 </span><span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span>
 </span></code></pre>
         <p><strong><code class="line-numbers hljs inline no-lang" v-pre>highlight-lines</code> attr with partial word-variant line-slice syntax should default highlight to start/end of line</strong></p>
         <pre><code class="line-numbers hljs xml" v-pre><span><span class="hljs-tag highlighted">&lt;<span class="hljs-name">foo</span>&gt;</span>
-</span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span> goo <span class="hljs-tag highlighted">&lt;/<span class="hljs-name">bar</span>&gt;</span>
+</span><span>  <span class="hljs-tag highlighted">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span> goo <span class="hljs-tag highlighted">&lt;/<span class="hljs-name">bar</span>&gt;</span>
 </span><span>  <span class="hljs-tag highlighted">&lt;<span class="hljs-name">baz</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span> goo <span class="hljs-tag">&lt;/<span class="hljs-name">baz</span>&gt;</span>
 </span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">qux</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span><span> <span class="highlighted">goo </span></span><span class="hljs-tag highlighted">&lt;/<span class="hljs-name">qux</span>&gt;</span>
 </span><span>  <span class="hljs-tag highlighted">&lt;<span class="hljs-name">quux</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span><span><span class="highlighted"> goo</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">quux</span>&gt;</span>
 </span><span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span>
+</span></code></pre>
+        <p><strong><code class="line-numbers hljs inline no-lang" v-pre>highlight-lines</code> all attr should behave as expected</strong></p>
+        <pre><code class="line-numbers hljs java" v-pre><span class="highlighted"><span class="hljs-keyword">import</span> java.util.List;
+</span><span>
+</span><span><span class="hljs-comment"><span>// <span class="highlighted">Inventory</span><span> <span class="highlighted">is a</span><span> class that stores inventory <span class="highlighted">items</span><span> in a list. Big <span class="highlighted">Inventory</span>.</span></span></span></span></span>
+</span><span><span class="hljs-comment"><span>// <span class="highlighted">It's designed</span><span> as a <span class="highlighted">thin wrapper on the List interface.</span></span></span></span>
+</span><span><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Inventory</span> </span>{
+</span><span class="highlighted">    <span class="hljs-keyword">private</span> List&lt;Item&gt; items;
+</span><span class="highlighted">
+</span><span class="highlighted">    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getItemCount</span><span class="hljs-params">()</span></span>{
+</span><span>        <span class="hljs-keyword">return</span> items.size();
+</span><span>    }
+</span><span>
+</span><span class="highlighted">    <span class="hljs-function"><span class="hljs-keyword">public</span> bool <span class="hljs-title">isEmpty</span><span class="hljs-params">()</span> </span>{
+</span><span class="highlighted">        <span class="hljs-keyword">return</span> items.isEmpty();
+</span><span class="highlighted">    }
+</span><span>
+</span><span>    <span class="highlighted"><span class="hljs-function"><span class="hljs-keyword">public</span> Item <span class="hljs-title">getItem</span><span class="hljs-params">(idx: <span class="hljs-keyword">int</span>)</span> </span>{</span>
+</span><span>        <span class="highlighted"><span class="hljs-keyword">return</span> items.get(idx);</span>
+</span><span>    <span class="highlighted">}</span>
+</span><span>
+</span><span>    <span class="hljs-function"><span class="hljs-keyword highlighted">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title highlighted">addItem</span><span class="hljs-params highlighted">(item: Item)</span><span class="highlighted"> </span></span><span><span class="highlighted">{</span>
+</span></span><span>        <span class="hljs-keyword highlighted">return</span><span><span class="highlighted"> items.add(item);</span>
+</span></span><span>    }
+</span><span>
+</span><span>    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword highlighted">void</span><span class="highlighted"> </span><span class="hljs-title highlighted">removeItem</span><span class="hljs-params highlighted">(item: Item)</span><span class="highlighted"> </span></span><span><span class="highlighted">{</span>
+</span></span><span>        <span class="highlighted"><span class="hljs-keyword">return</span> items.remove(item);</span>
+</span><span>    <span class="highlighted">}</span>
+</span><span>}
 </span></code></pre>
         <p><strong>Should render correctly with heading</strong></p>
         <div class="code-block">