highlight.js实现代码高亮

引入

更换代码样式直接修改link标签的css文件名，例如：将androidstudio改为github就行了，更多样式名称查看：highlight.js代码样式名称

1
2
3

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/androidstudio.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

代码块外围代码

code标签的class内填代码类型，不填也可以，会自动检测

<pre>
    <code class="HTML">

    </code>
</pre>

特别地，上面的格式会让代码块和上面的元素空出一行，如果不想空出一行，让<code>头标签顶格就行，如下所示：

<pre>
<code class="HTML">

</code>
</pre>

转义HTML代码

HTML代码转义网站：HTML转义工具-前端开发转换工具 | WEB前端开发

填写代码

在code标签内填入要展示的代码

PS.

highlight.js官网：highlight.js