好用的代码高亮插件highlight.js
2019年3月14日1.下载highlight.js高亮插件
进入官网你会看见获取代码这里是的版本是9.15.6 。
然后你会看见有三种获取代码的方式,第一种使用过cdn第二种是直接下载代码第三种是npm进行安装,这里我们介绍第二种下载。
首先先勾选你要高亮的语言勾选完成后在下方有一个下载,
到这里下载就完成了。
2.配置highlight.js
先不要着急引入样式,我们先看看highlight.js给我提供的85种样式
我个人还是比较喜欢a11ydar你们可以按照自己的喜好进行挑选,然后记住名字,到下载的文件中进行引入,下面就是下载解压后的文件,点击进入styles`中
你会看到,很多css,把你从官网上选中的名字记住然后从这里找到,最后引入。
接下在开始配置了。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<link rel="stylesheet" href="{{ asset('css/a11y-dark.css') }}"> #引入挑选好的css <script src="{{ asset('js/highlight.pack.js') }}"></script> #引入高亮js <script>hljs.initHighlightingOnLoad();</script> #加载高亮js <script type="text/javascript"> #配置一下 $(document).ready(function() { $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); }); </script> |
配置完成后我们就可以使用了
|
1 2 3 4 |
<pre> <code class="python"> #注意class类中的语言 </code> </pre> |
