About mathematical formulas

[RanX12]

Does marked support rendering mathematical formulas?
I have a need to render mathematical formulas, but I did not find your solution here. Is there a lack of functionality or is there another method? Please tell me, thanks

For example: $$ \frac{a-1}{b-1} \quad or \quad {a+1 \over b+1} $$

I read #1538, but I don’t quite understand how I should rewrite this, please advise, thank you!

[RanX12]

After I changed it, the math formula can be rendered, but input:
```
code
```
Will report an error.
The modified code is as follows:

import DOMPurify from 'dompurify'
import marked from 'marked'
import katex from 'katex'
import h from 'highlight.js'
import 'highlight.js/scss/github-gist.scss'

const renderer = new marked.Renderer()

function mathsExpression(expr) {
  if (expr.match(/^\$\$[\s\S]*\$\$$/)) {
    expr = expr.substr(2, expr.length - 4)
    return katex.renderToString(expr, { displayMode: true })
  } else if (expr.match(/^\$[\s\S]*\$$/)) {
    expr = expr.substr(1, expr.length - 2)
    return katex.renderToString(expr, { isplayMode: false })
  }
}

const rendererCode = renderer.code
renderer.code = function (code, lang, escaped) {
  if (!lang) {
    const math = mathsExpression(code)
    if (math) {
      return math
    }
  }

  return rendererCode(code, lang, escaped)
}

const rendererCodespan = renderer.codespan
renderer.codespan = function (text) {
  const math = mathsExpression(text)

  if (math) {
    return math
  }

  return rendererCodespan(text)
}

marked.setOptions({
  renderer: renderer,
  highlight: function (code, language) {
    const validLanguage = h.getLanguage(language) ? language : 'plaintext'
    return h.highlight(validLanguage, code).value
  },
  pedantic: false,
  gfm: true,
  breaks: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  xhtml: false,
  headerIds: false,
  katex: katex,
})

function _marked(text) {
  let dirty = marked(text.toString())
  let clean = DOMPurify.sanitize(dirty)
  return clean
}

export default _marked

The error code is as follows:

[UziTech]

try this:

-const rendererCode = renderer.code
+const rendererCode = renderer.prototype.code

[UziTech]

or this: #1538 (comment)

[UziTech]

actually a better way to write a renderer is to use marked.use it is meant to allow extensions that don't overwrite each other.

function mathsExpression(expr) {
  if (expr.match(/^\$\$[\s\S]*\$\$$/)) {
    expr = expr.substr(2, expr.length - 4)
    return katex.renderToString(expr, { displayMode: true })
  } else if (expr.match(/^\$[\s\S]*\$$/)) {
    expr = expr.substr(1, expr.length - 2)
    return katex.renderToString(expr, { isplayMode: false })
  }
}

const renderer = {
  code(code, lang, escaped) {
    if (!lang) {
      const math = mathsExpression(code)
      if (math) {
        return math
      }
    }

    // use original code renderer by returning false
    return false
  },

  codespan(text) {
    const math = mathsExpression(text)

    if (math) {
      return math
    }

    // use original codespan renderer by returning false
    return false
  }
}

marked.use({renderer})

[RanX12]

yea, I chose to use #1538 (comment)

[RanX12]

thx