用showdown给HTML网页插入markdown笔记

前言

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

环境

1. windows10
2. pycharm2017.3.3 professional edition
3. python3.6.4
4. django2.0.2

方法

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

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

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

3. 根据官方提供的例子，在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的位置

4. 但是一般我们不会将大片的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>