用showdown给HTML网页插入markdown笔记

前言

本文的目的是给个人创建的blog网站增加markdown博文的解析与显示功能

环境

windows10

pycharm2017.3.3 professional edition

python3.6.4

django2.0.2

方法

下载showdown.js，下载完成后，将文件里的showdown.js文件放到项目内对应js目录下，目录请根据自己的项目自行调整。

在引入之前下载的showdown.js文件，比如

<script src="/static/js/showdown.min.js"></script>

根据官方提供的例子，在HTML页面里解析markdown语言的方法如下

<p id="output">test</p>
<script>
var converter = new showdown.Converter(),
text = "# title",
html = converter.makeHtml(text);
document.getElementById('output').innerHTML = html;
</script>

其结果是将text内的markdown语言转化成HTML语言病替换到test的位置

但是一般我们不会将大片的markdown笔记直接放入HTML文件中，如果我们的数据是放在数据库里的，那么就需要改变获取数据的方式，方法如下：
首先，需要定义需要从数据库获取文档

<p id="content" class="hide">{{ blog.content}}</p>

其次，就是让js程序读取文档

text = document.getElementById('content').innerText

最终结果就是

<p id="content" class="hide">{{ blog.content }}</p>
<p id="output">test</p>
<script>
var converter = new showdown.Converter(),
text = document.getElementById('content').innerText,
html = converter.makeHtml(text);
document.getElementById('output').innerHTML = html;
</script>