Add optional leading whitespace highlighting capability

.eslintignore

@@ -43,4 +43,4 @@ packages/vue-components/src/directives/Float.js
 packages/vue-components/src/utils/NodeList.js
 packages/vue-components/src/utils/utils.js
 
-# --- packages/vue-components end ---
+# --- packages/vue-components end ---

.gitignore

@@ -92,4 +92,4 @@ packages/core/src/variables/*.js
 packages/core/test/unit/**/*.js
 packages/core/index.js
 
-# --- packages/core end ---
+# --- packages/core end ---

packages/core/src/lib/markdown-it/highlight/HighlightRuleComponent.ts

@@ -1,6 +1,6 @@
 import { splitCodeAndIndentation } from './helper';
 
-const LINESLICE_CHAR_REGEX = /(\d+)\[(\d*):(\d*)]/;
+const LINESLICE_CHAR_REGEX = /(\d+)\[(\d*):(\d*)](\+?)/;
 const LINESLICE_WORD_REGEX = /(\d+)\[(\d*)::(\d*)]/;
 const LINEPART_REGEX = /(\d+)\[(["'])((?:\\.|[^\\])*?)\2]/;
 const UNBOUNDED = -1;
@@ -51,14 +51,15 @@ export class HighlightRuleComponent {
       if (!lineNumber) return null;
 
       const isUnbounded = groups.every(x => x === '');
+      const highlightSpaces = groups.pop() === '+';
       if (isUnbounded) {
         return new HighlightRuleComponent(lineNumber, true, []);
       }
 
       let bound = groups.map(x => (x !== '' ? parseInt(x, 10) : UNBOUNDED)) as [number, number];
       const isCharSlice = sliceMatch === linesliceCharMatch;
       bound = isCharSlice
-        ? HighlightRuleComponent.computeCharBounds(bound, lines[lineNumber - 1])
+        ? HighlightRuleComponent.computeCharBounds(bound, lines[lineNumber - 1], highlightSpaces)
         : HighlightRuleComponent.computeWordBounds(bound, lines[lineNumber - 1]);
 
       return new HighlightRuleComponent(lineNumber, true, [bound]);
@@ -101,32 +102,42 @@ export class HighlightRuleComponent {
    * @param line The given line
    * @returns {[number, number]} The actual bound computed
    */
-  static computeCharBounds(bound: [number, number], line: string): [number, number] {
+  static computeCharBounds(bound: [number, number], line: string,
+                           highlightSpaces: boolean): [number, number] {
     const [indents] = splitCodeAndIndentation(line);
     let [start, end] = bound;
 
     if (start === UNBOUNDED) {
-      start = indents.length;
-    } else {
+      if (highlightSpaces) {
+        start = 0;
+      } else {
+        start = indents.length;
+      }
+    } else if (!highlightSpaces) {
       start += indents.length;
       // Clamp values
       if (start < indents.length) {
         start = indents.length;
       } else if (start > line.length) {
         start = line.length;
       }
+    } else if (start > line.length) {
+      start = line.length;
     }
 
     if (end === UNBOUNDED) {
       end = line.length;
-    } else {
+    } else if (!highlightSpaces) {
       end += indents.length;
+
       // Clamp values
       if (end < indents.length) {
         end = indents.length;
       } else if (end > line.length) {
         end = line.length;
       }
+    } else if (end > line.length) {
+      end = line.length;
     }
 
     return [start, end];

packages/core/test/unit/lib/markdown-it/highlight/HighlightRuleComponent.test.ts

@@ -44,28 +44,55 @@ describe('parseRuleComponent', () => {
   });
 });
 
-describe('computeCharBounds', () => {
+describe('computeCharBounds, no whitespace highlighting', () => {
   test('computes character bounds correctly', () => {
-    const bounds = HighlightRuleComponent.computeCharBounds([2, 5], '  some text');
+    const bounds = HighlightRuleComponent.computeCharBounds([2, 5], '  some text', false);
     expect(bounds).toEqual([4, 7]);
   });
 
   test('handles unbounded start correctly', () => {
-    const bounds = HighlightRuleComponent.computeCharBounds([-1, 4], '  some text');
+    const bounds = HighlightRuleComponent.computeCharBounds([-1, 4], '  some text', false);
     expect(bounds).toEqual([2, 6]);
   });
 
   test('handles unbounded end correctly', () => {
-    const bounds = HighlightRuleComponent.computeCharBounds([3, -1], '  some text');
+    const bounds = HighlightRuleComponent.computeCharBounds([3, -1], '  some text', false);
     expect(bounds).toEqual([5, '  some text'.length]);
   });
 
   test('handles out-of-range bounds correctly', () => {
-    const bounds = HighlightRuleComponent.computeCharBounds([30, 40], '  some text');
+    const bounds = HighlightRuleComponent.computeCharBounds([30, 40], '  some text', false);
     expect(bounds).toEqual(['  some text'.length, '  some text'.length]);
   });
 });
 
+describe('computeCharBounds, with whitespace highlighting', () => {
+  test('computes character bounds correctly', () => {
+    const bounds = HighlightRuleComponent.computeCharBounds([2, 5], '  some text', true);
+    expect(bounds).toEqual([2, 5]);
+  });
+
+  test('handles unbounded start correctly', () => {
+    const bounds = HighlightRuleComponent.computeCharBounds([-1, 4], '  some text', true);
+    expect(bounds).toEqual([0, 4]);
+  });
+
+  test('handles unbounded end correctly', () => {
+    const bounds = HighlightRuleComponent.computeCharBounds([3, -1], '  some text', true);
+    expect(bounds).toEqual([3, '  some text'.length]);
+  });
+
+  test('handles out-of-range bounds correctly', () => {
+    const bounds = HighlightRuleComponent.computeCharBounds([30, 40], '  some text', true);
+    expect(bounds).toEqual(['  some text'.length, '  some text'.length]);
+  });
+
+  test('handles line-length end correctly', () => {
+    const bounds = HighlightRuleComponent.computeCharBounds([0, 4], '  abcd', true);
+    expect(bounds).toEqual([0, 4]);
+  });
+});
+
 describe('computeWordBounds', () => {
   test('computes word bounds correctly', () => {
     const bounds = HighlightRuleComponent.computeWordBounds([1, 2], '  some text here');