- codingsoho.com

博客五部曲之二 - 高级博客

3 渲染HTML和Markdown

当前的帖子内容显示非常简单instance.content|linebreak，但是如果我们想在里面嵌入HTML代码显示时就不行了。
一种方法是instance.content|safe，HTML代码会直接显示为相应的内容，但是这种非常并非高效。

本文会引入markdown这个流行的博客编辑语言，有很多种方法可以来渲染markdown，本文实现是通过JavaScript在前端实现。

首先安装JQuery，访问http://code.jquery.com/，拷贝JQuery 1.12.4

<script   src="[http://code.jquery.com/jquery-1.12.4.min.js](http://code.jquery.com/jquery-1.12.4.min.js)"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>

另外，我们要安装另外一个库marked，它会发布和编译markdown，从网上找了一个CDN
https://cdn.bootcss.com/marked/0.3.19/marked.min.js

在post_detail.html添加容器显示markdown内容

<div class="row">
    <div class="col-sm-12">
        <div class="content-markdown">{{instance.content}}</div>
    </div>
</div>

在base文件里添加对它的处理

<script type="text/javascript">
    $(document).ready(function(){
        $(".content-markdown").each(function(){
            var content = $(this).text()
            console.log(content)
            var markedContent = marked(content)
            console.log(markedContent)      
            $(this).html(markedContent)      
        })
    })
</script>

$(document).ready内容在页面加载完成之后就会执行。
$(".content-markdown").each表示轮询class为content-mark的每一个元素并执行函数内容，首先读取元素内容，然后通过marked函数转换，再把它回显到原位置。

如果输入#head1，它会显示为一级标题