利用第三方JS脚本实现文章论坛内容中的编程代码高亮格式化效果

@Ta 02-06 23:21 398点击
首先在页面中载入第三方JS脚本和主题文件,如下三行:
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  
<script >hljs.initHighlightingOnLoad();</script>  
然后,将你的代码写入到以下标签中就可以实现代码高亮了:
<pre><code>你的代码</code></pre>
高亮的效果就如本帖内容大致,这个JS脚本会自动分析你的代码是哪种编程语言。
效果示例:
http://www.op112.com/blog/blog/148
回复列表(10)
  • 1
    @Ta / 02-07 10:13
    IP+1
    --------
    我是一名斗者,我正在被一名斗帝追杀,但我一点都不慌,因为他的马没我快,架!!!
  • 2
    @Ta / 02-07 11:29
    话说有没有更好看一点的代码高亮,并且前面自动加多少行的那种
  • 3
    @Ta / 02-07 15:17

    先收藏,等有空在把我的程序也添加一个
    残缺的记忆,美好的回忆(https://76wp.cn)

  • 4
    @Ta / 02-07 16:39

    这个咋样,可惜的是不能显示行数
  • 5
    @Ta / 02-07 22:57
    更新了一些东西,支持显示行数和一键复制代码,地址路由也更新了,效果展示新地址:http://www.op112.com/blog/148
  • 6
    @Ta / 02-08 00:16

    我用的prismjs ,挺好的

  • 7
    @Ta / 02-08 07:54
    @Curtion,嗯,你这个不错,支持显示行号
  • 8
    @Ta / 02-08 21:51
    @Curtion,我试了下,发现你提到的这个好像不支持自动检测语言类型啊
  • 9
    @Ta / 02-09 10:59

    @Op112_Com,code标签要自己加语言类型:.language-*,不能自动识别

  • 10
    @Ta / 02-09 18:09
    @Curtion,我还是决定使用highlight.js,因为它的缺点很容易弥补,引用我写的JS函数lineNumber()就可以显示行数了,各位有兴趣请移步http://www.op112.com/blog/148
添加新回复
回复需要登录

[聊天-公共聊天室] TabKey9:哧溜一嘴油,重庆小面加芥末@a676774305,