分享

百度编辑器UEditor使用highlightjs-line-numbers.min.js高亮显示代码行号

发布于:2020-04-12 22:15    阅读次数:55    作者:云码素材    分类:建站教程    关键词:ueditor  行号  高亮显示代码  

百度编辑器UEditor使用highlightjs-line-numbers.min.js高亮显示代码行号,上篇给大家分享了使用highlight.js高亮显示代码,但是没有行号,不太完美,又查找了一下资料,发现还有一个highlightjs-line-numbers.min.js,专业用来显示行号的。


总结一下代码,分享给大家:


一.下载highlightjs-line-numbers.min.js


下载地址:https://github.com/wcoder/highlightjs-line-numbers.js


二.在你的代码里收入highlightjs-line-numbers.min.js

<script type="text/javascript" src="__TMPL__/public/assets/highlight/highlightjs-line-numbers.min.js"></script>


三.加载代码

<script  type="text/javascript">
	hljs.initLineNumbersOnLoad();
</script>

这里有个注意事项,hljs.initLineNumbersOnLoad();要放置到hljs.initHighlightingOnLoad();后面。


四.定义样式代码

<style type="text/css">
/* for block of numbers */
	pre code td.hljs-ln-numbers {
	text-align: center;
	color: #9c9c9c;
	border-right: 0.5px solid #9c9c9c;
	vertical-align: top;
	padding-left: 0.5rem;
	padding-right: 0.8rem;
	}
	/* for block of code */
	pre code td.hljs-ln-code {
	padding-left: 1rem;
	}
</style>


五.运行效果如下:

highlightjs.jpg

推荐源码
查看更多

免费领
签到客服赚钱 反馈 回顶部