@peaceroad/markdown-it-renderer-fence 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 k_taka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# p7d-markdown-it-renderer-fence
+
+In code blocks, the `<samp>` tag is used with the language keywords `samp`, `shell`, and `console`.
+
+To add specific styles to code blocks and display line numbers in code blocks, enclose each line in a span element and set CSS.
+
+## Use
+
+It is assumed that you will use  highlight.js and markdown-it-attrs together. It will probably work without them though.
+
+```js
+import mdit from 'markdown-it'
+import mditAttrs from 'markdown-it-attrs'
+import highlightjs from 'highlihgtjs'
+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 (__) {}
+             }
+             return ''
+           }).use(mditAttrs).use(mditRendererFence)
+
+
+const htmlCont = md.render('...')
+```
+
+It is also intended to be used in conjunction with @peaceroad/markdown-it-figure-with-p-caption.
+
+## Code block to samp block
+
+~~~
+[Markdown]
+```samp
+$ pwd
+/home/User
+```
+[HTML]
+<pre><samp>$ pwd
+/home/User
+</samp></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>
+~~~
+
+
+## Add span elements to display line number, and style attribute.
+
+Add `start` or `data-pre-start` attribute by adding attributes used markdown-it-attrs.
+
+~~~md
+```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>
+~~~
+
+CSS example: <https://codepen.io/peaceroad/pen/qBGpYGK>

package/index.js

@@ -0,0 +1,119 @@
+const fenceStartTag = (token, tagName, opt) => {
+  let idAttr = [], classAttr = [], dataAttrs = [], styleAttr = [], otherAttrs = []
+  let hasClass = false
+  if (token.attrs) {
+    //console.log('start: ' +token.attrs)
+    for (let attr of token.attrs) {
+      if (attr[0] === 'id') {
+        idAttr.push(attr)
+      } else if (attr[0] === 'class') {
+        hasClass = true
+        classAttr.push([attr[0], opt.langPrefix + token.info + ' ' + attr[1]])
+      } else if (attr[0].startsWith('data-')) {
+        dataAttrs.push(attr)
+      } else if (attr[0] === 'style') {
+        styleAttr.push(attr)
+      } else {
+        otherAttrs.push(attr)
+      }
+    }
+  }
+  if (!hasClass) classAttr.push(['class', opt.langPrefix + token.info])
+  let orderedAttrs = [...idAttr, ...classAttr, ...dataAttrs, ...styleAttr, ...otherAttrs]
+  //console.log(orderedAttrs)
+  let tag = '<' + tagName
+  for (let attr of orderedAttrs) {
+    tag += ' ' + attr[0] + '="' + attr[1] + '"'
+  }
+  return tag + '>'
+};
+
+const splitFenceBlockToLines = (token, content) => {
+  const br = content.match(/\r?\n/)
+  const lines = content.split(/r?\n/)
+  let hasCodeLineStart = false
+  let styleIndex = -1
+  let dataIndex = -1
+  let setNumber = -1
+  if (token.attrs) {
+    token.attrs.forEach((attr, i) => {
+      if (attr[i][0] === 'style') styleIndex = i
+      hasCodeLineStart = (/^(?:(?:data-)?pre-)?start$/.test(attr[0]))
+      if (hasCodeLineStart) dataIndex = i
+    })
+  }
+  if (!hasCodeLineStart && setNumber === -1) return content
+  token.attrs[dataIndex][0] = 'data-pre-start'
+  setNumber = token.attrs[dataIndex][1]
+
+  if (styleIndex === -1) {
+    token.attrs.push(['style', 'counter-set:pre-line-number ' + setNumber + ';'])
+  } else {
+    token.attrs[styleIndex][1] = token.attrs[styleIndex][1].replace(/;?$/, '; counter-set:pre-line-number ' + setNumber + ';')
+  }
+  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]
+      }
+    }
+    if (n < lines.length - 1) {
+      lines[n] = '<span class="pre-line">' + line + '</span>'
+    }
+  })
+  return lines.join(br)
+}
+
+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 token = tokens[idx]
+  //console.log(token)
+  let content = token.content
+  if (md.options.highlight) {
+    if (token.info !== 'samp' && opt.setHighlight) {
+      content = md.options.highlight(token.content, token.info)
+    } else {
+      content = md.utils.escapeHtml(token.content)
+    }
+  } else {
+    content = md.utils.escapeHtml(token.content)
+  }
+  if (opt.setLineNumber) {
+    content = splitFenceBlockToLines(token, content)
+  }
+
+  let fenceHtml = '<pre>'
+  if (token.info === 'samp') {
+    fenceHtml += '<samp>'
+  } else if (token.info === 'shell' || token.info === 'console') {
+    fenceHtml += fenceStartTag(token, 'samp', opt);
+  } else {
+    fenceHtml += fenceStartTag(token, 'code', opt);
+  }
+  fenceHtml += content
+  if (token.info === 'samp') {
+    fenceHtml += '</samp>'
+  } else if (token.info === 'shell' || token.info === 'console') {
+    fenceHtml += '</samp>'
+  } else {
+    fenceHtml += '</code>'
+  }
+  return fenceHtml + '</pre>\n'
+}
+
+const mditRendererFence = (md, options) => {
+  md.renderer.rules['fence'] = (tokens, idx, env, slf) => {
+    return getFenceHtml(tokens, idx, env, slf, md, options)
+  }
+}
+
+export default mditRendererFence

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@peaceroad/markdown-it-renderer-fence",
+  "version": "0.1.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",
+  "scripts": {
+    "test": "node test/test.js"
+  },
+  "author": "peaceroad <peaceroad@gmail.com>",
+  "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",
+    "markdown-it": "^14.1.0",
+    "markdown-it-attrs": "^4.1.6"
+  }
+}

package/test/examples-highlightjs.txt

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

package/test/examples.txt

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

package/test/test.js

@@ -0,0 +1,118 @@
+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 attrs from 'markdown-it-attrs'
+import highlightjs from 'highlight.js'
+
+
+let opt = {}
+
+const md = mdit({ html: true }).use(mditRendererFence).use(attrs)
+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 ''
+  }
+}).use(mditRendererFence, opt).use(attrs)
+
+
+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',
+}
+
+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 != 3
+    ) {
+      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)
+
+if (pass) console.log('Passed all test.')