Correctly handle newlines during katex rendering

zerodevx · Jan 23, 2025 · 960c23a · 960c23a
1 parent cc8eb31
commit 960c23a
Showing 1 changed file with 17 additions and 15 deletions.
diff --git a/src/lib/zero-md.js b/src/lib/zero-md.js
@@ -1,18 +1,19 @@
+// @ts-nocheck
 import ZeroMdBase from './zero-md-base.js'
 import katexExtension from './katex-extension.js'
 import { STYLES, LOADERS } from './presets.js'
 
-/** @type {*} */ let hljsHoisted
-/** @type {*} */ let mermaidHoisted
-/** @type {*} */ let katexHoisted
+let hljsHoisted
+let mermaidHoisted
+let katexHoisted
 let uid = 0
 
 /**
  * Extends ZeroMdBase with marked.js, syntax highlighting, math and mermaid features
  */
 export default class ZeroMd extends ZeroMdBase {
   async load(loaders = {}) {
-    /** @type {*} */ const {
+    const {
       marked,
       markedBaseUrl,
       markedHighlight,
@@ -33,20 +34,17 @@ export default class ZeroMd extends ZeroMdBase {
     ])
     this.marked = modules[0]
     this.setBaseUrl = modules[1]
-    const parseKatex = async (
-      /** @type {string} */ text,
-      /** @type {boolean|undefined} */ displayMode
-    ) => {
+    const parseKatex = async (text, displayMode) => {
       if (!katexHoisted) katexHoisted = await katex()
-      return `${katexHoisted.renderToString(text, { ...katexOptions, displayMode })}${displayMode ? '' : '\n'}`
+      return katexHoisted.renderToString(text, { displayMode, ...katexOptions })
     }
     this.marked.use(
       modules[2](),
       modules[3](),
       {
         ...modules[4]({
           async: true,
-          highlight: async (/** @type {string} */ code, /** @type {string} */ lang) => {
+          highlight: async (code, lang) => {
             if (lang === 'mermaid') {
               if (!mermaidHoisted) {
                 mermaidHoisted = await mermaid()
@@ -55,15 +53,15 @@ export default class ZeroMd extends ZeroMdBase {
               const { svg } = await mermaidHoisted.render(`mermaid-svg-${uid++}`, code)
               return svg
             }
-            if (lang === 'math') return await parseKatex(code, true)
+            if (lang === 'math') return `<pre class="math">${await parseKatex(code, true)}</pre>`
             if (!hljsHoisted) hljsHoisted = await hljs()
             return hljsHoisted.getLanguage(lang)
               ? hljsHoisted.highlight(code, { language: lang }).value
               : hljsHoisted.highlightAuto(code).value
           }
         }),
         renderer: {
-          code: (/** @type {*} */ { text, lang }) => {
+          code: ({ text, lang }) => {
             if (lang === 'mermaid') return `<div class="mermaid">${text}</div>`
             if (lang === 'math') return text
             return `<pre><code class="hljs${lang ? ` language-${lang}` : ''}">${text}\n</code></pre>`
@@ -72,9 +70,13 @@ export default class ZeroMd extends ZeroMdBase {
       },
       {
         ...katexExtension(katexOptions),
-        walkTokens: async (/** @type {*} */ token) => {
-          if (['inlineKatex', 'blockKatex'].includes(token.type))
-            token.text = await parseKatex(token.text, token.type === 'blockKatex')
+        walkTokens: async (token) => {
+          const types = ['inlineKatex', 'blockKatex']
+          if (types.includes(token.type)) {
+            token.text =
+              (await parseKatex(token.text, token.displayMode)) +
+              (token.type === types[1] ? '\n' : '')
+          }
         }
       }
     )