html页面有个黑色的点,prettify实现html页面黑色高亮代码

头部引入prettify样式和js：

给body加οnlοad="prettyPrint()"方法

底部script代码：

window.onload = function ()

{

prettyPrint();

}

$(function() {

prettyPrint();

$('pre').addClass("prettyprint linenums");

})

效果：

var currentTime = Math.floor(parseInt(audio.currentTime)/60)+":"+(parseInt(audio.currentTime)%60/100).toFixed(2).slice(-2); 

console.log(Math.floor(parseInt(currentTime)/60)+":"+(parseInt(currentTime)%60/100).toFixed(2).slice(-2));

$("#current").html(currentTime);

}

pre标签代码换行样式：/*新版*/

pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;margin-bottom:1.5rem}

pre.prettyprint {display:block;background-color:#333;padding:10px 10px;font-weight:normal;font-size:14px}

pre .nocode { background-color: none; color: #000 }

pre .str { color: #ffa0a0 } /* string  - pink */

pre .kwd { color: #f0e68c; font-weight: bold }

pre .com { color: #87ceeb } /* comment - skyblue */

pre .typ { color: #98fb98 } /* type    - lightgreen */

pre .lit { color: #cd5c5c } /* literal - darkred */

pre .pun { color: #fff }    /* punctuation */

pre .pln { color: #fff }    /* plaintext */

pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */

pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */

pre .atv { color: #ffa0a0 } /* attribute value - pink */

pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */

pre ol.linenums { margin-top: 5px; margin-bottom: 5px; padding-left:20px;color: #AEAEAE } /* IE indents via margin-left */

pre li.L0, pre li.L1, pre li.L2, pre li.L3, pre li.L4, pre li.L5, pre li.L6, pre li.L7, pre li.L8, pre li.L9 { list-style-type: decimal;}

/* Alternate shading for lines */

pre li.L1,pre li.L3,pre li.L5,pre li.L7,pre li.L9 { }

@media print {

pre.prettyprint { background-color: none }

pre .str, code .str { color: #060 }

pre .kwd, code .kwd { color: #006; font-weight: bold }

pre .com, code .com { color: #600; font-style: italic }

pre .typ, code .typ { color: #404; font-weight: bold }

pre .lit, code .lit { color: #044 }

pre .pun, code .pun { color: #440 }

pre .pln, code .pln { color: #000 }

pre .tag, code .tag { color: #006; font-weight: bold }

pre .atn, code .atn { color: #404 }

pre .atv, code .atv { color: #060 }

}

.prettyprint.linenums ol li, pre.prettyprint.linenums ol li {

padding-left: 20px;

color: #bebec5;

font-size:14px;

font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;

line-height: 1.6rem;

margin-left: 0;

}

.prettyprint.linenums, pre.prettyprint.linenums {

-webkit-box-shadow: inset 40px 0 0 #3D4C53,inset 41px 0 0 #464741;

-moz-box-shadow: inset 40px 0 0 #3D4C53,inset 41px 0 0 #464741;

box-shadow: inset 40px 0 0 #3D4C53,inset 41px 0 0 #464741;

}

pre p > code{

margin: 0 3px;

background: #ddd;

border: 1px solid #ccc;

border-radius: 2px;

color: rgba(0,0,0,0.6);

font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;

}

pre a > code{

margin: 0 3px;

background: #ddd;

border: 1px solid #ccc;

border-radius: 2px;

color: #2a7ae2;

}

pre li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 { list-style-type: decimal;}

/*新版*/

注：样式可以根据自己需要调整边距，字体等。