@sullux/markdown-html 2.0.0 → 2.0.1

package/lib/markdown-to-html/assets.js

@@ -0,0 +1,18 @@
+const KATEX_HEAD = [
+  '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" />',
+  '<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>',
+  '<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body, { delimiters: [{left: \'$$\', right: \'$$\', display: true}, {left: \'$\', right: \'$\', display: false}], throwOnError: false });"></script>',
+]
+
+const MERMAID_HEAD = [
+  `<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  const getTheme = () => document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default';
+  mermaid.initialize({ startOnLoad: true, theme: getTheme() });
+  window.addEventListener('@sullux/markdown:theme', (e) => {
+    mermaid.initialize({ theme: e.detail?.mode === 'dark' ? 'dark' : 'default' });
+  });
+</script>`,
+]
+
+module.exports = { KATEX_HEAD, MERMAID_HEAD }

package/lib/markdown-to-html/index.js

@@ -1,11 +1,22 @@
 const { parse } = require('@sullux/markdown-compiler')
-const { renderBlock } = require('./render-block')
+const { renderBlocks } = require('./render-block')
 
 const markdownToHtml = (markdown, options = {}) => {
-  if (!markdown) return ''
+  if (!markdown) {
+    return { html: '', head: [], toString() { return '' } }
+  }
   const ast = typeof markdown === 'string' ? parse(markdown) : markdown
   const ctx = { ...options, usedSlugs: new Set() }
-  return ast.blocks.map((block) => renderBlock(block, ctx)).join('')
+  const result = renderBlocks(ast.blocks, ctx)
+  const uniqueHead = [...new Set(result.head)]
+
+  return {
+    html: result.html,
+    head: uniqueHead,
+    toString() {
+      return this.html
+    },
+  }
 }
 
 module.exports = { markdownToHtml }

package/lib/markdown-to-html/render-block.js

@@ -3,6 +3,9 @@ const { slugify } = require('./slugify')
 const { renderInline } = require('./render-inline')
 const { highlightCode } = require('./highlight')
 const { renderList } = require('./render-list')
