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

package/README.md

@@ -17,15 +17,15 @@ import mditRendererFence from '@peaceroad/markdown-it-renderer-fence'
 const md = mdit({
              langPrefix: 'language-',
              highlight: (str, lang) => {
-             if (lang && highlightjs.getLanguage(lang)) {
-               try {
-                  return highlightjs.highlight(str, { language: lang }).value
-               } catch (__) {}
+               if (lang && highlightjs.getLanguage(lang)) {
+                 try {
+                    return highlightjs.highlight(str, { language: lang }).value
+                 } catch (__) {}
+               }
+             return md.utils.escapeHtml(str)
              }
-             return str
            }).use(mditAttrs).use(mditRendererFence)
 
-
 const htmlCont = md.render('...')
 ```
 
@@ -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"}
@@ -115,6 +116,23 @@ Add `em-lines` or `emphasize-lines` attribute by by adding attributes used markd
 </code></pre>
 ~~~
 
+## Enable pre-wrap for code blocks
+
+Add `wrap` or `pre-wrap` attribute (optionally `="true"`) by adding attributes used markdown-it-attrs.
+
+~~~md
+```js {wrap}
+const longLine = 'This line is long but wraps.'
+```
+~~~
+
+~~~html
+<pre data-pre-wrap="true" style="white-space: pre-wrap; overflow-wrap: anywhere;"><code class="language-js">const longLine = 'This line is long but wraps.'
+</code></pre>
+~~~
+
+When `setPreWrapStyle` is set to false, only `data-pre-wrap="true"` is added and the inline style is omitted.
+
 
 ## Options
 
@@ -126,5 +144,6 @@ The following options can be specified when initializing the plugin:
 - 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.
+- setPreWrapStyle: default true — include inline pre-wrap styles on `<pre>` when wrap is enabled.
 - 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,7 +1,4 @@
 const infoReg = /^([^{\s]*)(?:\s*\{(.*)\})?$/
-const startReg = /^(?:(?:data-)?pre-)?start$/
-const startFilterReg = /^(?:pre-)?start$/
-const emphasisReg = /^em(?:phasize)?-lines$/
 
 const attrReg = /^(?:([.#])(.+)|(.+?)(?:=(["'])?(.*?)\1)?)$/
 const interAttrsSpaceReg = / +/
@@ -10,35 +7,136 @@ const preLineTag = '<span class="pre-line">'
 const emphOpenTag = '<span class="pre-lines-emphasis">'
 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
+  let next = addition.trim()
+  if (!next) return style
+  if (!next.endsWith(';')) next += ';'
+  if (!style) return next
+  const base = style.trimEnd()
+  const separator = base.endsWith(';') ? ' ' : '; '
+  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 lines = content.split(br)
   const len = lines.length
-  const endSpanTag = `<span class="${lineEndSpanClass}"></span>`
+  const endSpanTag = needEndSpan ? `<span class="${lineEndSpanClass}"></span>` : ''
+  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]
 
     if (needEndSpan) {
-      let lineLen = 0
-      for (let i = 0, L = line.length; i < L; i++) {
-        lineLen += line.charCodeAt(i) > 255 ? 2 : 1
+      let lineLen = line.length
+      if (lineLen < threshold) {
+        lineLen = 0
+        for (let i = 0, L = line.length; i < L; i++) {
+          lineLen += line.charCodeAt(i) > 255 ? 2 : 1
+          if (lineLen >= threshold) break
+        }
       }
       if (lineLen >= threshold) {
         if (line.slice(-closeTagLen) === closeTag) {
@@ -50,26 +148,29 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
     }
 
     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)
+      if (line.indexOf('<') !== -1) {
+        const tagStack = []
+        tagReg.lastIndex = 0
+        let match
+        while ((match = tagReg.exec(line)) !== null) {
+          const [fullMatch, tagName] = match
+          const tagNameLower = tagName.toLowerCase()
+          if (fullMatch.startsWith('</')) {
+            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--) {
+          const tagName = tagStack[i]
+          line += `</${tagName}>`
+          lines[n+1] = `<${tagName}>` + (lines[n+1]||'')
         }
-      }
-      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 (doEmphasis) {
       if (emStart === n + 1) line = emphOpenTag + line
       if (emEnd === n) {
         line = closeTag + line
@@ -123,7 +224,8 @@ const orderTokenAttrs = (token, opt) => {
 const getFenceHtml = (tokens, idx, md, opt, slf) => {
   const token = tokens[idx]
   let content = token.content
-  const match = token.info.trim().match(infoReg)
+  const info = token.info.trim()
+  const match = info.match(infoReg)
   let lang = match ? match[1] : ''
 
   if (match && match[2]) {
@@ -132,36 +234,116 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
   let langClass = ''
   if (lang  && lang !== 'samp') {
     langClass = opt.langPrefix + lang
-    token.attrSet('class', langClass + (token.attrGet('class') ? ' ' + token.attrGet('class') : ''))
+    const existingClass = token.attrGet('class')
+    token.attrSet('class', existingClass ? langClass + ' ' + existingClass : langClass)
   }
 
   let startNumber = -1
   let emphasizeLines = []
+  let wrapEnabled = false
+  let preWrapValue
 
   if (token.attrs) {
-    for (let attr of token.attrs) {
-      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]))
+    const newAttrs = []
+    let dataPreStartIndex = -1
+    let dataPreEmphasisIndex = -1
+    let styleIndex = -1
+    let startValue
+    let emphasisValue
+    let styleValue
+    let sawStartAttr = false
+    let sawEmphasisAttr = false
+    const appendOrder = []
+
+    for (const attr of token.attrs) {
+      const name = attr[0]
+      const val = attr[1]
+
+      switch (name) {
+        case 'class': {
+          if (val.indexOf(opt.langPrefix) !== -1) {
+            const hasClassLang = opt._langReg.exec(val)
+            if (hasClassLang) lang = hasClassLang[1]
+          }
+          newAttrs.push(attr)
+          break
         }
+        case 'style':
+          styleIndex = newAttrs.length
+          styleValue = val
+          newAttrs.push(attr)
+          break
+        case 'data-pre-start':
+          startNumber = +val
+          startValue = val
+          dataPreStartIndex = newAttrs.length
+          newAttrs.push(attr)
+          break
+        case 'start':
+        case 'pre-start':
+          startNumber = +val
+          startValue = val
+          if (!sawStartAttr) {
+            appendOrder.push('start')
+            sawStartAttr = true
+          }
+          break
+        case 'data-pre-emphasis':
+          dataPreEmphasisIndex = newAttrs.length
+          newAttrs.push(attr)
+          break
+        case 'em-lines':
+        case 'emphasize-lines':
+          emphasizeLines = getEmphasizeLines(val)
+          emphasisValue = val
+          if (!sawEmphasisAttr) {
+            appendOrder.push('emphasis')
+            sawEmphasisAttr = true
+          }
+          break
+        case 'data-pre-wrap':
+          preWrapValue = val
+          if (val === '' || val === 'true') wrapEnabled = true
+          break
+        case 'wrap':
+        case 'pre-wrap':
+          if (val === '' || val === 'true') {
+            wrapEnabled = true
+          }
+          break
+        default:
+          newAttrs.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 (startValue !== undefined && dataPreStartIndex >= 0) {
+      newAttrs[dataPreStartIndex][1] = startValue
+    }
+    if (emphasisValue !== undefined && dataPreEmphasisIndex >= 0) {
+      newAttrs[dataPreEmphasisIndex][1] = emphasisValue
+    }
+    for (const kind of appendOrder) {
+      if (kind === 'start') {
+        if (dataPreStartIndex === -1 && startValue !== undefined) {
+          newAttrs.push(['data-pre-start', startValue])
+        }
+      } else if (kind === 'emphasis') {
+        if (dataPreEmphasisIndex === -1 && emphasisValue !== undefined) {
+          newAttrs.push(['data-pre-emphasis', emphasisValue])
+        }
       }
     }
+    if (startNumber !== -1) {
+      styleValue = appendStyleValue(styleValue, 'counter-set:pre-line-number ' + startNumber + ';')
+    }
+    if (styleIndex >= 0) {
+      if (styleValue !== undefined) newAttrs[styleIndex][1] = styleValue
+    } else if (styleValue) {
+      newAttrs.push(['style', styleValue])
+    }
+    if (wrapEnabled) preWrapValue = 'true'
+    token.attrs = newAttrs
   }
-  if (startNumber !== -1) {
-    token.attrJoin('style', 'counter-set:pre-line-number ' + startNumber + ';')
-  }
-  orderTokenAttrs(token, opt)
 
   if (opt.setHighlight && md.options.highlight) {
     if (lang && lang !== 'samp' ) {
@@ -173,17 +355,52 @@ const getFenceHtml = (tokens, idx, md, opt, slf) => {
     content = md.utils.escapeHtml(token.content)
   }
 
+  let preAttrsFromHighlight
+  if (content.indexOf('<pre') !== -1) {
+    const preMatch = content.match(preCodeWrapperReg)
+    if (preMatch) {
+      preAttrsFromHighlight = parseHtmlAttrs(preMatch[1])
+      const codeAttrsFromHighlight = parseHtmlAttrs(preMatch[2])
+      content = preMatch[3]
+      if (codeAttrsFromHighlight.length) {
+        if (!token.attrs) token.attrs = []
+        mergeAttrSets(token.attrs, codeAttrsFromHighlight)
+      }
+    }
+  }
+  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 brMatch = content.match(/\r?\n/)
-    const br = brMatch ? brMatch[0] : '\n'
+    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)
   }
 
   const tag = opt._sampReg.test(lang) ? 'samp' : 'code'
-  return `<pre><${tag}${slf.renderAttrs(token)}>${content}</${tag}></pre>\n`
+  return `<pre${preAttrsText}><${tag}${slf.renderAttrs(token)}>${content}</${tag}></pre>\n`
 }
 
 const mditRendererFence = (md, option) => {
@@ -194,6 +411,7 @@ const mditRendererFence = (md, option) => {
     setEmphasizeLines: true,
     setLineEndSpan: 0,
     lineEndSpanClass: 'pre-lineend-spacer',
+    setPreWrapStyle: true,
     sampLang: 'shell,console',
     langPrefix: md.options.langPrefix || 'language-',
   }
@@ -207,4 +425,4 @@ const mditRendererFence = (md, option) => {
   }
 }
 
-export default mditRendererFence
+export default mditRendererFence

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@peaceroad/markdown-it-renderer-fence",
-  "version": "0.2.0",
+  "version": "0.3.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": [
+    "index.js",
+    "LICENSE",
+    "README.md"
+  ],
   "type": "module",
   "scripts": {
     "test": "node test/test.js"
@@ -11,9 +16,10 @@
   "repository": "https://github.com/peaceroad/p7d-markdown-it-renderer-fence",
   "license": "MIT",
   "devDependencies": {
-    "@peaceroad/markdown-it-figure-with-p-caption": "^0.10.1",
+    "@peaceroad/markdown-it-figure-with-p-caption": "^0.15.1",
+    "highlight.js": "^11.11.1",
     "markdown-it": "^14.1.0",
-    "markdown-it-attrs": "^4.2.0",
-    "highlight.js": "^11.10.0"
+    "markdown-it-attrs": "^4.3.1",
+    "shiki": "^3.21.0"
   }
 }

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

@@ -1,55 +0,0 @@
-[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

@@ -1,93 +0,0 @@
-[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

@@ -1,175 +0,0 @@
-[Markdown]
-```js
-import mdit from 'markdonw-it'
-```
-[HTML]
-<pre><code class="language-js"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span>
-</code></pre>
-
-
-[Markdown]
-```html
-<p>I draw <span class="style">cats</span>.</p>
-```
-[HTML]
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I draw <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;style&quot;</span>&gt;</span>cats<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-</code></pre>
-
-
-[Markdown]
-```js
-import mdit from 'markdonw-it'
-const md = mdit()
-md.render('Nyaan')
-```
-[HTML]
-<pre><code class="language-js"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span>
-<span class="hljs-keyword">const</span> md = <span class="hljs-title function_">mdit</span>()
-md.<span class="hljs-title function_">render</span>(<span class="hljs-string">&#x27;Nyaan&#x27;</span>)
-</code></pre>
-
-
-[Markdown]
-```js {.style}
-import mdit from 'markdonw-it'
-const md = mdit()
-md.render('Nyaan')
-```
-[HTML]
-<pre><code class="language-js style"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span>
-<span class="hljs-keyword">const</span> md = <span class="hljs-title function_">mdit</span>()
-md.<span class="hljs-title function_">render</span>(<span class="hljs-string">&#x27;Nyaan&#x27;</span>)
-</code></pre>
-
-
-[Markdown]
-```html {start="2"}
-<p>I draw <span class="style">cats</span>.</p>
-```
-[HTML]
-<pre><code class="language-html" data-pre-start="2" style="counter-set:pre-line-number 2;"><span class="pre-line"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I draw <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;style&quot;</span>&gt;</span>cats<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
-</code></pre>
-
-
-[Markdown]
-```js {start="1"}
-import mdit from 'markdonw-it'
-```
-[HTML]
-<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>
-</code></pre>
-
-
-[Markdown]
-```js {.style start="1"}
-import mdit from 'markdonw-it'
-const md = mdit()
-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>
-<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>
-
-
-[Markdown]
-```shell
-$ pwd
-/home/User
-```
-[HTML]
-<pre><samp class="language-shell"><span class="hljs-meta prompt_">$ </span><span class="language-bash"><span class="hljs-built_in">pwd</span></span>
-/home/User
-</samp></pre>
-
-
-[Markdown]
-```console
-$ pwd
-/home/User
-```
-[HTML]
-<pre><samp class="language-console"><span class="hljs-meta prompt_">$ </span><span class="language-bash"><span class="hljs-built_in">pwd</span></span>
-/home/User
-</samp></pre>
-
-
-[Markdown]
-```samp
-$ pwd
-/home/User
-```
-[HTML]
-<pre><samp>$ pwd
-/home/User
-</samp></pre>
-
-[Markdown]
-``` {}
-console.log('A test.')
-```
-[HTML]
-<pre><code>console.log('A test.')
-</code></pre>
-
-[Markdown]
-```js 
-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]
-```js {}
-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]
-```js {} 
-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]
-~~~ {}
-console.log('A test.')
-~~~
-[HTML]
-<pre><code>console.log('A test.')
-</code></pre>
-
-
-[Markdown]
-~~~js {}
-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]
-```{.language-js}
-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

