shd101wyy / vscode-markdown-preview-enhanced

One of the "BEST" markdown preview extensions for Visual Studio Code
https://shd101wyy.github.io/markdown-preview-enhanced
Other
1.49k stars 172 forks source link

Add asciimath Math Renderer #1321

Open ewen-lbh opened 5 years ago

ewen-lbh commented 5 years ago

See asciimath's website for more info I'd really like to use asciimath instead of LaTeX, since LaTeX's syntax is way too verbose for me. (I wanna be able to write math fast since I'll be using this to take notes in school).

If you don't want to me implement it, is there any way to set asciimath as the math renderer manually?

Thanks!

ewen-lbh commented 5 years ago

I managed something that sorta works, but it won't render when the preview reloads. In VSCode, rendering works after reloading webviews (reload button in the preview pane) In Atom, no rendering occurs, even after reloading webviews. Opening in a browser renders in any case.

  1. Set math renderer to None.
  2. put this in parser.js:
    module.exports = {
    onWillParseMarkdown: function(markdown) {
    return new Promise((resolve, reject)=> {
      markdown = markdown.replace(
        /`(.+)`/gm,
        ($0,$1)=>`<code>${$1}</code>`
    )
      markdown = markdown.replace(
        /\${2}/gm,
        '&displaymath;&displaymath;'
      )
      markdown = markdown.replace(
        /\$/gm,
        '\\`'
      )
      markdown = markdown.replace(
        /(?:&displaymath;){2}([\s\S]+)(?:&displaymath;){2}/gm,
        (_,$1)=>`<p style="text-align:center;">\`${$1}\`</p>`)
      return resolve(markdown)
    })
    },
    onDidParseMarkdown: function(html) {
    return new Promise((resolve, reject)=> {
      //html = `<script src="file:///D:/%23/Coding/projects/schoolsyst/asciimath.js"></script>${html}`
      html = `<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML"></script>${html}`
      return resolve(html)
    })
    }
    }
ghost commented 5 years ago

I tried adding delimiters to the mathjax.config. It seems that they are ignored and instead the delimiters are taken from the settings.json file.

They are listed as: markdown-preview-enhanced.mathInlineDelimiters": ["$+","$"]

Also. If I just completely wanted to use asciimath, in the mathjax_config.js file, I added jax: ['input/TeX','output/HTML-CSS'], and I get a little spinning octocat below the preview.

I would really like to enable this by default.

ewen-lbh commented 5 years ago

isnt it input/AsciiMath?

Because I tried various configurations for mathjax_config that didn't give any results...

That's why I disabled the math renderer and added my hack

acomagu commented 4 years ago

Finally I found out the configuration it works well.

MathJax conf:

module.exports = {
  extensions: ['asciimath2jax.js'],
  jax: ['input/AsciiMath', 'output/HTML-CSS'],
  messageStyle: 'none',
  TeX: {
    extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js'],
  },
  asciimath2jax: {
    delimiters: [['\\(','\\)']],
  },
  'HTML-CSS': { availableFonts: ['TeX'] },
}

No need to change mathInlineDelimiters or mathBlockDelimiters(It's OK to leave as default). No need to change plugin code also.

Unfortunately I couldn't find out the way to do with $ or $$ delimiter.

Screenshot_20200420_181229