Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 22 commits into from
Dec 10, 2023
Merged

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

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
8b28c82
Migrate to typescript
zlimez Aug 4, 2023
359e148
Add docs
zlimez Aug 4, 2023
ede79ec
Fix lint errors
zlimez Aug 4, 2023
df1e667
Remove empty rules
zlimez Aug 4, 2023
aad2d49
Add tests
zlimez Aug 4, 2023
611da71
Merge branch 'master' into fix_2050
zlimez Aug 5, 2023
3ea6774
Clean code
zlimez Aug 14, 2023
c9ca579
Merge remote-tracking branch 'upstream/master'
zlimez Aug 15, 2023
bdde871
Merge branch 'master' into fix_2050
zlimez Nov 25, 2023
25984dc
Use better bound merging strategy
zlimez Nov 26, 2023
bedf31f
Merge branch 'master' into fix_2050
zlimez Nov 26, 2023
9189f41
Add unit tests and fix bugs in HighlightRuleComponent.ts
zlimez Nov 26, 2023
4f41883
Merge branch 'master' into fix_2050
zlimez Nov 26, 2023
1910332
formatting
zlimez Nov 27, 2023
dc0f623
Merge remote-tracking branch 'origin/fix_2050'
zlimez Nov 27, 2023
4a11c05
restore comments
zlimez Nov 28, 2023
38a27f4
add highlight rule priority comments as requested
zlimez Nov 30, 2023
c589486
Add comments and extract line num check
zlimez Dec 3, 2023
81ae091
Add test cases for highlightRule
zlimez Dec 4, 2023
e7e170a
One more tc
zlimez Dec 5, 2023
3f7008b
Remove empty line from token content (highlighting) + update test cases
zlimez Dec 10, 2023
57c3f3f
add unit test
tlylt Dec 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 66 additions & 3 deletions docs/userGuide/syntax/code.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -126,7 +190,6 @@ public class Inventory {
return items.remove(item);
}
}

```
</variable>
</include>
Expand Down
37 changes: 33 additions & 4 deletions packages/cli/test/functional/test_site/expected/testCodeBlocks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
Loading