@@ -1,130 +0,0 @@
-[Markdown]
-```js
-import mdit from 'markdonw-it'
-mdit().render('A cat.')
-```
-[HTML]
-<pre><code class="language-js">import mdit from 'markdonw-it'
-mdit().render('A cat.')
-</code></pre>
-
-
-[Markdown]
-```samp
-$ pwd
-/home/User
-```
-[HTML]
-<pre><samp>$ pwd
-/home/User
-</samp></pre>
-
-
-[Markdown]
-```shell
-$ pwd
-/home/User
-```
-[HTML]
-<pre><samp class="language-shell">$ pwd
-/home/User
-</samp></pre>
-
-
-[Markdown]
-```console
-$ pwd
-/home/User
-```
-[HTML]
-<pre><samp class="language-console">$ pwd
-/home/User
-</samp></pre>
-
-
-[Markdown]
-``` 
-console.log('A test.')
-```
-[HTML]
-<pre><code>console.log('A test.')
-</code></pre>
-
-
-[Markdown]
-``` {}
-console.log('A test.')
-```
-[HTML]
-<pre><code>console.log('A test.')
-</code></pre>
-
-[Markdown]
-```js {}
-console.log('A test.')
-```
-[HTML]
-<pre><code class="language-js">console.log('A test.')
-</code></pre>
-
-
-[Markdown]
-```js {} 
-console.log('A test.')
-```
-[HTML]
-<pre><code class="language-js">console.log('A test.')
-</code></pre>
-
-[Markdown]
-```js {.style #id}
-console.log('A test.')
-```
-[HTML]
-<pre><code class="language-js style" id="id">console.log('A test.')
-</code></pre>
-
-[Markdown]
-```js {.style} 
-console.log('A test.')
-```
-[HTML]
-<pre><code class="language-js style">console.log('A test.')
-</code></pre>
-
-
-[Markdown]
-~~~ {}
-console.log('A test.')
-~~~
-[HTML]
-<pre><code>console.log('A test.')
-</code></pre>
-
-
-[Markdown]
-~~~js {}
-console.log('A test.')
-~~~
-[HTML]
-<pre><code class="language-js">console.log('A test.')
-</code></pre>
-
-
-[Markdown]
-```{.language-js}
-console.log('A test.')
-```
-[HTML]
-<pre><code class="language-js">console.log('A test.')
-</code></pre>
-
-
-[Markdown]
-``` js {start="3" aria-label="LABEL"} 
-console.log('A test.')
-```
-[HTML]
-<pre><code class="language-js" data-pre-start="3" style="counter-set:pre-line-number 3;" aria-label="LABEL"><span class="pre-line">console.log('A test.')</span>
-</code></pre>
-

