@peaceroad/markdown-it-renderer-fence 0.3.0 → 0.4.0

package/README.md

@@ -92,6 +92,7 @@ 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.
+Open-ended ranges are supported: `-5` (1..5), `3-` (3..last), `-` (all).
 
 ~~~md
 ``` {em-lines="2,4-5"}
@@ -132,6 +133,25 @@ const longLine = 'This line is long but wraps.'
 
 When `setPreWrapStyle` is set to false, only `data-pre-wrap="true"` is added and the inline style is omitted.
 
+## Mark comment lines in code blocks
+
+Add `comment-line` attribute to mark comment lines. Lines that start with the given marker (after leading whitespace) are wrapped with `<span class="pre-comment-line">`.
+
+~~~md
+```samp {comment-line="#"}
+# comment
+echo 1
+```
+~~~
+
+~~~html
+<pre><samp data-pre-comment-line="#"><span class="pre-comment-line"># comment</span>
+echo 1
+</samp></pre>
+~~~
+
+Note: this feature relies on line splitting and is disabled when `useHighlightPre` is true and `<pre><code>` is provided by the highlighter.
+
 
 ## Options
 
@@ -141,8 +161,12 @@ The following options can be specified when initializing the plugin:
 - 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).
+- lineEndSpanThreshold: default 0 — character count threshold to append end-of-line span (0 to disable).
+- setLineEndSpan: alias for lineEndSpanThreshold.
 - lineEndSpanClass: default 'pre-lineend-spacer' — CSS class for end-of-line span.
 - setPreWrapStyle: default true — include inline pre-wrap styles on `<pre>` when wrap is enabled.
+- useHighlightPre: default false — if highlight returns `<pre><code>`, keep that wrapper and skip line-splitting features; attributes are still merged.
+
+When `useHighlightPre` is true and the highlight output contains `<pre><code>`, line-splitting features are disabled (setLineNumber, setEmphasizeLines, lineEndSpanThreshold, comment-line).
 - 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

@@ -5,9 +5,13 @@ 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 commentLineClass = 'pre-comment-line'
 const closeTag = '</span>'
 const closeTagLen = closeTag.length
 const preWrapStyle = 'white-space: pre-wrap; overflow-wrap: anywhere;'
+const preCodeWrapperReg = /^\s*<pre\b([^>]*)>\s*<code\b([^>]*)>([\s\S]*?)<\/code>\s*<\/pre>\s*$/i
+const htmlAttrReg = /([^\s=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g
+const voidTags = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'])
 
 const appendStyleValue = (style, addition) => {
   if (!addition) return style
@@ -20,27 +24,110 @@ const appendStyleValue = (style, addition) => {
   return base + separator + next
 }
 
+const parseHtmlAttrs = (attrText) => {
+  const attrs = []
+  if (!attrText) return attrs
+  htmlAttrReg.lastIndex = 0
+  let match
+  while ((match = htmlAttrReg.exec(attrText)) !== null) {
+    const name = match[1]
+    const val = match[2] ?? match[3] ?? match[4] ?? ''
+    attrs.push([name, val])
+  }
+  return attrs
+}
+
+const mergeAttrSets = (target, source) => {
+  if (!source || source.length === 0) return
+  const index = new Map()
+  for (let i = 0; i < target.length; i++) index.set(target[i][0], i)
+  for (const [name, val] of source) {
+    const idx = index.get(name)
+    if (name === 'class') {
+      if (idx === undefined) {
+        target.push([name, val])
+        index.set(name, target.length - 1)
+      } else if (val) {
+        const existing = target[idx][1]
+        target[idx][1] = existing ? existing + ' ' + val : val
+      }
+      continue
+    }
+    if (name === 'style') {
+      if (idx === undefined) {
+        target.push([name, val])
+        index.set(name, target.length - 1)
+      } else {
+        target[idx][1] = appendStyleValue(target[idx][1], val)
+      }
+      continue
+    }
+    if (idx === undefined) {
+      target.push([name, val])
+      index.set(name, target.length - 1)
+    }
+  }
+}
+
 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])
+  for (const range of attrVal.split(',')) {
+    const part = range.trim()
+    if (!part) continue
+    const dash = part.indexOf('-')
+    if (dash > -1) {
+      const left = part.slice(0, dash).trim()
+      const right = part.slice(dash + 1).trim()
+      const s = left ? parseInt(left, 10) : null
+      const e = right ? parseInt(right, 10) : null
+      if (s !== null && (!Number.isFinite(s) || s <= 0)) continue
+      if (e !== null && (!Number.isFinite(e) || e <= 0)) continue
+      if (s === null && e === null) {
+        lines.push([null, null])
+      } else {
+        lines.push([s, e])
+      }
     } else {
-      s = parseInt(range.trim(), 10)
+      const s = parseInt(part, 10)
+      if (!Number.isFinite(s) || s <= 0) continue
       lines.push([s, s])
     }
-  })
+  }
   return lines
 }
 
-const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, threshold, lineEndSpanClass, br) => {
+const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, threshold, lineEndSpanClass, br, commentLines, commentClass) => {
   const lines = content.split(br)
   const len = lines.length
   const endSpanTag = needEndSpan ? `<span class="${lineEndSpanClass}"></span>` : ''
+  const needComment = !!(commentLines && commentClass)
+  const maxLine = len - (lines[len - 1] === '' ? 1 : 0)
   let emIdx = 0
-  let [emStart, emEnd] = emphasizeLines[0] || []
+  let emStart
+  let emEnd
+  let doEmphasis = false
+  if (needEmphasis && maxLine > 0) {
+    const normalized = []
+    for (const range of emphasizeLines) {
+      let [s, e] = range
+      if (s == null) s = 1
+      if (e == null) e = maxLine
+      if (!Number.isFinite(s) || !Number.isFinite(e) || s <= 0 || e <= 0) continue
+      if (s > e) {
+        const tmp = s
+        s = e
+        e = tmp
+      }
+      if (s > maxLine || e < 1) continue
+      if (e > maxLine) e = maxLine
+      normalized.push([s, e])
+    }
+    if (normalized.length > 0) {
+      doEmphasis = true
+      emphasizeLines = normalized
+      ;[emStart, emEnd] = emphasizeLines[0]
+    }
+  }
   for (let n = 0; n < len; n++) {
     let line = lines[n]
 
@@ -69,10 +156,11 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
         let match
         while ((match = tagReg.exec(line)) !== null) {
           const [fullMatch, tagName] = match
+          const tagNameLower = tagName.toLowerCase()
           if (fullMatch.startsWith('</')) {
-            if (tagStack[tagStack.length-1] === tagName) tagStack.pop()
-          } else if (!fullMatch.endsWith('/>')) {
-            tagStack.push(tagName)
+            if (tagStack[tagStack.length-1] === tagNameLower) tagStack.pop()
+          } else if (!fullMatch.endsWith('/>') && !voidTags.has(tagNameLower)) {
+            tagStack.push(tagNameLower)
           }
         }
         for (let i = tagStack.length-1; i >= 0; i--) {
@@ -81,10 +169,17 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
           lines[n+1] = `<${tagName}>` + (lines[n+1]||'')
         }
       }
+    }
+
+    if (needComment && commentLines[n]) {
+      line = `<span class="${commentClass}">` + line + closeTag
+    }
+
+    if (needLineNumber && n !== len - 1) {
       line = preLineTag + line + closeTag
     }
 
-    if (needEmphasis) {
+    if (doEmphasis) {
       if (emStart === n + 1) line = emphOpenTag + line
       if (emEnd === n) {
         line = closeTag + line
@@ -156,15 +251,18 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
   let emphasizeLines = []
   let wrapEnabled = false
   let preWrapValue
+  let commentLineValue
 
   if (token.attrs) {
     const newAttrs = []
     let dataPreStartIndex = -1
     let dataPreEmphasisIndex = -1
     let styleIndex = -1
+    let dataPreCommentIndex = -1
     let startValue
     let emphasisValue
     let styleValue
+    let sawCommentLine = false
     let sawStartAttr = false
     let sawEmphasisAttr = false
     const appendOrder = []
@@ -206,6 +304,11 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
           dataPreEmphasisIndex = newAttrs.length
           newAttrs.push(attr)
           break
+        case 'data-pre-comment-line':
+          dataPreCommentIndex = newAttrs.length
+          commentLineValue = val
+          newAttrs.push(attr)
+          break
         case 'em-lines':
         case 'emphasize-lines':
           emphasizeLines = getEmphasizeLines(val)
@@ -215,6 +318,13 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
             sawEmphasisAttr = true
           }
           break
+        case 'comment-line':
+          commentLineValue = val
+          if (!sawCommentLine) {
+            appendOrder.push('comment')
+            sawCommentLine = true
+          }
+          break
         case 'data-pre-wrap':
           preWrapValue = val
           if (val === '' || val === 'true') wrapEnabled = true
@@ -236,6 +346,9 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
     if (emphasisValue !== undefined && dataPreEmphasisIndex >= 0) {
       newAttrs[dataPreEmphasisIndex][1] = emphasisValue
     }
+    if (commentLineValue !== undefined && dataPreCommentIndex >= 0) {
+      newAttrs[dataPreCommentIndex][1] = commentLineValue
+    }
     for (const kind of appendOrder) {
       if (kind === 'start') {
         if (dataPreStartIndex === -1 && startValue !== undefined) {
@@ -245,6 +358,10 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
         if (dataPreEmphasisIndex === -1 && emphasisValue !== undefined) {
           newAttrs.push(['data-pre-emphasis', emphasisValue])
         }
+      } else if (kind === 'comment') {
+        if (dataPreCommentIndex === -1 && commentLineValue !== undefined) {
+          newAttrs.push(['data-pre-comment-line', commentLineValue])
+        }
       }
     }
     if (startNumber !== -1) {
@@ -258,13 +375,17 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
     if (wrapEnabled) preWrapValue = 'true'
     token.attrs = newAttrs
   }
-  orderTokenAttrs(token, opt)
-  let preAttrs = ''
-  if (preWrapValue !== undefined) {
-    const escapeHtml = md.utils.escapeHtml
-    preAttrs = ' data-pre-wrap="' + escapeHtml(preWrapValue) + '"'
-    if (wrapEnabled && opt.setPreWrapStyle !== false) {
-      preAttrs += ' style="' + escapeHtml(preWrapStyle) + '"'
+
+  const isSamp = opt._sampReg.test(lang)
+  let commentLines
+  let needComment = false
+  if (commentLineValue) {
+    const rawLines = token.content.split(/\r?\n/)
+    commentLines = new Array(rawLines.length)
+    for (let i = 0; i < rawLines.length; i++) {
+      const isComment = rawLines[i].trimStart().startsWith(commentLineValue)
+      commentLines[i] = isComment
+      if (isComment) needComment = true
     }
   }
 
@@ -278,17 +399,59 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
     content = md.utils.escapeHtml(token.content)
   }
 
+  let preAttrsFromHighlight
+  let hasHighlightPre = false
+  const hasPreTag = (content.indexOf('<pre') !== -1 || content.indexOf('<PRE') !== -1)
+  if (hasPreTag) {
+    const preMatch = content.match(preCodeWrapperReg)
+    if (preMatch) {
+      hasHighlightPre = true
+      preAttrsFromHighlight = parseHtmlAttrs(preMatch[1])
+      const codeAttrsFromHighlight = parseHtmlAttrs(preMatch[2])
+      content = preMatch[3]
+      if (codeAttrsFromHighlight.length) {
+        if (!token.attrs) token.attrs = []
+        mergeAttrSets(token.attrs, codeAttrsFromHighlight)
+      }
+    }
+  }
+  if (opt.useHighlightPre && hasPreTag && !hasHighlightPre) {
+    return content.endsWith('\n') ? content : content + '\n'
+  }
+  orderTokenAttrs(token, opt)
+
+  let preAttrs = preAttrsFromHighlight ? preAttrsFromHighlight.slice() : []
+  if (preWrapValue !== undefined) {
+    const idx = preAttrs.findIndex(attr => attr[0] === 'data-pre-wrap')
+    if (idx === -1) {
+      preAttrs.push(['data-pre-wrap', preWrapValue])
+    } else {
+      preAttrs[idx][1] = preWrapValue
+    }
+  }
+  if (wrapEnabled && opt.setPreWrapStyle !== false) {
+    const idx = preAttrs.findIndex(attr => attr[0] === 'style')
+    if (idx === -1) {
+      preAttrs.push(['style', preWrapStyle])
+    } else {
+      preAttrs[idx][1] = appendStyleValue(preAttrs[idx][1], preWrapStyle)
+    }
+  }
+  if (preAttrs.length) orderTokenAttrs({ attrs: preAttrs }, opt)
+  const preAttrsText = preAttrs.length ? slf.renderAttrs({ attrs: preAttrs }) : ''
+
   const needLineNumber = opt.setLineNumber && startNumber >= 0
   const needEmphasis = opt.setEmphasizeLines && emphasizeLines.length > 0
-  const needEndSpan = opt.setLineEndSpan > 0
-  if (needLineNumber || needEmphasis || needEndSpan) {
+  const needEndSpan = opt.lineEndSpanThreshold > 0
+  const useHighlightPre = opt.useHighlightPre && hasHighlightPre
+  if (!useHighlightPre && (needLineNumber || needEmphasis || needEndSpan || needComment)) {
     const nlIndex = content.indexOf('\n')
     const br = nlIndex > 0 && content[nlIndex - 1] === '\r' ? '\r\n' : '\n'
-    content = splitFenceBlockToLines(content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, opt.setLineEndSpan, opt.lineEndSpanClass, br)
+    content = splitFenceBlockToLines(content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, opt.lineEndSpanThreshold, opt.lineEndSpanClass, br, commentLines, commentLineClass)
   }
 
-  const tag = opt._sampReg.test(lang) ? 'samp' : 'code'
-  return `<pre${preAttrs}><${tag}${slf.renderAttrs(token)}>${content}</${tag}></pre>\n`
+  const tag = isSamp ? 'samp' : 'code'
+  return `<pre${preAttrsText}><${tag}${slf.renderAttrs(token)}>${content}</${tag}></pre>\n`
 }
 
 const mditRendererFence = (md, option) => {
@@ -297,13 +460,19 @@ const mditRendererFence = (md, option) => {
     setHighlight: true,
     setLineNumber: true,
     setEmphasizeLines: true,
-    setLineEndSpan: 0,
+    lineEndSpanThreshold: 0,
     lineEndSpanClass: 'pre-lineend-spacer',
     setPreWrapStyle: true,
+    useHighlightPre: false,
     sampLang: 'shell,console',
     langPrefix: md.options.langPrefix || 'language-',
   }
-  if (option) Object.assign(opt, option)
+  if (option) {
+    Object.assign(opt, option)
+    if (option.lineEndSpanThreshold == null && option.setLineEndSpan != null) {
+      opt.lineEndSpanThreshold = option.setLineEndSpan
+    }
+  }
 
   opt._sampReg = new RegExp('^(?:samp|' + opt.sampLang.split(',').join('|') + ')$')
   opt._langReg = new RegExp(opt.langPrefix + '([A-Za-z0-9-]+)')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-renderer-fence",
-  "version": "0.3.0",
+  "version": "0.4.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",
   "files": [
@@ -16,9 +16,10 @@
   "repository": "https://github.com/peaceroad/p7d-markdown-it-renderer-fence",
   "license": "MIT",
   "devDependencies": {
-    "@peaceroad/markdown-it-figure-with-p-caption": "^0.14.2",
+    "@peaceroad/markdown-it-figure-with-p-caption": "^0.15.2",
+    "highlight.js": "^11.11.1",
     "markdown-it": "^14.1.0",
     "markdown-it-attrs": "^4.3.1",
-    "highlight.js": "^11.11.1"
+    "shiki": "^3.21.0"
   }
 }