我的博客网站前端是通过 bootstrap 框架开发的。

bootstrap 支持 <pre> 和 <code> 标签显示代码，但不高亮，且没有横向滚动条。

如何让 <pre> 或 <code> 标签显示的代码高亮？

找到了一个 js 库：highlight
官网：https://highlightjs.org

使用也很简单，引入 highlight.js，调用初始化函数即可；当然也可以初始化指定标签。

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

但是矫情了，不喜欢默认的代码高亮主题，如何换一个自己喜欢的？

看了下官网，同时它支持 185 语言，91 种样式。
样式：https://highlightjs.org/static/demo/

我挑选了一个深色的，ir-black
https://highlightjs.org/static/demo/styles/ir-black.css
把这个 css 文件下载下来，也一起放入自己的 html 页面

但页面代码部分的内容都自动换行，且皱在了一起，这不能忍...

给页面高亮代码加一个横向滚动条，不就完事了。

css 中添加

code {
	white-space:pre !important;
	overflow-x:auto;
}

这里要重点说一下，网上搜到如何让 bootstrap 支持横向滚动条的方法都不可行，原因是 white-space 属性需要设置为 pre，同时是作用在 code 标签上的。

实际效果：

PS：
完整的示例，保存页面到本地即可看到源码。

网上有大把漂亮的模板，而我只钟意自己写的轮子，所谓弱水三千只取一瓢。