Django模板中嵌入markdown+mathjax

前言

最近打算把网站嵌入一个markdown编辑器，当然还没有完成，等完成以后再接着更新一波，或者感觉不需要了就不更新了。

整合markdown

django中整合markdown
python中有一个markdown模块，直接可用
pip install markdown
然后在views.py中

from markdown import markdown
def add_page(request):
    page.body=markdown(page.body,
                       extensions=[
                           'markdown.extensions.extra',
                           'markdown.extensions.codehilite',
                           'markdown.extensions.toc',
                       ])
    page.save()

这样就可以把markdown转化成html了。
代码高亮，安装一个pygments就行了。
其实这些都没啥问题，主要是我前端遇到了一点问题，如果我把{{ body }}直接传入我的page.html模板，那这个时候django把我的{{ body }}转义成了字符串插了进去，这个时候不能正常显示。
这个时候有两种方法：

• 采用jquery中的ajax来搞，当网页加载时，异步从后台读取{{ body }}内容，加载原来的地方，因为我们知道jquery可以直接输出html
• 后来在上面的连接中发现了原来可以通过safe标签来完成，即只需要在page.html模板中添加{{ body|safe }}即可，这句话告诉django我的内容是安全的，你不需要做任何操作。

整合MathJax

前端整合MathJax
这个相比而言就比较简单了，只需要将下面的代码加入到base.html

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    showProcessingMessages: false, //关闭js加载过程信息
    messageStyle: "none", //不显示信息
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath:  [ ["$", "$"] ], //行内公式选择$
        displayMath: [ ["$$","$$"] ], //段内公式选择$$
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], //避开某些标签
        ignoreClass:"comment-content" //避开含该Class的标签
    },
    "HTML-CSS": {
        availableFonts: ["STIX","TeX"], //可选字体
        showMathMenu: false //关闭右击菜单显示
    }
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>
<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

再在base.html中加入外链接

<link rel="dns-prefetch" href="//cdn.mathjax.org" />

问题

这个时候差不多就可以通过一个text的编辑器编辑Markdown+MathJax了。但是因为我们的程序流程是：

1. 先通过markdown将输入markdown的语法转变为html
2. 再将html通过mathjax.js渲染。

所以，如果我们公式中有*或者>之类markdown的特殊字符时，我们公式显示就会出错。这个时候我们在编辑文本的时候，可以先将这些字符转义*变成\*，>变成\>。

• 在公式中需要转义的字符
  
  • *
  • >

待更新