如果你想在自己的网页上,展示一段代码(任意的编程语言),并使其高亮,推荐使用highlight.js,它使用起来非常简单,不过,美中不足的是,它本身没有显示行号的功能。想要让代码高亮的同时也显示行号,那么这一篇教程也许会帮到你!
方法/步骤
1、自行进入highlight.js的官网,然后点击按钮“Getversion...”进入下载页面
2、选择你需要让代码高亮的编程语言。勾选比较常用的即可,比如HTML、CSS、JavaScript、PHP、C#、C++等等……然后在浏览器里向下拉滚动条,点击Download按钮
3、将下载好的文件解压缩到任意目录,新建一个demo.html
4、将下面的代码,全部复制粘贴到demo.html文件里,保存!<!DOCT孢亨槐溲YPEhtml><html><head><metachars髫潋啜缅et="utf-8"/><title>代码高亮并显示行号-百度ID:卿本老兔子</title><linktype="text/css"rel="stylesheet"href="styles/default.css"/><scriptcharset="utf-8"src="highlight.pack.js"></script><scripttype="text/javascript">hljs.initHighlightingOnLoad();</script></head><body><pre><codeclass="javascript">/*示例代码*/<script> functionshow_msg(a,b){ varmgs="卿本老兔子"; alert(msg); }</script></code></pre><scripttype="text/javascript">vare=document.querySelectorAll("code");vare_len=e.length;vari;for(i=0;i<e_len;i++){ e[i].innerHTML="<ul><li>"+e[i].innerHTML.replace(/\n/g,"\n</li><li>")+"\n</li></ul>";}</script></body></html>
5、在styles/default.css里追加一段代码,保存!.hljsul{ 盟敢势袂list-style:decimal;艘早祓胂 margin:00040px!important; padding:0}.hljsli{ list-style:decimal-leading-zero; border-left:1pxsolid#111!important; padding:2px5px!important; margin:0!important; line-height:14px; width:100%; box-sizing:border-box}.hljsli:nth-of-type(even){ background-color:rgba(255,255,255,.015); color:inherit}
6、演示效果如下图所示!(如果想要改变高亮效果的颜色,可在CSS文件里自行修改)