Merge pull request #815 from oasisprotocol/matevz/feat/highlight-line…

…-numbers

remark: Add support for highlighting line numbers

README.md

@@ -170,6 +170,12 @@ region name:
 To define the region in the referenced file put `#region some-region-name` and
 `#endregion some-region-name` as a comment line.
 
+Highlighting specific lines also work:
+
+```markdown
+![code go {4-6}](../../examples/somefile.go)
+```
+
 ### Backward compatibility
 
 When you move, rename or delete previously published content, make sure that

src/css/custom.css

@@ -18,6 +18,7 @@
   --ifm-font-family-monospace: "Roboto Mono", monospace;
   --ifm-global-radius: 0;
   --ifm-alert-border-width: 5px;
+  --docusaurus-highlighted-code-line-bg: #dddfe1;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -29,6 +30,7 @@ html[data-theme='dark'] {
   --ifm-color-primary-light: #00ffff;
   --ifm-color-primary-lighter: #00ffff;
   --ifm-color-primary-lightest: #00ffff;
+  --docusaurus-highlighted-code-line-bg: #646464;
 }
 
 /* Custom fonts */

src/remark/code-block-snippets.test.ts

@@ -60,7 +60,6 @@ test('line-numbers', () => {
     visitor(node);
 
     expect(node.type).toBe('code');
-    expect(node.lang).toBe('js');
     expect(node.meta).toBe('title="Some title"');
     expect(node.value.split("\n").length).toBe(3);
 });
@@ -86,6 +85,74 @@ test('region', () => {
     expect(node.value.split("\n").length).toBe(4);
 });
 
+test('highlight-line-numbers', () => {
+    let node = {
+        type: 'paragraph',
+        children: [{
+            type: 'image',
+            alt: 'code {4-6}',
+            url: 'src/remark/code-block-snippets.test.ts',
+        }],
+    };
+
+    visitor(node);
+
+    expect(node.type).toBe('code');
+    expect(node.meta).toBe('{4-6}');
+});
+
+test('highlight-line-numbers-title', () => {
+    let node = {
+        type: 'paragraph',
+        children: [{
+            type: 'image',
+            alt: 'code {4-6}',
+            url: 'src/remark/code-block-snippets.test.ts',
+            title: 'Some title',
+        }],
+    };
+
+    visitor(node);
+
+    expect(node.type).toBe('code');
+    expect(node.meta).toBe('{4-6} title="Some title"');
+});
+
+test('highlight-line-numbers-lang', () => {
+    let node = {
+        type: 'paragraph',
+        children: [{
+            type: 'image',
+            alt: 'code text {4-6}',
+            url: 'src/remark/code-block-snippets.test.ts',
+        }],
+    };
+
+    visitor(node);
+
+    expect(node.type).toBe('code');
+    expect(node.lang).toBe('text');
+    expect(node.meta).toBe('{4-6}');
+});
+
+test('highlight-line-numbers-lang-title', () => {
+    let node = {
+        type: 'paragraph',
+        children: [{
+            type: 'image',
+            alt: 'code text {4-6}',
+            url: 'src/remark/code-block-snippets.test.ts',
+            title: 'Some title',
+        }],
+    };
+
+    visitor(node);
+
+    expect(node.type).toBe('code');
+    expect(node.lang).toBe('text');
+    expect(node.meta).toBe('{4-6} title="Some title"');
+});
+
 test('invalid-file', () => {
     let node = {
         type: 'paragraph',

src/remark/code-block-snippets.ts

@@ -56,6 +56,12 @@ export function visitor(untypedNode: mdast.Node): asserts untypedNode is mdast.C
         node.meta = `title="${imgNode.title}"`;
     }
 
+    // Highlight line numbers, if {some-range,and,some,more,lines} syntax used.
+    const lineNumber = imgNode.alt.match(/(\{.*\})/g);
+    if (lineNumber) {
+        node.meta = lineNumber[0] + (node.meta?" "+node.meta:"");
+    }
+
     // Source filename can have fragment symbol # followed by the line number(s) or region name.
     const [relSrcFilePath, fragment] = imgNode.url.split("#");