用showdown给HTML网页插入markdown笔记

最新推荐文章于 2024-01-13 19:18:24 发布

原创最新推荐文章于 2024-01-13 19:18:24 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Django #markdown

网页专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在个人blog网站上实现Markdown笔记的解析与显示，通过使用showdown.js库，将数据库中存储的Markdown内容转换为HTML并展示在网页上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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