@peaceroad/markdown-it-renderer-fence 0.1.1 → 0.2.0

package/README.md

@@ -22,7 +22,7 @@ const md = mdit({
                   return highlightjs.highlight(str, { language: lang }).value
                } catch (__) {}
              }
-             return ''
+             return str
            }).use(mditAttrs).use(mditRendererFence)
 
 
@@ -68,12 +68,12 @@ $ pwd
 ~~~
 
 
-## Add span elements to display line number, and style attribute.
+## Add span elements to display line number.
 
 Add `start` or `data-pre-start` attribute by adding attributes used markdown-it-attrs.
 
 ~~~md
-```js {.style start="1"}
+```js {start="1"}
 import mdit from 'markdonw-it'
 const md = mdit()
 md.render('Nyaan')
@@ -81,10 +81,50 @@ md.render('Nyaan')
 ~~~
 
 ~~~html
-<pre><code class="language-js style" data-pre-start="1" style="counter-set:pre-line-number 1;"><span class="pre-line"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span></span>
+<pre><code class="language-js" data-pre-start="1" style="counter-set:pre-line-number 1;"><span class="pre-line"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span></span>
 <span class="pre-line"><span class="hljs-keyword">const</span> md = <span class="hljs-title function_">mdit</span>()</span>
 <span class="pre-line">md.<span class="hljs-title function_">render</span>(<span class="hljs-string">&#x27;Nyaan&#x27;</span>)</span>
 </code></pre>
 ~~~
 
 CSS example: <https://codepen.io/peaceroad/pen/qBGpYGK>
+
+## Add span elements to add background color to the row ranges.
+
+Add `em-lines` or `emphasize-lines` attribute by by adding attributes used markdown-it-attrs.
+
+~~~md
+``` {em-lines="2,4-5"}
+1
+2
+3
+4
+5
+6
+```
+~~~
+
+~~~html
+[HTML]
+<pre><code data-pre-emphasis="2,4-5">1
+<span class="pre-lines-emphasis">2
+</span>3
+<span class="pre-lines-emphasis">4
+5
+</span>6
+</code></pre>
+~~~
+
+
+## Options
+
+The following options can be specified when initializing the plugin:
+
+- attrsOrder: default ['class','id','data-*','style'] — order of attributes in output; wildcards supported.
+- setHighlight: default true — enable calling highlight function (e.g., highlight.js).
+- setLineNumber: default true — wrap lines in spans for line numbers.
+- setEmphasizeLines: default true — enable emphasis based on emphasize-lines attribute.
+- setLineEndSpan: default 0 — character count threshold to append end-of-line span (0 to disable).
+- lineEndSpanClass: default 'pre-lineend-spacer' — CSS class for end-of-line span.
+- sampLang: default 'shell,console' — comma-separated list of languages (in addition to 'samp') that will be rendered using `<samp>`.
+- langPrefix: default md.options.langPrefix || 'language-' — prefix for language class on code blocks.

package/index.js

@@ -1,38 +1,93 @@
-const fenceStartTag = (tagName, sAttr) => {
-  let orderedAttrs = [...sAttr.id, ...sAttr.clas, ...sAttr.data, ...sAttr.style, ...sAttr.other]
-  //console.log(orderedAttrs)
-  let tag = '<' + tagName
-  for (let attr of orderedAttrs) {
-    if (attr[0]) tag += ' ' + attr[0] + '="' + attr[1] + '"'
-  }
-  return tag + '>'
+const infoReg = /^([^{\s]*)(?:\s*\{(.*)\})?$/
+const startReg = /^(?:(?:data-)?pre-)?start$/
+const startFilterReg = /^(?:pre-)?start$/
+const emphasisReg = /^em(?:phasize)?-lines$/
+
+const attrReg = /^(?:([.#])(.+)|(.+?)(?:=(["'])?(.*?)\1)?)$/
+const interAttrsSpaceReg = / +/
+const tagReg = /<\/?([A-Za-z][A-Za-z0-9-]*)(?:\s+[^>]*?)?\/?\s*>/g
+const preLineTag = '<span class="pre-line">'
+const emphOpenTag = '<span class="pre-lines-emphasis">'
+const closeTag = '</span>'
+const closeTagLen = closeTag.length
+
+const getEmphasizeLines = (attrVal) => {
+  const lines = []
+  let s, e
+  attrVal.split(',').forEach(range => {
+    if (range.indexOf('-') > -1) {
+      [s, e] = range.split('-').map(n => parseInt(n.trim(), 10))
+      lines.push([s, e])
+    } else {
+      s = parseInt(range.trim(), 10)
+      lines.push([s, s])
+    }
+  })
+  return lines
 }
 
-const splitFenceBlockToLines = (token, content) => {
-  const br = content.match(/\r?\n/)
-  const lines = content.split(/r?\n/)
-  lines.map((line, n) => {
-    const lastElementTag = line.match(/<(\w+)( +[^>]*?)>[^>]*?(<\/\1>)?[^>]*?$/)
-    if (lastElementTag && !lastElementTag[3]) {
-      line += '</span>'
-      if (n < lines.length - 2) {
-        lines[n + 1] = `<${lastElementTag[1]}${lastElementTag[2]}>` + lines[n + 1]
+const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, threshold, lineEndSpanClass, br) => {
+  const lines = content.split(br)
+  const len = lines.length
+  const endSpanTag = `<span class="${lineEndSpanClass}"></span>`
+  let emIdx = 0
+  let [emStart, emEnd] = emphasizeLines[0] || []
+  for (let n = 0; n < len; n++) {
+    let line = lines[n]
+
+    if (needEndSpan) {
+      let lineLen = 0
+      for (let i = 0, L = line.length; i < L; i++) {
+        lineLen += line.charCodeAt(i) > 255 ? 2 : 1
+      }
+      if (lineLen >= threshold) {
+        if (line.slice(-closeTagLen) === closeTag) {
+          line = line.slice(0, -closeTagLen) + endSpanTag + closeTag
+        } else {
+          line = line + endSpanTag
+        }
       }
     }
-    if (n < lines.length - 1) {
-      lines[n] = '<span class="pre-line">' + line + '</span>'
+
+    if (needLineNumber && n !== len - 1) {
+      const tagStack = []
+      tagReg.lastIndex = 0
+      let match
+      while ((match = tagReg.exec(line)) !== null) {
+        const [fullMatch, tagName] = match
+        if (fullMatch.startsWith('</')) {
+          if (tagStack[tagStack.length-1] === tagName) tagStack.pop()
+        } else if (!fullMatch.endsWith('/>')) {
+          tagStack.push(tagName)
+        }
+      }
+      for (let i = tagStack.length-1; i >= 0; i--) {
+        const tagName = tagStack[i]
+        line += `</${tagName}>`
+        lines[n+1] = `<${tagName}>` + (lines[n+1]||'')
+      }
+      line = preLineTag + line + closeTag
     }
-  })
+
+    if (needEmphasis) {
+      if (emStart === n + 1) line = emphOpenTag + line
+      if (emEnd === n) {
+        line = closeTag + line
+        emIdx++
+        [emStart, emEnd] = emphasizeLines[emIdx] || []
+      }
+    }
+    lines[n] = line
+  }
   return lines.join(br)
 }
 
-const setInfoAttr = (infoAttr) => {
+const getInfoAttr = (infoAttr) => {
+  let attrSets = infoAttr.trim().split(interAttrsSpaceReg)
   let arr = []
-  let attrSets = infoAttr.trim().split(/ +/)
   for (let attrSet of attrSets) {
-    const str = attrSet.match(/^(?:([.#])(.+)|(.+?)(?:=("')?(.*?)\1?)?)$/)
+    const str = attrReg.exec(attrSet)
     if (str) {
-      console.log(str)
       if (str[1] === '.') str[1] = 'class'
       if (str[1] === '#') str[1] = 'id'
       if (str[3]) {
@@ -45,95 +100,110 @@ const setInfoAttr = (infoAttr) => {
   return arr
 }
 
-const getFenceHtml = (tokens, idx, env, slf, md, options) => {
-  const opt = {
-    setHighlight: true,
-    setLineNumber: true,
-    langPrefix: 'language-',
-    highlight: null,
-  }
-  if (options) Object.assign(opt, options)
+const orderTokenAttrs = (token, opt) => {
+  if (!token.attrs) return
+  const order = opt.attrsOrder || []
+  token.attrs.sort((a, b) => {
+    const idx = (name) => {
+      for (let i = 0; i < order.length; i++) {
+        const key = order[i]
+        if (key.endsWith('*')) {
+          const prefix = key.slice(0, -1)
+          if (name.startsWith(prefix)) return i
+        } else if (name === key) {
+          return i
+        }
+      }
+      return order.length
+    }
+    return idx(a[0]) - idx(b[0])
+  })
+}
 
+const getFenceHtml = (tokens, idx, md, opt, slf) => {
   const token = tokens[idx]
-  //console.log(token)
   let content = token.content
-  const infoAttr = token.info.trim().match(/{(.*)}$/)
-  if(infoAttr) {
-    token.attrs = token.attrs ? [...token.attrs, ...setInfoAttr(infoAttr[1])] : setInfoAttr(infoAttr[1])
+  const match = token.info.trim().match(infoReg)
+  let lang = match ? match[1] : ''
+
+  if (match && match[2]) {
+    getInfoAttr(match[2]).forEach(([name, val]) => token.attrJoin(name, val))
+  }
+  let langClass = ''
+  if (lang  && lang !== 'samp') {
+    langClass = opt.langPrefix + lang
+    token.attrSet('class', langClass + (token.attrGet('class') ? ' ' + token.attrGet('class') : ''))
   }
-  //console.log(token.attrs)
 
-  let lang = token.info.trim().replace(/ *({.*)?$/, '')
-  const langClass = lang && token.info !== 'samp' ? opt.langPrefix + lang : ''
-  let sAttr = {id: [], clas: [], data: [], style: [], other: []}
-  let hasPreLineStart = false
-  let preLineStart = -1
+  let startNumber = -1
+  let emphasizeLines = []
+
   if (token.attrs) {
-    //console.log('start: ' +token.attrs)
     for (let attr of token.attrs) {
-      if (attr[0] === 'id') {
-        sAttr.id.push(attr)
-      } else if (attr[0] === 'class') {
-        const sAttrClass = langClass ? langClass + ' ' + attr[1] : attr[1]
-        const hasLang = attr[1].match(new RegExp('(?:^| )' + opt.langPrefix + '(.*)(?: |$)'))
-        if (hasLang) lang = hasLang[1]
-        sAttr.clas.push([attr[0], sAttrClass])
-      } else if (attr[0].startsWith('data-') || /^(?:pre-)?start$/.test(attr[0])) {
-        if (/^(?:(?:data-)?pre-)?start$/.test(attr[0])) {
-          hasPreLineStart = true
-          preLineStart = attr[1]
-          attr[0] = 'data-pre-start'
+      if (attr[0] === 'class') {
+        const hasClassLang = attr[1].match(opt._langReg)
+        if (hasClassLang) lang = hasClassLang[1]
+      }
+      if (startReg.test(attr[0])) {
+        startNumber = +attr[1]
+        if (attr[0] !== 'data-pre-start') {
+          token.attrSet('data-pre-start', attr[1])
+          token.attrs = token.attrs.filter(attr => !startFilterReg.test(attr[0]))
         }
-        sAttr.data.push(attr)
-      } else if (attr[0] === 'style') {
-        sAttr.style.push(attr)
-      } else {
-        sAttr.other.push(attr)
+      }
+      if (emphasisReg.test(attr[0])) {
+        emphasizeLines = getEmphasizeLines(attr[1])
+        token.attrSet('data-pre-emphasis', attr[1])
+        token.attrs = token.attrs.filter(attr => !emphasisReg.test(attr[0]))
       }
     }
   }
-  if (sAttr.clas.length === 0 && langClass !== '') sAttr.clas.push(['class', langClass])
-  if (hasPreLineStart && preLineStart !== -1) {
-    if (sAttr.style.length === 0) {
-      sAttr.style.push(['style', 'counter-set:pre-line-number ' + preLineStart + ';'])
-    } else {
-      sAttr.style[0][1] = sAttr.style[0][1].replace(/;?$/, '; counter-set:pre-line-number ' + preLineStart + ';')
-    }
+  if (startNumber !== -1) {
+    token.attrJoin('style', 'counter-set:pre-line-number ' + startNumber + ';')
   }
-  //console.log(JSON.stringify(sAttr))
+  orderTokenAttrs(token, opt)
 
   if (opt.setHighlight && md.options.highlight) {
     if (lang && lang !== 'samp' ) {
-      content = md.options.highlight(token.content, lang)
+      content = md.options.highlight(content, lang)
     } else {
       content = md.utils.escapeHtml(token.content)
     }
   } else {
     content = md.utils.escapeHtml(token.content)
   }
-  if (opt.setLineNumber && hasPreLineStart) {
-    content = splitFenceBlockToLines(token, content)
-  }
 
-  let fenceHtml = '<pre>'
-  let isSamp = /^(?:samp|shell|console)$/.test(lang)
-  if (isSamp) {
-    fenceHtml += fenceStartTag('samp', sAttr)
-  } else {
-    fenceHtml += fenceStartTag('code', sAttr)
-  }
-  fenceHtml += content
-  if (isSamp) {
-    fenceHtml += '</samp>'
-  } else {
-    fenceHtml += '</code>'
+  const needLineNumber = opt.setLineNumber && startNumber >= 0
+  const needEmphasis = opt.setEmphasizeLines && emphasizeLines.length > 0
+  const needEndSpan = opt.setLineEndSpan > 0
+  if (needLineNumber || needEmphasis || needEndSpan) {
+    const brMatch = content.match(/\r?\n/)
+    const br = brMatch ? brMatch[0] : '\n'
+    content = splitFenceBlockToLines(content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, opt.setLineEndSpan, opt.lineEndSpanClass, br)
   }
-  return fenceHtml + '</pre>\n'
+
+  const tag = opt._sampReg.test(lang) ? 'samp' : 'code'
+  return `<pre><${tag}${slf.renderAttrs(token)}>${content}</${tag}></pre>\n`
 }
 
-const mditRendererFence = (md, options) => {
-  md.renderer.rules['fence'] = (tokens, idx, env, slf) => {
-    return getFenceHtml(tokens, idx, env, slf, md, options)
+const mditRendererFence = (md, option) => {
+  const opt = {
+    attrsOrder: ['class', 'id', 'data-*', 'style'],
+    setHighlight: true,
+    setLineNumber: true,
+    setEmphasizeLines: true,
+    setLineEndSpan: 0,
+    lineEndSpanClass: 'pre-lineend-spacer',
+    sampLang: 'shell,console',
+    langPrefix: md.options.langPrefix || 'language-',
+  }
+  if (option) Object.assign(opt, option)
+
+  opt._sampReg = new RegExp('^(?:samp|' + opt.sampLang.split(',').join('|') + ')$')
+  opt._langReg = new RegExp(opt.langPrefix + '([A-Za-z0-9-]+)')
+
+  md.renderer.rules['fence'] = (tokens, idx, options, env, slf)  => {
+    return getFenceHtml(tokens, idx, md, opt, slf)
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-renderer-fence",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "In code blocks, the `<samp>` tag is used with the language keywords `samp`, `shell`, and `console`, and provides an option to display line numbers.",
   "main": "index.js",
   "type": "module",
@@ -11,9 +11,9 @@
   "repository": "https://github.com/peaceroad/p7d-markdown-it-renderer-fence",
   "license": "MIT",
   "devDependencies": {
-    "@peaceroad/markdown-it-figure-with-p-caption": "^0.6.1",
-    "highlight.js": "^11.9.0",
+    "@peaceroad/markdown-it-figure-with-p-caption": "^0.10.1",
     "markdown-it": "^14.1.0",
-    "markdown-it-attrs": "^4.1.6"
+    "markdown-it-attrs": "^4.2.0",
+    "highlight.js": "^11.10.0"
   }
 }

package/test/example-line-end-span.txt

@@ -0,0 +1,55 @@
+[Markdown]
+```
+1234567890
+2
+1234567890
+4
+1234567890
+6
+```
+[HTML]
+<pre><code>1234567890<span class="pre-lineend-spacer"></span>
+2
+1234567890<span class="pre-lineend-spacer"></span>
+4
+1234567890<span class="pre-lineend-spacer"></span>
+6
+</code></pre>
+
+
+[Markdown]
+``` {em-lines="3"}
+1234567890
+2
+1234567890
+4
+1234567890
+6
+```
+[HTML]
+<pre><code data-pre-emphasis="3">1234567890<span class="pre-lineend-spacer"></span>
+2
+<span class="pre-lines-emphasis">1234567890<span class="pre-lineend-spacer"></span>
+</span>4
+1234567890<span class="pre-lineend-spacer"></span>
+6
+</code></pre>
+
+
+[Markdown]
+``` {em-lines="3" start="4"}
+1234567890
+2
+1234567890
+4
+1234567890
+6
+```
+[HTML]
+<pre><code data-pre-emphasis="3" data-pre-start="4" style="counter-set:pre-line-number 4;"><span class="pre-line">1234567890<span class="pre-lineend-spacer"></span></span>
+<span class="pre-line">2</span>
+<span class="pre-lines-emphasis"><span class="pre-line">1234567890<span class="pre-lineend-spacer"></span></span>
+</span><span class="pre-line">4</span>
+<span class="pre-line">1234567890<span class="pre-lineend-spacer"></span></span>
+<span class="pre-line">6</span>
+</code></pre>

package/test/example-lines-emphasis.txt

@@ -0,0 +1,93 @@
+[Markdown]
+``` {em-lines="3-5"}
+1
+2
+3
+4
+5
+6
+```
+[HTML]
+<pre><code data-pre-emphasis="3-5">1
+2
+<span class="pre-lines-emphasis">3
+4
+5
+</span>6
+</code></pre>
+
+
+[Markdown]
+``` {em-lines="1"}
+1
+2
+3
+4
+5
+6
+```
+[HTML]
+<pre><code data-pre-emphasis="1"><span class="pre-lines-emphasis">1
+</span>2
+3
+4
+5
+6
+</code></pre>
+
+
+[Markdown]
+``` {em-lines="1-3,5-6"}
+1
+2
+3
+4
+5
+6
+```
+[HTML]
+<pre><code data-pre-emphasis="1-3,5-6"><span class="pre-lines-emphasis">1
+2
+3
+</span>4
+<span class="pre-lines-emphasis">5
+6
+</span></code></pre>
+
+
+[Markdown]
+``` {em-lines="3-5" start="1"}
+1
+2
+3
+4
+5
+6
+```
+[HTML]
+<pre><code data-pre-emphasis="3-5" data-pre-start="1" style="counter-set:pre-line-number 1;"><span class="pre-line">1</span>
+<span class="pre-line">2</span>
+<span class="pre-lines-emphasis"><span class="pre-line">3</span>
+<span class="pre-line">4</span>
+<span class="pre-line">5</span>
+</span><span class="pre-line">6</span>
+</code></pre>
+
+
+[Markdown]
+``` {em-lines="2,4-5"}
+1
+2
+3
+4
+5
+6
+```
+[HTML]
+<pre><code data-pre-emphasis="2,4-5">1
+<span class="pre-lines-emphasis">2
+</span>3
+<span class="pre-lines-emphasis">4
+5
+</span>6
+</code></pre>

package/test/examples-highlightjs.txt

@@ -163,3 +163,13 @@ console.log('A test.')
 [HTML]
 <pre><code class="language-js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;A test.&#x27;</span>)
 </code></pre>
+
+[Markdown]
+```conf
+[Service]
+Environment="OLLAMA_HOST=0.0.0.0"
+```
+[HTML]
+<pre><code class="language-conf">[Service]
+Environment="OLLAMA_HOST=0.0.0.0"
+</code></pre>

package/test/examples.txt

@@ -81,7 +81,7 @@ console.log('A test.')
 console.log('A test.')
 ```
 [HTML]
-<pre><code id="id" class="language-js style">console.log('A test.')
+<pre><code class="language-js style" id="id">console.log('A test.')
 </code></pre>
 
 [Markdown]

package/test/test.js

@@ -22,10 +22,11 @@ const mdHighlightJs = mdit({
         return highlightjs.highlight(str, { language: lang }).value
       } catch (__) {}
     }
-    return ''
+    return str
   }
 }).use(mditRendererFence, opt).use(mditAttrs)
-
+const mdLinesEmphasis = mdit({ html: true }).use(mditRendererFence).use(mditAttrs)
+const mdLIneEndSpan = mdit({ html: true }).use(mditRendererFence, {setLineEndSpan: 8}).use(mditAttrs)
 
 let __dirname = path.dirname(new URL(import.meta.url).pathname)
 const isWindows = (process.platform === 'win32')
@@ -36,6 +37,8 @@ if (isWindows) {
 const testData = {
   noOption: __dirname + path.sep +  'examples.txt',
   highlightjs: __dirname + path.sep +  'examples-highlightjs.txt',
+  linesEmphasis: __dirname + path.sep +  'example-lines-emphasis.txt',
+  lineEndSpan: __dirname + path.sep +  'example-line-end-span.txt',
 }
 
 const getTestData = (pat) => {
@@ -87,7 +90,7 @@ const runTest = (process, pat, pass, testId) => {
 
   while(n <= end) {
     if (!ms[n]
-//      || n != 3
+    //|| n != 14
     ) {
       n++
       continue
@@ -114,5 +117,7 @@ const runTest = (process, pat, pass, testId) => {
 let pass = true
 pass = runTest(md, testData.noOption, pass)
 pass = runTest(mdHighlightJs, testData.highlightjs, pass)
+pass = runTest(mdLinesEmphasis, testData.linesEmphasis, pass)
+pass = runTest(mdLIneEndSpan, testData.lineEndSpan, pass)
 
 if (pass) console.log('Passed all test.')