package/test/test.js

@@ -1,123 +0,0 @@
-import assert from 'assert'
-import fs from 'fs'
-import path from 'path'
-import mdit from 'markdown-it'
-
-import mditFigureWithPCaption from '@peaceroad/markdown-it-figure-with-p-caption'
-import mditRendererFence from '../index.js'
-import mditAttrs from 'markdown-it-attrs'
-import highlightjs from 'highlight.js'
-
-
-let opt = {}
-
-const md = mdit({ html: true }).use(mditRendererFence).use(mditAttrs)
-const mdHighlightJs = mdit({
-  html: true,
-  langPrefix: 'language-',
-  typographer: false,
-  highlight: (str, lang) => {
-    if (lang && highlightjs.getLanguage(lang)) {
-      try {
-        return highlightjs.highlight(str, { language: lang }).value
-      } catch (__) {}
-    }
-    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')
-if (isWindows) {
-  __dirname = __dirname.replace(/^\/+/, '').replace(/\//g, '\\')
-}
-
-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) => {
-  let ms = [];
-  if(!fs.existsSync(pat)) {
-    console.log('No exist: ' + pat)
-    return ms
-  }
-  const exampleCont = fs.readFileSync(pat, 'utf-8').trim();
-
-  let ms0 = exampleCont.split(/\n*\[Markdown\]\n/);
-  let n = 1;
-  while(n < ms0.length) {
-    let mhs = ms0[n].split(/\n+\[HTML[^\]]*?\]\n/);
-    let i = 1;
-    while (i < 2) {
-      if (mhs[i] === undefined) {
-        mhs[i] = '';
-      } else {
-        mhs[i] = mhs[i].replace(/$/,'\n');
-      }
-      i++;
-    }
-    ms[n] = {
-      "markdown": mhs[0],
-      "html": mhs[1],
-    };
-    n++;
-  }
-  return ms
-}
-
-const runTest = (process, pat, pass, testId) => {
-  console.log('===========================================================')
-  console.log(pat)
-  let ms = getTestData(pat)
-  if (ms.length === 0) return
-  let n = 1;
-  let end = ms.length - 1
-  if(testId) {
-    if (testId[0]) n = testId[0]
-    if (testId[1]) {
-      if (ms.length >= testId[1]) {
-        end = testId[1]
-      }
-    }
-  }
-  //console.log(n, end)
-
-  while(n <= end) {
-    if (!ms[n]
-    //|| n != 14
-    ) {
-      n++
-      continue
-    }
-
-    const m = ms[n].markdown;
-    const h = process.render(m)
-    console.log('Test: ' + n + ' >>>');
-    try {
-      assert.strictEqual(h, ms[n].html);
-    } catch(e) {
-      pass = false
-      //console.log('Test: ' + n + ' >>>');
-      //console.log(opt);
-      console.log(ms[n].markdown);
-      console.log('incorrect:');
-      console.log('H: ' + h +'C: ' + ms[n].html);
-    }
-    n++;
-  }
-  return pass
-}
-
-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.')