bootstrap高亮显示代码，且横向滚动
16lz
2021-01-22
我的博客网站前端是通过 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> 标签上(作用在 <pre> 标签上无效)。 实际效果：
PS：
完整的示例，原文阅读页面保存到本地即可看到源码。 网上有大把漂亮的模板，而我只钟意自己写的轮子，所谓弱水三千只取一瓢。
更多相关文章
- 面试官：如何实现一个乐观锁（小白都能看得懂的代码）
- java8中的一个骚操作-方法引用（使代码看起来很高大上）
- 戴耳机敲代码，我都听些啥？
- GitHub还真把所有代码埋到北极地下了，我特么bug都还没改呢 ...
- 如何解决Renault Can Clip代码不正确的问题？
- 如何合理的设计代码分层，论代码分层的设计之道
- 数字签名的原理是什么？这篇文章给你答案（java代码实现）
- java远程调用之RMI（终于可以自己写代码控制别人电脑了）