python将markdown转换为html并应用github-markdown-css样式

穆琪muqi

已于 2023-09-27 10:37:08 修改

阅读量707

点赞数 1

分类专栏： python 文章标签： python html github

于 2023-09-27 10:35:11 首次发布

本文链接：https://blog.csdn.net/bland107/article/details/133343166

版权

python 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

引用自己博客：python将markdown转换为html并应用github-markdown-css样式 - 穆琪的博客 (muhongqiao.top)

最近在尝试给文本编辑器加一个markdown转html的功能，然后发现转换出来的样式很丑，遂使用github-markdown-css样式进行美化。

主要使用python-markdown模块来进行转换，并使用开源的github-markdown-css样式来美化

1.安装markdown库

pip install markdown

2.markdown使用方式

样例md文件内容：

# 测试
## 表格
| key     | value |
| ------- | ----- |
| version | 1.0.0 |
```python
import markdown
html = markdown.markdown(your_text_string)
```
> 引用
正文--------------------------------------

转换代码：

import markdown
md_str = """# 测试
## 表格
| key     | value |
| ------- | ----- |
| version | 1.0.0 |
```python
import markdown
html = markdown.markdown(your_text_string)
```
> 引用
正文--------------------------------------"""
html = markdown.markdown(md_str)  # 将markdown字符串转为为html字符串
# 将生成的html代码应用css，注意需要用<article class="markdown-body">标签包住
html_style = f"""<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css">
</head>
<body>
<article class="markdown-body">
{html}
</article>
</body>
</html>
"""
with open("D:/test_md2html.html", "w", encoding="utf-8") as f:
    f.write(html_style)

3.转换效果

上面的代码已经保存成html文件了，打开如下：

4.转换时引入扩展

但是我们发现，表格和代码没有高亮，只应用了css的基本样式，这是因为转换的时候没有增加表格和代码高亮的插件，详细信息请看文档：python-markdown扩展文档

基于上面的文档，我们将代码修改如下：

import markdown
md_str = """# 测试
## 表格
| key     | value |
| ------- | ----- |
| version | 1.0.0 |
```python
import markdown
html = markdown.markdown(your_text_string, extensions=["tables", "fenced_code"])  # 将markdown字符串转为为html字符串
```
> 引用
正文--------------------------------------"""
html = markdown.markdown(md_str)
# 将生成的html代码应用css，注意需要用<article class="markdown-body">标签包住
html_style = f"""<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css">
</head>
<body>
<article class="markdown-body">
{html}
</article>
</body>
</html>
"""
with open("D:/test_md2html.html", "w", encoding="utf-8") as f:
    f.write(html_style)

其中extensions=["tables", "fenced_code"]就是表格和代码高亮扩展。

现在我们再来看一下样式效果：