【cxx原创】editor.md与Latex的使用

> ------------
# editor.md与Latex的正确打开方式
## 写在前面： editor.md如何与Django框架结合起来？而后使用markdown在前端渲染出Latex格式。

### 一、找到官方文档与实例

> #### Github地址: 
####  找到以下的示例 :
### Markdown to HTML 
#### 代码如下：

------------
```html
<link rel="stylesheet" href="editormd/css/editormd.preview.css" /> 
<div id="test-markdown-view">
    
    <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
 
<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

<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. 字母

$&#36;\pi$&#36; = $$ \pi $$
	$&#36;\Sigma $&#36; = $$ \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}&#39;$$ = {f}&#39; 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 $$

#### 添加颜色后:

$$ \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"

CXX1.COM专注内容视图分离

您还没有登录，请您登录后发表评论。

搜索：

TAG cloud