Django markdown前端页面渲染

提取目录(方式一)

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
    return render(request, 'content.html', {'content': content, 'html_output': html_output, 'toc': toc})

前端渲染

 <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>
            {{html_output | 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: `{{toc | safe}}`
                    });
                }
            
            }
        });
    });
</script>