前言

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

一、我的做法如下：



1、先在csdn里面用markdown来编辑要发布的文章；

这里写有个好处，实时对照样式，还可以查看帮助，还有很多快捷键可以使用。例如：

Ctrl+k：快速添加代码：



I am test code !

Ctrl+g：快速插入图片,例如：





#表示加大文字size，类似html里面的h1-h6，#越多，字体越小，可以自己测试一下。这里举两个例子：



我是1个#号形成的字体



我是2个#号形成的字体



我是3个#号形成的字体



我是5个#号形成的字体



完整的帮助说明看下图：



的确很不错哦，实时插入表格，ul等等。



2、在csdn编辑好要发布的文本，然后把源代码粘贴到sublime中，保存为html格式或者markdown格式。



3、利用sublime插件，将markdown语法的文本转化为通用的html，然后接下来的事情，大家都知道了。说起来很长，但是实际操作起来是非常快的。



二、实操：

下面进行实操，我们在csdn里面的markdown写好了文章，怎么把他转化为产道里面的markdown代码呢？要知道，禅道免费版本是不支持markdown语法的，那么，我们就可以把markdown转化为html格式的文件，任何地方通用，网页均可！这个就牛逼了！这里需要使用到一个sublime的插件： 

MarkdownEditing:这个是编写Markdown文件的 

OminiMarkupPreviewer:这个是预览markdown文件的。



有这两个插件，在sublime里面点击右键就可以看到如下内容：





看到了吧？可以导出文件为html格式，这个就是今天的重点了，有了html代码，想放哪里都可以！

我们就选择Copy Markup as Html ，粘贴到任意你想要使用的地方。我在粘贴到禅道的时候，出现了问题，不显示，问了下同事，推测是html里面body\head\meta等标签在禅道里面不支持嵌套的原因，把代码粘贴到新建的sublime html文件中，去掉头尾的html\head\meta\body,再次粘贴到禅道，就可以了！好看的格式就这么生成了！以后大家写内部文档省事多了！

介绍
showdown是一个Javascript标记到HTML转换器，将markdown文本转换为HTML，基于John Gruber的原始作品。showdown可以使用在客户端(在浏览器中)或服务器端(使用NodeJs)。
它比较适用于个人博客，在线下将笔记或者其他内容写成markdown，然后上传到服务器，在客户端或服务端转换为HTML便可渲染到客户端，展现给用户。
安装
Bower
bower install showdown

或：

npm (server-side)
npm install showdown

客户端引入
使用的话有两种方法：

1、使用上述方法安装，将showdown项目下载到项目中，然后引入到项目，如
<script  src="node_modules/showdown/dist/showdown.min.js"></script>

注：showdown.min.js文件的路径

2、通过CDN引入，也就不需要安装了
<script  src="https://unpkg.com/showdown/dist/showdown.min.js"></script>

服务端引入
由于我用的node.js，所以这里只介绍在node项目中的引入，首先需要使用上面的方法进行安装，安装后即可引入
var showdown=require('showdown')

使用
1、客户端
        var converter = new showdown.Converter(),
        text = document.getElementById('content').innerText,
        html = converter.makeHtml(text);
        document.getElementById('output').innerHTML = html;

2、服务端
    app.get('/markdown',function (req,res) {
    let converter = new showdown.Converter();
    let html = converter.makeHtml('# 你好');
    console.log(html)
    res.send(html)
   })

我已没有必要浪费时间解释在网页或其它形式的文档中拥有图片的重要性，如今图片已经遍布各处。然而，有必要知道如何用Markdown插入图片。更准确地说，我正在讲如何 只用Markdown 插入图片。
怎么做
方法很简单。你只需要在你想要插入图片的地方写上：
![name of the photo(optional)](link to the photo)

举个例子，让我们来看看这个用上面的方法插入的Tux的图片。 
问题
然而，只使用这个方法可能会造成一个问题。如果图片的分辨率过高或过低，网页上显示的图片体积会因为太大或太小而观看体验不佳。
太大:

太小:

解决方案
这个问题是否有解决方案？答案是肯定的。然而，解决方案超过了我们今天的”只用Markdown“这个话题范围。因此我将跳过它。不过这个解决方案与HTML、CSS有关。

引用


, from the home page of The Linux Kernel Archives. Retrieved in January, 4, 2019.


Photo of Vinece, from ARRIVING INTO VENICE, ITALY AND THE ATVO BUS by Marian Krueger,    in category Destinations, Italy,  09/06/2014. Retrieved in January, 4, 2019


Photo of Alps, from White - Wikipedia, the free encyclopedia. Retrieved in January, 4, 2019.