+const { KATEX_HEAD, MERMAID_HEAD } = require('./assets')
+
+const hasInlineMath = (children) => Boolean(children?.some((c) => c.type === 'inlineMath'))
 
 const renderBlock = (node, options = {}) => {
   if (!node) return ''
@@ -12,76 +15,77 @@ const renderBlock = (node, options = {}) => {
       const text = renderInline(node.children, options)
       const rawText = node.children ? node.children.map((c) => (c.type === 'text' ? c.value : '')).join('') : ''
       const slug = (options.slugify || slugify)(rawText, options.usedSlugs)
-      return `<h${node.level} id="${slug}">${text}</h${node.level}>\n`
+      const html = `<h${node.level} id="${slug}">${text}</h${node.level}>\n`
+      return hasInlineMath(node.children) ? { html, head: KATEX_HEAD } : html
     }
     case 'paragraph': {
-      return `<p>${renderInline(node.children, options)}</p>\n`
+      const html = `<p>${renderInline(node.children, options)}</p>\n`
+      return hasInlineMath(node.children) ? { html, head: KATEX_HEAD } : html
     }
     case 'codeBlock': {
       const lang = node.language || ''
-      if (options.codeRenderers && lang && options.codeRenderers[lang]) {
-        return options.codeRenderers[lang](node, options)
+      if (options.codeRenderers?.[lang]) return options.codeRenderers[lang](node, options)
+      if (lang === 'math') {
+        if (options.mathBlockRenderer) return options.mathBlockRenderer(node, options)
+        return { html: `<div class="math-display" data-latex="${escapeHtml(node.value)}">$$\n${escapeHtml(node.value)}\n$$</div>\n`, head: KATEX_HEAD }
+      }
+      if (lang === 'mermaid') {
+        return { html: `<pre class="mermaid">${escapeHtml(node.value)}</pre>\n`, head: MERMAID_HEAD }
       }
       const highlighted = highlightCode(node.value, lang, options.tokenizers)
       const langClass = lang ? ` class="language-${escapeHtml(lang)}"` : ''
       return `<pre><code${langClass}>${highlighted}</code></pre>\n`
     }
     case 'blockquote': {
-      const innerHtml = node.children ? node.children.map((child) => renderBlock(child, options)).join('') : ''
-      return `<blockquote>\n${innerHtml}</blockquote>\n`
+      const { html, head } = renderBlocks(node.children, options)
+      return { html: `<blockquote>\n${html}</blockquote>\n`, head }
     }
     case 'callout': {
       const style = node.style || 'note'
       const title = style.charAt(0).toUpperCase() + style.slice(1)
-      const innerHtml = node.children ? node.children.map((child) => renderBlock(child, options)).join('') : ''
-      return `<div class="callout callout-${style}">\n<div class="callout-title">${title}</div>\n${innerHtml}</div>\n`
+      const { html, head } = renderBlocks(node.children, options)
+      return { html: `<div class="callout callout-${style}">\n<div class="callout-title">${title}</div>\n${html}</div>\n`, head }
     }
     case 'bulletList':
     case 'orderedList': {
-      return renderList(node, options, renderBlock)
+      return renderList(node, options, renderBlock, hasInlineMath, KATEX_HEAD)
     }
     case 'table': {
       const alignments = node.alignments || []
       const rows = node.rows || []
       if (rows.length === 0) return ''
-
-      const headerRow = rows[0]
-      const bodyRows = rows.slice(1)
-
       const renderRow = (row, isHeader) => {
-        const cellTag = isHeader ? 'th' : 'td'
-        const cells = row
-          .map((cell, colIdx) => {
-            const align = alignments[colIdx] || 'default'
-            const alignAttr = align !== 'default' ? ` align="${align}"` : ''
-            return `<${cellTag}${alignAttr}>${renderInline(cell, options)}</${cellTag}>`
-          })
-          .join('')
+        const tag = isHeader ? 'th' : 'td'
+        const cells = row.map((cell, i) => {
+          const align = alignments[i] || 'default'
+          return `<${tag}${align !== 'default' ? ` align="${align}"` : ''}>${renderInline(cell, options)}</${tag}>`
+        }).join('')
         return `<tr>${cells}</tr>\n`
       }
-
-      let tableHtml = '<table>\n<thead>\n' + renderRow(headerRow, true) + '</thead>\n'
-      if (bodyRows.length > 0) {
-        tableHtml += '<tbody>\n' + bodyRows.map((r) => renderRow(r, false)).join('') + '</tbody>\n'
-      }
-      tableHtml += '</table>\n'
-      return tableHtml
-    }
-    case 'hr': {
-      return '<hr />\n'
-    }
-    case 'html': {
-      return `${node.value}\n`
+      const tableBody = rows.slice(1).length ? `<tbody>\n${rows.slice(1).map((r) => renderRow(r, false)).join('')}</tbody>\n` : ''
+      const tableHtml = `<table>\n<thead>\n${renderRow(rows[0], true)}</thead>\n${tableBody}</table>\n`
+      const hasMath = rows.some((row) => row.some((cell) => hasInlineMath(cell)))
+      return hasMath ? { html: tableHtml, head: KATEX_HEAD } : tableHtml
     }
+    case 'hr': return '<hr />\n'
+    case 'html': return `${node.value}\n`
     case 'mathBlock': {
       const mathRenderer = options.mathBlockRenderer || options.codeRenderers?.math
       if (mathRenderer) return mathRenderer(node, options)
-      return `<div class="math-display" data-latex="${escapeHtml(node.value)}">$$\n${escapeHtml(node.value)}\n$$</div>\n`
-    }
-    default: {
-      return ''
+      return { html: `<div class="math-display" data-latex="${escapeHtml(node.value)}">$$\n${escapeHtml(node.value)}\n$$</div>\n`, head: KATEX_HEAD }
     }
+    default: return ''
   }
 }
 
