使用highlightjs做代码高亮

2018年11月7日11:34:27 6 406
前言后语

久伴之前发布过插件版本,但是久伴觉得一个代码高亮没必要使用插件

效果图

使用highlightjs做代码高亮

教程

去官方选择https://highlightjs.org/风格下载css样式和js,最好本地化
引用以下代码

<link rel="stylesheet"
      href="vs2015.css">
<script src="highlight.min.js"></script>

注意路径,你想使用什么风格就在引用的css那里更换名字,例如vs2015.css换成java.css
然后使用

<pre><code class="html">这里就是要显示高亮的代码</code></pre>

如果你是html语言想要高亮显示就在class类那里填写html如果你是java就填写java以此类推
如果想让代码自动高亮需要在引用的js和css下面加一段代码

<script>hljs.initHighlightingOnLoad();</script>
weinxin
微信公众号名称:IT青年时代
微信搜索IT青年时代或者扫描左边二维码进行关注,这样可以及时查看久伴博客每日内容推送
久伴

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:6   其中:访客  3   博主  3

    • avatar vultr 1

      交换链接吗

        • avatar 久伴  博主

          @vultr 来吧

        • avatar 林三 3

          我记得begin主题自带这个功能吧,不用去研究吧,不过它自带的没你那么亮,哈哈!

            • avatar 久伴  博主

              @林三 哈哈

            • avatar 青山 4

              其实知更鸟自带代码高亮的功能

                • avatar 久伴  博主

                  @青山 这个有很多样式啊