Markdown-it-latex2img

LaTex plugin for markdown-it markdown parser, Server side MathJax Renderer.

Background

Related

• markdown-it-math: It was originally designed to render MathML.
• markdown-it-mathjax: Just to bypass LaTeX math for mathjax processing, need to import
  mathjax
• markdown-it-katex: Need to include the
  KaTeX stylesheet

Demand

• Place LaTeX Math equation on anywhere
• Accurate and fast, supports rendering of diverse formulas

Feature

• Convert Latex syntax to image tags
• Support inline and block formulas
• Rendering results support multi-end use, such as WeChat Mini Program

Sample

Demo

Screenshot:

Install

Node.js:

npm install markdown-it-latex2img --save
Copy the code

Browser (CDN):

• jsDeliver CDN

Usage

Node.js

const md = require('markdown-it')()
            .use(require('markdown-it-latex2img'));
md.render(`$\\frac {a+1}{b+2}
Copy the code

Browser

If you load script directly into the page, without package system, module will add itself globally as
window.markdownitLatex2img.

<script src="https://cdn.jsdelivr.net/npm/markdown-it-latex2img@latest/dist/markdown-it-latex2img.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js" crossorigin="anonymous"></script>
<script>
  var md = window.markdownit();
  md.use(window.markdownitLatex2img);
</script>
Copy the code

Hexo

WARNING: No front-end scripts and other Math plugins are required. Remove them ALL before using this plugin.Please use official plugin hexo-renderer-markdown-it(plus) as Renderer.

1. Install

npm i hexo-renderer-markdown-it --save
npm i markdown-it-latex2img --save
Copy the code

1. Config

# _config.yml
markdown:
  plugins:
    - markdown-it-latex2img
Copy the code

Default will load mathjax plugin EVERY PAGE during rendering,Does not reduce page speed after generated.Later will support on-demand rendering to improve rendering speed

Options(optional)

If you want to customize options in hexo,please do as follows:

# _config.yml
markdown:
  plugins:
    - name: markdown-it-latex2img
      options:
        style: 'filter: opacity(90%); The transform: scale (0.85); text-align:center; '
Copy the code

Convention

Markup is based on pandoc definition. Mathjax pointed out

The default math delimiters are

and […] for displayed mathematics, and (…) for in-line mathematics.Note in particular that the
in-line delimiters are not used by default.That is because dollar signs appear too often in non-mathematical settings, which could cause some text to be treated as mathematics unexpectedly.

However,most still use , we have followed this habit.

# inline
$\frac {a+1}{b+2}$ # The opening $ must have a non-space character immediately to its right, while the closing $ must have a non-space character immediately to its left, and must not be followed immediately by a digit. 
Copy the code

# block
$
{
e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n
\qquad (2) 
}
$
Copy the code

Dependencies

• uetchy/math-api

Case

• Hexo blog

License

MIT © MakerGYT