Title

使用 highlight.js 对 Markdown 代码进行高亮显示

查看 highlight.js 显示效果

前往官网 https://highlightjs.org/static/demo/ 查看 显示模板效果

添加文件

<!--引入相应文件 这里用的 cdn加速 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.1/build/styles/default.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>

静态的代码

<body>
<!--Markdown里代码解析后的标签-->
<pre>
    <code class="lang-xml">
        <!--需要高亮显示的代码-->
    </code>
</pre>
</body>
<script>
 hljs.initHighlightingOnLoad();
</script>

使用这种就可以将静态的代码进行渲染，但是实际代码是经常会自动生成的

动态的代码

<body>
<!--动态加载的标签-->
<pre>
    <code class="lang-xml">
        <!--需要高亮显示的代码-->
    </code>
</pre>
</body>
<script>
        var codes=document.getElementsByTagName("code");
        for(let index in codes){
            hljs.highlightElement(codes[index]);
        }
</script>

这种就可以对动态的代码进行高亮显示

posted @ 2022-04-27 17:33  快乐小洋人  阅读(764)  评论(0)    收藏  举报