在vue中使用highlightjs-line-numbersjs实现代码高亮并且增加行号
目录
highlight.js
实现代码高亮是很容易的,有很多库都支持,比较有名的是highlightjs,它的使用方法是:
- 先引入css文件和js文件
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
- 再将你的代码用
<code>
包裹
<code>{{ 你的代码 }}</code>
- 再调用hljs的高亮函数,它的原理是找到所有的code标签,然后通过操作DOM,给你的代码设置高亮样式。
<script>
hljs.initHighlightingOnLoad();
</script>
highlightjs-line-numbers.js
hilightjs-line-numbers.js在highlight.js的基础上,给代码增加了行号,项目地址👇:
https://github.com/wcoder/highlightjs-line-numbers.js
它的原理是将highlight.js渲染结构改装成<table>
,第一列是行号,第二列才是代码。这种思路是非常棒的!
它的使用方法是在highlight.js的使用方法上加了两步:
- 除了引用highlight.js之外,还要引用highlightjs-line-numbers.js
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script src="../src/highlightjs-line-numbers.js"></script>
- 将你的代码用
<pre>
和<code>
包裹
<pre><code>{{ 你的代码 }}</code></pre>
- 调用
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad({
// singleLine:true,
// startFrom: 5,
});
</script>
在vue中使用
奶奶的,在vue的组件中引用这个库,发现总是不能正确调用。我试了好久,终于找到了一个很nice的方法,就是直接在public下的index.html
中引用,然后在组件中调用。
效果差强人意,但总算是把功能实现了
其它实现方法
在网上搜索,会发现还有另一种实现原理:使用vue.directive,自动在代码前面加一个<ul>
,显示行号;这种方法也可以实现,但是样式很难调整,容易出现行号错位。