diff --git a/README.md b/README.md index d1fa074bb9..7608e4a158 100644 --- a/README.md +++ b/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 diff --git a/src/css/custom.css b/src/css/custom.css index 26f07ec68c..5d1a500ef6 100644 --- a/src/css/custom.css +++ b/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 */ diff --git a/src/remark/code-block-snippets.test.ts b/src/remark/code-block-snippets.test.ts index 12b1799c5e..bcc1f8dccf 100644 --- a/src/remark/code-block-snippets.test.ts +++ b/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', diff --git a/src/remark/code-block-snippets.ts b/src/remark/code-block-snippets.ts index 8d39e8b1ae..64a2830490 100644 --- a/src/remark/code-block-snippets.ts +++ b/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("#");