bootstrap高亮显示代码,且横向滚动

2020-01-07   阅读(75)  

我的博客网站前端是通过 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:
完整的示例,保存页面到本地即可看到源码。

 

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

 

ConstXiong 备案号:苏ICP备16009629号-3