使用highlightjs做代码高亮

  • A+
所属分类:前端
前言后语

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

效果图

使用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青年时代或者扫描左边二维码进行关注,这样可以及时查看久伴博客每日内容推送
avatar

发表评论

:?::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 久伴  博主

                  @青山 这个有很多样式啊