prettify实现html页面黑色高亮代码
头部引入prettify样式和js:
给body加onload="prettyPrint()"方法底部script代码:
window.onload=function()
{
prettyPrint();
}
$(function(){
prettyPrint();
$('pre').addClass("prettyprintlinenums");
})
效果:varcurrentTime=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:10px10px;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/xmltag-lightyellow*/
pre.atn{color:#bdb76b;font-weight:bold}/*attributename-khaki*/
pre.atv{color:#ffa0a0}/*attributevalue-pink*/
pre.dec{color:#98fb98}/*decimal-lightgreen*/
/*Specifyclass=linenumsonapretogetlinenumbering*/
preol.linenums{margin-top:5px;margin-bottom:5px;padding-left:20px;color:#AEAEAE}/*IEindentsviamargin-left*/
preli.L0,preli.L1,preli.L2,preli.L3,preli.L4,preli.L5,preli.L6,preli.L7,preli.L8,preli.L9{list-style-type:decimal;}
/*Alternateshadingforlines*/
preli.L1,preli.L3,preli.L5,preli.L7,preli.L9{}
@mediaprint{
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.linenumsolli,pre.prettyprint.linenumsolli{
padding-left:20px;
color:#bebec5;
font-size:14px;
font-family:"MicrosoftYaHei",Arial,Helvetica,sans-serif;
line-height:1.6rem;
margin-left:0;
}
.prettyprint.linenums,pre.prettyprint.linenums{
-webkit-box-shadow:inset40px00#3D4C53,inset41px00#464741;
-moz-box-shadow:inset40px00#3D4C53,inset41px00#464741;
box-shadow:inset40px00#3D4C53,inset41px00#464741;
}
prep>code{
margin:03px;
background:#ddd;
border:1pxsolid#ccc;
border-radius:2px;
color:rgba(0,0,0,0.6);
font-family:Menlo,Monaco,"AndaleMono","lucidaconsole","CourierNew",monospace;
}
prea>code{
margin:03px;
background:#ddd;
border:1pxsolid#ccc;
border-radius:2px;
color:#2a7ae2;
}
preli.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{list-style-type:decimal;}
/*新版*/附件demo下载:https://qiniu.tpxhm.top/prettify.zip注:样式可以根据自己需要调整边距,字体等。