zoukankan      html  css  js  c++  java
  • Markdown-it-latex2img

    0 Background

    • 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

    0.2 Demand

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

    1 Feature

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

    2 Sample

    Demo

    3 Install

    3.1 Node.js:

    npm install markdown-it-latex2img --save
    

    3.2 Browser (CDN):

    4 Usage

    4.1 Node.js

    const md = require('markdown-it')()
                .use(require('markdown-it-latex2img'));
    md.render(`$\frac {a+1}{b+2}$`) //JavaScript strings require double backslashes, but HTML input and reading files are not required
    

    4.2 Browser

    Differences in 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/markdown-it@11.0.0/dist/markdown-it.min.js" crossorigin="anonymous"></script>
    <script>
      var md = window.markdownit();
      md.use(window.markdownitLatex2img);
    </script>
    

    4.3 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
    
    1. Config
    # _config.yml
    markdown:
      plugins:
        - markdown-it-latex2img
    

    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

    5 Options(optional)

    Property Type Default Required Remarks
    server String https://math.now.sh true ?from=block/inline=inline
    style String false commonly use filter: opacity(75%);transform:scale(0.75);text-align:center; to fit the body font color and size

    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%);transform:scale(0.85);text-align:center;'
    

    6 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. 
    
    # block
    $$
    {
    e^x=lim_{n	oinfty} left( 1+frac{x}{n} 
    ight)^n
    qquad (2) 
    }
    $$
    

    7 Dependencies

    8 Case

    9 License

    MIT © MakerGYT

  • 相关阅读:
    MySql清空所有表数据【慎用】
    积分墙已死?积分墙冲榜失效?请看看别人怎么玩转积分墙!
    [转]小心PHP的类定义顺序与继承的问题
    [转]PHP中替换换行符
    [转]php的public、protected、private三种访问控制模式的区别
    [转]Zend Studio中将tab转换为4个空格
    PHP预定义常量
    PHP Unit资料收集
    『Python』setup.py简介
    『计算机视觉』Mask-RCNN_项目文档翻译
  • 原文地址:https://www.cnblogs.com/makergyt/p/13220558.html
Copyright © 2011-2022 走看看