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

package/README.md

@@ -71,6 +71,7 @@ $ pwd
 ## Add span elements to display line number.
 
 Add `start` or `data-pre-start` attribute by adding attributes used markdown-it-attrs.
+Line numbering is enabled only when `start` is a non-negative integer (`0`, `1`, `2`, ...).
 
 ~~~md
 ```js {start="1"}
@@ -89,9 +90,11 @@ md.render('Nyaan')
 
 CSS example: <https://codepen.io/peaceroad/pen/qBGpYGK>
 
+If `start` is empty or not a non-negative integer (for example `start=""`, `start="abc"`, `start="1.5"`), the attribute is kept as `data-pre-start` but line-number wrapping/counter style is not enabled.
+
 ## 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.
+Add `em-lines` or `emphasize-lines` attribute by adding attributes used markdown-it-attrs.
 Open-ended ranges are supported: `-5` (1..5), `3-` (3..last), `-` (all).
 
 ~~~md
@@ -151,6 +154,8 @@ echo 1
 ~~~
 
 Note: this feature relies on line splitting and is disabled when `useHighlightPre` is true and `<pre><code>` is provided by the highlighter.
+If a highlighter changes logical line count (for example by injecting extra lines), comment-line marking is skipped to avoid wrong line mapping.
+CRLF/LF mixed newlines are supported for logical line-count checks.
 
 
 ## Options
@@ -165,8 +170,8 @@ The following options can be specified when initializing the plugin:
 - 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.
+- 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). In this mode `<samp>` conversion is not possible, so avoid `useHighlightPre` when you need samp output.

package/index.js

@@ -12,6 +12,8 @@ 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 nonNegativeIntReg = /^\d+$/
+const lineBreakReg = /\r\n|\n|\r/
 
 const appendStyleValue = (style, addition) => {
   if (!addition) return style
@@ -69,6 +71,21 @@ const mergeAttrSets = (target, source) => {
   }
 }
 
+const parseStartNumber = (val) => {
+  if (val == null) return null
+  const text = String(val).trim()
+  if (!nonNegativeIntReg.test(text)) return null
+  const n = Number(text)
+  if (!Number.isSafeInteger(n)) return null
+  return n
+}
+
+const getLogicalLineCount = (text) => {
+  const lines = text.split(lineBreakReg)
+  if (lines.length === 0) return 0
+  return lines[lines.length - 1] === '' ? lines.length - 1 : lines.length
+}
+
 const getEmphasizeLines = (attrVal) => {
   const lines = []
   for (const range of attrVal.split(',')) {
@@ -97,7 +114,7 @@ const getEmphasizeLines = (attrVal) => {
 }
 
 const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, threshold, lineEndSpanClass, br, commentLines, commentClass) => {
-  const lines = content.split(br)
+  const lines = content.split(lineBreakReg)
   const len = lines.length
   const endSpanTag = needEndSpan ? `<span class="${lineEndSpanClass}"></span>` : ''
   const needComment = !!(commentLines && commentClass)
@@ -233,16 +250,14 @@ const orderTokenAttrs = (token, opt) => {
 const getFenceHtml = (tokens, idx, md, opt, slf) => {
   const token = tokens[idx]
   let content = token.content
-  const info = token.info.trim()
-  const match = info.match(infoReg)
+  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
+    const langClass = opt.langPrefix + lang
     const existingClass = token.attrGet('class')
     token.attrSet('class', existingClass ? langClass + ' ' + existingClass : langClass)
   }
@@ -286,14 +301,14 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
           newAttrs.push(attr)
           break
         case 'data-pre-start':
-          startNumber = +val
+          startNumber = parseStartNumber(val) ?? -1
           startValue = val
           dataPreStartIndex = newAttrs.length
           newAttrs.push(attr)
           break
         case 'start':
         case 'pre-start':
-          startNumber = +val
+          startNumber = parseStartNumber(val) ?? -1
           startValue = val
           if (!sawStartAttr) {
             appendOrder.push('start')
@@ -311,7 +326,7 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
           break
         case 'em-lines':
         case 'emphasize-lines':
-          emphasizeLines = getEmphasizeLines(val)
+          if (opt.setEmphasizeLines) emphasizeLines = getEmphasizeLines(val)
           emphasisValue = val
           if (!sawEmphasisAttr) {
             appendOrder.push('emphasis')
@@ -379,15 +394,7 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
   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
-    }
-  }
+  let sourceLogicalLineCount = -1
 
   if (opt.setHighlight && md.options.highlight) {
     if (lang && lang !== 'samp' ) {
@@ -444,9 +451,26 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
   const needEmphasis = opt.setEmphasizeLines && emphasizeLines.length > 0
   const needEndSpan = opt.lineEndSpanThreshold > 0
   const useHighlightPre = opt.useHighlightPre && hasHighlightPre
+  if (!useHighlightPre && commentLineValue) {
+    const rawLines = token.content.split(lineBreakReg)
+    sourceLogicalLineCount = getLogicalLineCount(token.content)
+    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
+    }
+  }
   if (!useHighlightPre && (needLineNumber || needEmphasis || needEndSpan || needComment)) {
     const nlIndex = content.indexOf('\n')
     const br = nlIndex > 0 && content[nlIndex - 1] === '\r' ? '\r\n' : '\n'
+    if (needComment && sourceLogicalLineCount >= 0) {
+      const highlightedLogicalLineCount = getLogicalLineCount(content)
+      if (highlightedLogicalLineCount !== sourceLogicalLineCount) {
+        needComment = false
+        commentLines = undefined
+      }
+    }
     content = splitFenceBlockToLines(content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, opt.lineEndSpanThreshold, opt.lineEndSpanClass, br, commentLines, commentLineClass)
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-renderer-fence",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "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": [
@@ -10,7 +10,9 @@
   ],
   "type": "module",
   "scripts": {
-    "test": "node test/test.js"
+    "test": "node test/test.js",
+    "test:performance": "node test/performance/benchmark.js",
+    "test:performance:highlighter": "node test/performance/highlighter-benchmark.js"
   },
   "author": "peaceroad <peaceroad@gmail.com>",
   "repository": "https://github.com/peaceroad/p7d-markdown-it-renderer-fence",