如何使用pre highlightjs插件

0人浏览 / 0人评论

调用 highlightjs 插件很简单,直接去官网下载(https://highlightjs.org/download/)

1.勾选语言

 

2.下载之后打开压缩包引入 highlight.min.js 文件,以及引入css文件里某一个css文件(随便一个就行),每个css都有不同的pre样式,看你具体喜欢那种

3.写一下js调用initHighlightingOnLoad方法

<link href="css包里的某一个css文件" type='text/css' rel="stylesheet" />

<div class="content">
	<pre>alert("东泰博客, http://www.dt2008.cn")</pre>
</div>

<script src="jQuery文件库"></script> 
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 
<script>
$(()=>{
	//在pre添加class hljs
	$(".content pre").addClass("hljs");
 })
hljs.initHighlightingOnLoad();
</script>

好了,这样就大功告成了

温馨提示:如果没有效果的话就两个原因

1.没有成功引入 highlight 的css或者js文件

2.被css优先级代替了,点击F12查找根源

全部评论