Highlighting: Implement slice format for text-only highlight

docs/userGuide/syntax/code.mbdf

@@ -53,11 +53,27 @@ function add(a, b) {
 
 
 ##### Line highlighting
-To highlight lines, add the attribute `highlight-lines` with the line numbers as value, as shown below. You can specify ranges or individual line numbers.
+To highlight lines, add the attribute `highlight-lines` as shown below.
+
+You can specify highlighting in many different ways, depending on how you want it to be. There are two main variants:
+
+**Text-only highlighting**
+
+To highlight only the text portion of the line, you can just use the line numbers as is.
+
+For ranges of lines, join the two line numbers with a dash sign (`-`).
+
+**Whole-line highlighting**
+
+If you wish to highlight a full line (including whitespaces) or ranges of it, you can leverage MarkBind's own _line-slice_ syntax. Line-slices are in the form of `lineNumber[:]`, e.g. `2[:]`.
+
+This variant's format is very similar to the previous, but instead use line-slices rather than line numbers.
+
+For ranges, you only need to use line-slices on either ends.
 
 <include src="codeAndOutputCode.md" boilerplate >
 <variable name="code">
-```java {highlight-lines="2,4,6-8"}
+```java {highlight-lines="1,3[:],6-8,10[:]-12"}
 import java.util.List;
 
 public class Inventory {
@@ -66,6 +82,10 @@ public class Inventory {
     public int getItemCount(){
         return items.size();
     }
+
+    public bool isEmpty() {
+        return items.isEmpty();
+    }
 
     //...
 }

packages/cli/test/functional/test_site/expected/testCodeBlocks.html

@@ -49,28 +49,36 @@
 </span><span>-----
 </span></code></pre>
         <p><strong><code class="hljs inline no-lang" v-pre>highlight-lines</code> attr causes corresponding lines to have 'highlighted' class</strong></p>
-        <pre><code class="hljs markdown" v-pre><span class="highlighted">1  highlighted
+        <pre><code class="hljs markdown" v-pre><span><span class="highlighted">1  highlighted</span>
 </span><span>2
-</span><span class="highlighted">3  highlighted
+</span><span><span class="highlighted">3  highlighted</span>
 </span><span>4
-</span><span class="highlighted">5  highlighted
-</span><span class="highlighted">6  highlighted
-</span><span class="highlighted">7  highlighted
-</span><span class="highlighted">8  highlighted
+</span><span><span class="highlighted">5  highlighted</span>
+</span><span><span class="highlighted">6  highlighted</span>
+</span><span><span class="highlighted">7  highlighted</span>
+</span><span><span class="highlighted">8  highlighted</span>
 </span><span>9
 </span><span>10
 </span></code></pre>
         <p><strong><code class="hljs inline no-lang" v-pre>highlight-lines</code> attr with <code class="hljs inline no-lang" v-pre>start-from</code> attr should cause corresponding lines to have 'highlighted' class based on <code class="hljs inline no-lang" v-pre>start-from</code></strong></p>
-        <pre><code style="counter-reset: line 10;" class="hljs markdown" v-pre><span class="highlighted">11  highlighted
+        <pre><code style="counter-reset: line 10;" class="hljs markdown" v-pre><span><span class="highlighted">11  highlighted</span>
 </span><span>12
-</span><span class="highlighted">13  highlighted
+</span><span><span class="highlighted">13  highlighted</span>
 </span><span>14
-</span><span class="highlighted">15  highlighted
-</span><span class="highlighted">16  highlighted
-</span><span class="highlighted">17  highlighted
-</span><span class="highlighted">18  highlighted
+</span><span><span class="highlighted">15  highlighted</span>
+</span><span><span class="highlighted">16  highlighted</span>
+</span><span><span class="highlighted">17  highlighted</span>
+</span><span><span class="highlighted">18  highlighted</span>
 </span><span>19
 </span><span>20
+</span></code></pre>
+        <p>**<code class="hljs inline no-lang" v-pre>highlight-lines</code> attr with line-slice syntax of empty indices should highlight leading/trailing spaces</p>
+        <pre><code class="hljs xml" v-pre><span><span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span>
+</span><span class="highlighted">  <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</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">baz</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">baz</span>&gt;</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">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">qux</span>&gt;</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">"name"</span>&gt;</span>goo<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>Should render correctly with heading</strong></p>
         <div class="code-block">

packages/cli/test/functional/test_site/testCodeBlocks.md

@@ -56,6 +56,16 @@ Content in a fenced code block
 20
 ```
 
+**`highlight-lines` attr with line-slice syntax of empty indices should highlight leading/trailing spaces
+```xml {highlight-lines="2[:],4[:]-5[:]"}
+<foo>
+  <bar type="name">goo</bar>
+  <baz type="name">goo</baz>
+  <qux type="name">goo</qux>
+  <quux type="name">goo</quux>
+</foo>
+```
+
 **Should render correctly with heading**
 
 ```{heading="A heading"}