markdown+highlight代码高亮

引用样式和脚本

<link rel="stylesheet" href="/highlight/highlight.min.css">
<script src="/marked/marked.min.js"></script>
<script src="/highlight/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

前端创建一个隐藏的标签，用来接收md内容变量
然后创建一个"content"空容器，存放转换后的html
！注意，这里的模板变量可以不用加!，这样默认会转义html标签，而不会和网页本身的冲突

<textarea id="yincang" name="yincang" style="display: none;">{{neirong}}</textarea>
<div id="content"></div>

前端脚本部分：

<script>
    //获取隐藏容器内容
    var linshi = document.getElementById("yincang").value;
    //console.error("内容：" + linshi);
    const markdownText = linshi;
            //开始转换
    const htmlText = marked.parse(markdownText);

    //为表格添加class
    const tableRegex = /<table>/g;
    const tableClass = '<table class="pure-table pure-table-horizontal">';
    const modifiedHtmlText = htmlText.replace(tableRegex, tableClass);
    console.error("内容2：" + modifiedHtmlText);
    //为代码添加class
    const preRegex = /<pre>/g;
    const preClass = '<pre class="code">';
    const modifiedHtmlText2 = modifiedHtmlText.replace(preRegex, preClass);
    //为code添加class
    // const codeRegex = /<code>/g;
    // const codeClass = '<code class="layui-form-item layui-font-green">';
    // const modifiedHtmlText3 = modifiedHtmlText2.replace(codeRegex, codeClass);

    //替换内容
    const contentElement = document.getElementById('content');
    contentElement.innerHTML = modifiedHtmlText3;
</script>