关注互联网应用及运维技术的个人博客

editor.md与Latex的使用技巧

editor.md与Latex的正确打开方式

写在前面: editor.md如何与Django框架结合起来?而后使用markdown在前端渲染出Latex格式。

一、找到官方文档与实例

找到以下的示例 :

Markdown to HTML

代码如下:


<link rel="stylesheet" href="editormd/css/editormd.preview.css" /> 
<div id="test-markdown-view">
    <!-- Server-side output Markdown text -->
    <textarea style="display:none;">### Hello world!</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
    $(function() {
        var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
</script>

注意引入css、js文件如上

Django项目中如何去引入这些文件?


  1. 在/templates/share_layout/base.html文件下
 <!-- mdeditor for js -->
<script src="{% static 'mdeditor/editormd.js' %}"></script>
<script src="{% static 'mdeditor/lib/marked.min.js' %}"></script>
<script src="{% static 'mdeditor/lib/raphael.min.js' %}"></script>
<script src="{% static 'mdeditor/lib/underscore.min.js' %}"></script>
<script src="{% static 'mdeditor/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'mdeditor/lib/prettify.min.js' %}"></script>
<script src="{% static 'mdeditor/lib/flowchart.min.js' %}"></script>
<script src="{% static 'mdeditor/lib/jquery.flowchart.min.js' %}"></script>
<script src="{% static 'assets/js/mdeditor.setting.js' %}"></script>
  1. css文件
<!-- mdeditor for css -->
<link rel="stylesheet" href="{% static 'mdeditor/css/editormd.preview.css' %}">
<link rel="stylesheet" href="{% static 'mdeditor/css/editormd.min.css' %}">
  1. 找到/templates/blog/tags/article_info.html 下加入如下代码
 <div id="test-editormd-view" class="">
     <textarea style="display:none; width:1000px;" >
         {{ article.body }}
     </textarea>
</div>

说明 {{ article.body }} 标签之间是有 custom_markdown 的他会强行去解释Latex的多行符号, 例如 ` (反引号)

  1. 编写 mdeditor.setting.js 文件放入/static下面, 具体代码如下
var testEditormdView
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
    htmlDecode      : "style,script,iframe",  // you can filter tags decode   过滤一些标签,例如 h1标签,如果你写后边意味着 # 符号会被解析掉. 因为 # 符号对应h1标签 
    emoji           : true,     //表情是否开启?
    taskList        : true,
    tex             : true,  // 默认不解析 latex是否开启?
    flowChart       : true,  // 默认不解析 流程图是否开启?
    sequenceDiagram : true,  // 默认不解析
});

那么这里就比较简单了,首先通过editor对象去获取其下面的 markdownToHTML() 方法, 在这个方法中有两个形参,第一个参数就是获取ID, 第二个参数就是获取其定义的前台输出定义。

二、 Latex的语法在editor中是如何的呢?

其实根据官方文档我们可以总结一下。

  1. 字母$$\pi$$ = \pi
    $$\Sigma $$ = \Sigma
    1. 可以发现其行内需要用两个$$符号来包裹, 下面的就不写了
    \alpha = \alpha
    \beta = \beta
    \gamma = \gamma
    \theta = \theta
    \varphi = \varphi
  2. 上标和下标x^2 = x^2 上标记
    y_n = y_2 下标记
    \hat{\pi} = \hat{\pi} 均值标记
    \bar{e} = \bar{e} 取反标记
    \vec{A} = \vec{A} A向量标记
  3. 分数与根号
    1. 非常糟糕的是编辑器似乎并不支持开几次根号的通用写法例如: \sqrt[3]{x}, 但是我们有如下解决方案
    \frac{1}{2} = \frac{1}{2} 分数^{4}\sqrt{x} = ^{4}\sqrt{x}
  4. 高等数学符号
    1. 通常我们需要更高级的符号,编辑器为我们提供了常用的
    {f}’ = {f}’ f上的导数f(x) = \int_{-\infty}^{\infty} 求正无穷到负无穷的定积分lim{x \to +\infty} = lim{x \to +\infty}
  5. 行列式与矩阵
    1. 行列式与矩阵在editor暂时无法编写出来,我们应该找其他的替代品获取添加插件来支持
    例如:
    1. \begin{vmatrix}
    2. 1& 2& 3\\
    3. & & \\
    4. & &
    5. \end{vmatrix}
  6. 颜色有时候我们需要给字母或者公式添加一些颜色怎么办,以欧拉公式为例子

e^{i\pi} + 1 = 0

添加颜色后

\color{Red}e^{\color{Blue}i\color{green}\pi} + \color{#FFB6C1}1 = 0

代码如下

$$ \color{Red}e^{\color{Blue}i\color{green}\pi} + \color{#FFB6C1}1 = 0 $$

最后: 我们编写一个正态分布

  • 概率密度函数f(x) = \frac{1}{\sigma \sqrt{2\pi}}e^{-\frac{(x-\mu)^2}{2\sigma^2}}源码:
f(x) = \frac{1}{\sigma \sqrt{2\pi}}e^{-\frac{(x-\mu)^2}{2\sigma^2}}
赞(0)
未经允许不得转载:飞天狒狒 » editor.md与Latex的使用技巧

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址