From a37c42bb9f5634b7b99420a3376de3053b685de9 Mon Sep 17 00:00:00 2001 From: openorclose Date: Tue, 10 Mar 2020 23:40:03 +0800 Subject: [PATCH 1/3] Add start from line number functionality to code blocks --- docs/userGuide/syntax/code.mbdf | 26 ++++++++++++++++++- src/lib/markbind/src/lib/markdown-it/index.js | 7 +++++ .../test_site/expected/testCodeBlocks.html | 2 ++ test/functional/test_site/testCodeBlocks.md | 6 +++++ 4 files changed, 40 insertions(+), 1 deletion(-) diff --git a/docs/userGuide/syntax/code.mbdf b/docs/userGuide/syntax/code.mbdf index e4aaef01f2..9f9278ce3e 100644 --- a/docs/userGuide/syntax/code.mbdf +++ b/docs/userGuide/syntax/code.mbdf @@ -38,7 +38,7 @@ To enable syntax coloring, specify a language next to the backticks before the f ##### Line numbering -Line numbers are automatically provided by default. To hide line numbers, add the class `no-line-numbers ` to the code block as below +Line numbers are provided by default. To hide line numbers, add the class `no-line-numbers` to the code block as below @@ -61,6 +61,30 @@ Line numbers are automatically provided by default. To hide line numbers, add th +You can have your line numbers start with a value other than `1` with the `start-from` attribute. + + + + +```` {.no-line-numbers} +```js {start-from=6} +function add(a, b) { + return a + b; +} +``` +```` + + + +```js {start-from=6} +function add(a, b) { + return 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. diff --git a/src/lib/markbind/src/lib/markdown-it/index.js b/src/lib/markbind/src/lib/markdown-it/index.js index d89a5e31cb..a243c15bdb 100644 --- a/src/lib/markbind/src/lib/markdown-it/index.js +++ b/src/lib/markbind/src/lib/markdown-it/index.js @@ -64,6 +64,13 @@ markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => { if (!highlighted) { lines = markdownIt.utils.escapeHtml(str).split('\n'); } + + const startFrom = Number(token.attrGet('start-from')); + + if (startFrom) { + // counter is incremented on each span, so we need to subtract 1 + token.attrJoin('style', `counter-set: line ${startFrom - 1};`); + } const highlightLinesInput = token.attrGet('highlight-lines'); let lineNumbersAndRanges = []; diff --git a/test/functional/test_site/expected/testCodeBlocks.html b/test/functional/test_site/expected/testCodeBlocks.html index 46309043f9..ea97106ae2 100644 --- a/test/functional/test_site/expected/testCodeBlocks.html +++ b/test/functional/test_site/expected/testCodeBlocks.html @@ -32,6 +32,8 @@ 
function fourEmptyLinesBelow() {​​​​} // four empty lines above

hljs span spanning multiple lines

*****-----
+

start-from attr causes inline style to be set

+ 
*****-----