Markdown-it-latex2img
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
Screenshot:
Install
Node.js:
npm install markdown-it-latex2img --save
Browser (CDN):
Usage
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
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>
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 as Renderer.
- Install
npm i hexo-renderer-markdown-it --save
npm i markdown-it-latex2img --save
- 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
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;'
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\to\infty} \left( 1+\frac{x}{n} \right)^n
\qquad (2)
}
$$
Dependencies
License
MIT MakerGYT
Markdown-it-latex2img的更多相关文章
- NiceMark——我的Markdown编辑器
NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...
- Markdown 图片助手-MarkdownPicPicker
title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 16:40:06 tags: [Python, Markdown ...
- 前端学Markdown
前面的话 我个人理解,Markdown就是一个富文本编辑器语言,类似于sass对于css的功能,Markdown也可以叫做HTML预处理器,只不过它是一门轻量级的标记语言,可以更简单的实现HTML ...
- 好用的Markdown编辑器一览 readme.md 编辑查看
https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...
- mac好用的markdown编辑器
在刚开始接触markdown的时候,就被吸引了.此后一直在找贴心的好用的markdown编辑器.印象笔记和马克飞象配合着用也是挺好的,唯一的缺点就是比较封闭,发个笔记的链接给同学,还得注册才能看,导致 ...
- Markdown学习笔记
分为两步: 1.阅读Markdown中文官网的文档 2.下载MarkdownPad2将中文官网中文档的例子敲一遍,其中Markdownpad2为官网中推荐的编辑器 备注: 如果只看中文官网文档,不边看 ...
- Linux 中优秀的文本化编辑思想大碰撞(Markdown、LaTeX、MathJax)
这样一个标题可能不太准确,因为确实无法准确地解释什么叫"文本化编辑思想".其实我这篇随笔主要是想探讨 Markdown.LaTeX.MathJax,有兴趣的朋友可以继续往下看,同时 ...
- Markdown是怎样接管我的各种的写作工作的
对于一个程序猿来说,没有什么比单纯的写代码更能让人兴奋了.如果能让你像写代码一样写文档,不用再面对那些繁琐的样式,你会怎么看?它就是Markdown!即使博客园已经有不少介绍的文章了,但是我依然还是不 ...
- markdown常用语法总结
转自markdown示例[模板] 1.1.段落标题 根据原文中的文档标题可以对应设置标题. # 一级标题## 二级标题### 三级标题 效果 => 一级标题 二级标题 三级标题 1.2.斜体.加 ...
- 基于 Cmd MarkDown 的 markdown 语法学习
首先我要打一个属于干货的广告:CmdMarkDown 是非常好用的markdown编辑器软件,支持全平台,由作业部落出品,分为客户端与WEB端两种使用场景. 本篇博客学习的markdown语法都是基于 ...
随机推荐
- Java实现 LeetCode 682 棒球比赛(暴力)
682. 棒球比赛 你现在是棒球比赛记录员. 给定一个字符串列表,每个字符串可以是以下四种类型之一: 1.整数(一轮的得分):直接表示您在本轮中获得的积分数. 2. "+"(一轮的 ...
- Java实现 蓝桥杯VIP 算法训练 递归求二进制表示位数
问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数是1001,因此位数是4. 样例输入 一个满足题目要求的输入范例. 9 样例输出 与上面的样例输入对应的 ...
- Java实现 LeetCode 65 有效数字
65. 有效数字 验证给定的字符串是否可以解释为十进制数字. 例如: "0" => true " 0.1 " => true "abc&q ...
- opencl(4)命令队列
1:创建命令队列 cl_command _queue clCreateCommandQueue( cl_context context, //上下文 cl_device_id device, ...
- 下拉式菜单中的内容堆叠(ul型)
今天使用ul创建下拉式菜单,菜单中的内容堆在了一起. 这是我的html代码 <!DOCTYPE html> <html lang="en"> <hea ...
- 你都这么拼了,面试官TM怎么还是无动于衷?
前言 面试,对于每个人而然并不陌生,可以说是必须经历的一个过程了,小到一场考试,大到企业面试,甚至大型选秀...... 有时自己明明很努力了,但偏偏会在面试环节出了插曲,比如,紧张就是最容易出现的了. ...
- HTTP协议浅析(一)
先来看看百度百科对HTTP的解释 http是一个简单的请求-响应协议,它通常运行在TCP之上.它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应.请求和响应消息的头以ASCII码形式给出: ...
- [转] 理解TCP序列号(Sequence Number)和确认号(Acknowledgment Number)
点击阅读原译文 原文见:http://packetlife.net/blog/2010/jun/7/understanding-tcp-sequence-acknowledgment-numbers/ ...
- JCreator配置的Java学习环境
绕不开的配置,很多东西需要它,论精力现在还折腾不来,可总不至于去见马克思的那一天才来啊,该来的就该来不躲避(Py及其Android.BigData都绕不开,总是触动着我)!不想那些庞大耗内存的Ecli ...
- usb串口的作用以及JLINK
usb串口的作用 (1)可以当串口使用 (2)如果usb串口连接到STM32的串口1(stm32ISP下载只能是串口1),可以用串口下载程序 (3)因为要连接到usb,可以用来供电 JLINK JLI ...