提取目录
import markdown
from markdown.extensions.toc import TocExtension
def content(request, content_id):
content_id = int(content_id)
content = Content.objects.get(id=content_id)
md = markdown.Markdown(extensions=['markdown.extensions.extra','markdown_checklist.extension', TocExtension()])
html_output = md.convert(content.content)
toc = md.toc
# 重新赋值
content.content = html_output
# 添加toc
content.toc = toc
return render(request, 'content.html', {'content': content})
前端渲染
<style>
img{
max-width: 100%;
}
h2 ,h4 ,h5 {
font-weight: 600;
margin: 10px 0 10px 0;
padding: 0 10px;
border-left: 5px solid #20c997;
background-color: #f7f7f7;
line-height: 2em;
}
p {
font-size: 16px;
}
.toc {
padding: 20px;
}
.toc li {
padding: 10px;
}
</style>
<div class="layui-container">
<div class="layui-row">
<h1>{{content.title}}</h1>
{{content.content | safe}}
</div>
</div>
代码高亮
<link rel="stylesheet" href="{% static './prism/prism.css' %}"> <!-- css样式 -->
<!-- <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/prism-themes/1.9.0/prism-xonokai.min.css" type="text/css" rel="stylesheet" /> --> <!-- 不同主题样式 -->
<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.min.css"> --> <!-- 不同主题样式 -->
<link rel="stylesheet" href="{% static './prism/prism-toolbar.css' %}"> <!-- 复制及代码语言按钮 -->
<!-- <link rel="stylesheet" href="{% static './prism/blackmac.css' %}"> --> <!-- Mac主题样式 -->
<script src="{% static './prism/prism-tb.js' %}"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/clipboard.js/2.0.10/clipboard.js" type="application/javascript"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/prism/9000.0.1/components/prism-python.js" type="application/javascript"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/prism/9000.0.1/components/prism-php.js" type="application/javascript"></script>
layui固定条打开目录列表
<script>
layui.use(function () {
var util = layui.util;
// 自定义固定条
util.fixbar({
bars: [
{
type: '打开目录',
content: '目录',
style: 'font-size: 21px;',
bgcolor: 'red',
}],
on: { // 任意事件 -- v2.8.0 新增
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true
});
},
mouseleave: function (type) {
layer.closeAll('tips');
}
},
// 点击事件
click: function (type) {
//打开目录
if (type == '打开目录') {
layer.open({
type: 0,
title: '目录',
shadeClose: false, // 禁止点击遮罩关闭弹层,因为我们不显示遮罩
shade: 0, // 设置遮罩透明度为0,即不显示遮罩
area: ['340px', '540px'], // 宽高
//只能打开一次
maxmin: true,
offset: 'r',
content: `{{content.toc | safe}}`
});
}
}
});
});
</script>