【cxx原创】editor.md与Latex的使用 发表评论 21014 views CXX1.COM原创博客网 › 白石 › 哲学 › 数学 › 【cxx原创】editor.md与Latex的使用 > ------------ # editor.md与Latex的正确打开方式 ## 写在前面: editor.md如何与Django框架结合起来?而后使用markdown在前端渲染出Latex格式。 ### 一、找到官方文档与实例 > #### Github地址: :point_right: [[editor.md]][1] #### 找到以下的示例 : ### Markdown to HTML #### 代码如下: ------------ ```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文件下 ```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> ``` 2. css文件 ```html <!-- mdeditor for css --> <link rel="stylesheet" href="{% static 'mdeditor/css/editormd.preview.css' %}"> <link rel="stylesheet" href="{% static 'mdeditor/css/editormd.min.css' %}"> ``` 3. 找到/templates/blog/tags/article_info.html 下加入如下代码 ```html <div id="test-editormd-view" class=""> <textarea style="display:none; width:1000px;" > {{ article.body }} </textarea> </div> ``` > #### 说明 {{ article.body }} 标签之间是有 custom_markdown 的他会强行去解释Latex的多行符号, 例如 ` (反引号) 4. 编写 mdeditor.setting.js 文件放入/static下面, 具体代码如下 ```javascript 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 $$ > 可以发现其行内需要用两个$$符号来包裹, 下面的就不写了 \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. 分数与根号 > 非常糟糕的是编辑器似乎并不支持开几次根号的通用写法例如: \sqrt[3]{x}, 但是我们有如下解决方案 $$\frac{1}{2}$$ = \frac{1}{2} 分数 > $$^{4}\sqrt{x} $$ = ^{4}\sqrt{x} 4. 高等数学符号 > 通常我们需要更高级的符号,编辑器为我们提供了常用的 $${f}'$$ = {f}' f上的导数 $$f(x) = \int_{-\infty}^{\infty}$$ 求正无穷到负无穷的定积分 $$ lim_{x \to +\infty} $$ = lim_{x \to +\infty} 5. 行列式与矩阵 > 行列式与矩阵在editor暂时无法编写出来,我们应该找其他的替代品获取添加插件来支持 例如: ``` \begin{vmatrix} 1& 2& 3\\ & & \\ & & \end{vmatrix} ``` 6. 颜色 > 有时候我们需要给字母或者公式添加一些颜色怎么办,以欧拉公式为例子 $$ e^{i\pi} + 1 = 0 $$ #### 添加颜色后:dizzy: $$ \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 $$ ------------ ### 最后: 我们编写一个正态分布 - 概率密度函数 ```math 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}} ## 这里推荐给大家一个非常好的latex在线工具,可以帮忙辅助编写Latex ### https://www.latexlive.com/ 【Latex在线工具】 ### 转载、点赞、收藏【cxx1原创文章】 [1]: https://github.com/pandao/editor.md#markdown-to-html "Markdown to HTML"
1
x
2322
1