kn007的个人博客
♥ You are here: Home > 软件与网络 > php > 推荐一个代码高亮项目 -- Prism JS

推荐一个代码高亮项目 -- Prism JS

by | 69 Comments

提醒:本文最后更新于 3397 天前,文中所描述的信息可能已发生改变,请仔细核实。

57ad6c27d1ebb06edcc438ab
Prism是一个轻量级并且简单易用的代码高亮JavasScript类库。

主站是:prismjs.com,Github地址:LeaVerou/prism

你可以通过Customize your download个性化定制,是个十分不错的选择和体验。

也可以通过Examples来查看一些预先示例的效果。

无论你是自己通过代码or框架制作的网站,抑或是Wordpress之类驱动的网站,都可以非常简单使用。只需通过加载js和css即可。

js核心,加上css和一些常用高亮语言,可能不会超过10K的总大小。

添加新语言,也非常简单,自己就可以定制。(通过code.language-xxx方式)

感觉这是个很不错的代码高亮项目,遂推荐给大家。

转载请注明转自:kn007的个人博客的《推荐一个代码高亮项目 -- Prism JS

donate
有所帮助?

Comments

69 Comments立即评论
  1. 回复

    html直接cp,以前用的那个插件体积太吓人了! :o

    1. MOD回复

      @zllz: 我也是用纯html。这个插件体积小,效率高

  2. LV1回复

    这个目测很多人用。。

    1. MOD回复
  3. LV1回复

    某贱人没叫我过来看看,但我自己决定非得来看看

    1. MOD回复

      @Betty: 然后最后发现没啥好看的。

    2. LV1回复

      @kn007: Feed这个导航栏旁的字体还是蛮好看的呀

    3. MOD回复

      @Betty: :o 好吧

  4. :roll: 用不上 点个赞

    1. MOD回复

      @hannah: 谢谢 :o

  5. 回复

    好想用,但是哪有中文的教程么?

    1. MOD回复

      @小二苘: :o 这还需要教程!?直接上官网选择你想高亮的语言,下载下来,在footer.php加载css和js,在要使用的地方,code class="language-css" p { color: red } /code(标签闭合括号被我去掉了)
      详细方法请看: http://prismjs.com/#basic-usage

    2. 回复

      @kn007: :o 代码小白,所以各种伸手,我拿去研究研究,谢谢啦

    3. MOD回复

      @小二苘: :o 额,没关系。。。这是女生的特权。。。
      其实官网比较清楚了。。。
      简单说就是下载两个文件,在网站加载这两个文件,然后就可以愉快的使用了。。。。

  6. 感觉不错,什么时候玩一玩。

    1. MOD回复

      @geekdai: 这是你新网站?

    2. @kn007: 哈哈,是的,瞎搞搞。每天加班回来,都没时间玩了!

    3. MOD回复

      @geekdai: :evil: 加班说明钱多多啊

    4. @kn007: 哪里,晚上加班都是免费的好吧,剥削劳动力啊! :cry: :cry: :cry: :cry:

    5. MOD回复

      @geekdai: 不是吧,那总有安慰的东西嘛 :razz:

    6. @kn007: 有毛线的安慰,你看我都是这个点到住的地方的。

    7. MOD回复

      @geekdai: 刚happy完回家? :o 注意身体哈。我在写博客历程

    8. @kn007: 就是写你啥时候开始玩博客,然后各个阶段是吗?

    9. MOD回复

      @geekdai: 是的。。算是吧

    10. @kn007: 不错不错,期待!

    11. MOD回复

      @geekdai: 2月1日开始发

  7. 回复

    不知博主知不知道文本模式下html的转义问题呢?

    1. MOD回复

      @晓庄: 很多种转义,不知你说的哪种。。。

    2. 回复

      @kn007: 就是在文本模式下贴html的代码,在前台会显示错误。只有在可视化模式下贴html才不会出问题。但是这样,整个代码的格式会乱了,会整体靠左。

    3. MOD回复

      @晓庄: 我这边没问题。

    4. 回复

      @kn007: 你直接在文本模式下贴html的代码,前台不会出现错乱嘛?

    5. MOD回复

      @晓庄: 不会啊,我一直习惯在文本模式。

    6. 回复

      @kn007: 晕,我的前台直接乱了。假如我贴个,主题里还有样式的话,就直接样式显示了。
      如果可以的话,可以提供下你用的js和css文件,让我测试下嘛?

    7. MOD回复

      @晓庄: 我直接在这里转换后贴的。你自己看看。
      https://kn007.net/code-highlight.html

    8. 回复

      @kn007: 嗯哼,你做了转换贴的啊。我直接贴。做了转换贴就没问题。

    9. MOD回复

      @晓庄: :mrgreen: 那是

    10. 回复

      @kn007: 你那个转换,转换了就能用了。这都不需要集成prism.js了。转换就做了样式了。
      挺喜欢prism的高亮样式的。想集成进去~

    11. MOD回复

      @晓庄: 那个太多太难改,麻烦。

    12. 回复

      @kn007: 准备集成下SyntaxHighlighter这个。就是js文件太多。

    13. MOD回复

      @晓庄: :o 慢慢折腾吧

    14. 回复

      @kn007: 是啊,够累的。还有一问题没解决,烦死了。
      集成东西好麻烦~

    15. 回复

      @kn007: 马勒戈壁,刚集成上去,贴个代码,文本模式下贴html是没问题了,但不知咋滴,我明明是->,到了前台显示-->,唉,放弃好了,直接用插件。

    16. MOD回复

icon_wink.gificon_neutral.gificon_mad.gificon_twisted.gificon_smile.gificon_eek.gificon_sad.gificon_rolleyes.gificon_razz.gificon_redface.gificon_surprised.gificon_mrgreen.gificon_lol.gificon_idea.gificon_biggrin.gificon_evil.gificon_cry.gificon_cool.gificon_arrow.gificon_confused.gificon_question.gificon_exclaim.gif