-module.exports = { renderBlock }
+const renderBlocks = (blocks, options) => (blocks || []).reduce(
+  (acc, block) => {
+    const res = renderBlock(block, options)
+    const html = typeof res === 'string' ? res : res?.html || ''
+    const head = typeof res === 'object' && Array.isArray(res?.head) ? res.head : []
+    return { html: acc.html + html, head: acc.head.concat(head) }
+  },
+  { html: '', head: [] }
+)
+
+module.exports = { renderBlock, renderBlocks }

package/lib/markdown-to-html/render-list.js

@@ -1,39 +1,46 @@
 const { renderInline } = require('./render-inline')
 
-const renderListItem = (item, options, tight, renderBlock) => {
-  const checkHtml = item.checked !== undefined
-    ? `<input type="checkbox"${item.checked ? ' checked' : ''} disabled /> `
-    : ''
+const renderListItem = (item, options, tight, renderBlock, hasInlineMath, KATEX_HEAD) => {
+  const checkHtml = item.checked !== undefined ? `<input type="checkbox"${item.checked ? ' checked' : ''} disabled /> ` : ''
   const taskClass = item.checked !== undefined ? ' class="task-list-item"' : ''
 
   if (Array.isArray(item)) {
-    return `<li${taskClass}>${checkHtml}${renderInline(item, options)}</li>\n`
+    const itemMath = hasInlineMath(item)
+    return {
+      html: `<li${taskClass}>${checkHtml}${renderInline(item, options)}</li>\n`,
+      head: itemMath ? KATEX_HEAD : [],
+    }
   }
 
-  const children = item.children || []
-  const childrenHtml = children
-    .map((child, idx) => {
-      if (child.type === 'paragraph' && tight && idx === 0) {
-        return renderInline(child.children, options)
-      }
-      return renderBlock(child, options)
-    })
-    .join('')
-
-  return `<li${taskClass}>${checkHtml}${childrenHtml}</li>\n`
+  let head = []
+  const childrenHtml = (item.children || []).map((child, idx) => {
+    if (child.type === 'paragraph' && tight && idx === 0) {
+      if (hasInlineMath(child.children)) head = head.concat(KATEX_HEAD)
+      return renderInline(child.children, options)
+    }
+    const res = renderBlock(child, options)
+    if (typeof res === 'object' && Array.isArray(res.head)) head = head.concat(res.head)
+    return typeof res === 'string' ? res : res?.html || ''
+  }).join('')
+
+  return { html: `<li${taskClass}>${checkHtml}${childrenHtml}</li>\n`, head }
 }
 
-const renderList = (node, options, renderBlock) => {
+const renderList = (node, options, renderBlock, hasInlineMath, KATEX_HEAD) => {
   const tight = node.tight !== false
   const isOrdered = node.type === 'orderedList'
   const listItems = node.children || node.items || []
-  const itemsHtml = listItems.map((item) => renderListItem(item, options, tight, renderBlock)).join('')
+  let head = []
 
-  if (isOrdered) {
-    const startAttr = node.start && node.start !== 1 ? ` start="${node.start}"` : ''
-    return `<ol${startAttr}>\n${itemsHtml}</ol>\n`
-  }
-  return `<ul>\n${itemsHtml}</ul>\n`
+  const itemsHtml = listItems.map((item) => {
+    const res = renderListItem(item, options, tight, renderBlock, hasInlineMath, KATEX_HEAD)
+    if (res.head) head = head.concat(res.head)
+    return res.html
+  }).join('')
+
+  const startAttr = isOrdered && node.start && node.start !== 1 ? ` start="${node.start}"` : ''
+  const tag = isOrdered ? 'ol' : 'ul'
+  return { html: `<${tag}${startAttr}>\n${itemsHtml}</${tag}>\n`, head }
 }
 
 module.exports = { renderList }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sullux/markdown-html",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A high-performance, bidirectional Markdown <-> HTML compiler supporting GFM, GitBook hints, syntax highlighting, and custom image dimensions.",
   "main": "./index.js",
   "author": "Charles Sullivan <charles@sullux.com>",