使用 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>
这种就可以对动态的代码进行高亮显示
标签:
highlight.js
, Markdown
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义