前言
本文的目的是给个人创建的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>