代码高亮
静态页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <link
href="http://apps.bdimg.com/libs/prettify/r298/prettify.css"
rel="stylesheet"
type="text/css"
media="all"
/>
<script
src="http://apps.bdimg.com/libs/prettify/r298/prettify.js"
type="text/javascript"
></script>
<script>
function prettyFunc() {
let preList = document.querySelectorAll("pre");
preList.forEach((item) => {
item.className += " prettyprint";
item.setAttribute("style", "overflow:auto");
});
window.prettyPrint && window.prettyPrint();
}
prettyFunc();
</script>
|
注意
–如果引用从google下载js一定不能修改目录结构把所有的js都引进来，而不是只引prettify.js
–比较好的方法是：从百度的静态资源库中直接引用
Vue
当我们的需要高亮的地方会变的时候，我们再次高亮的时候要把之前渲染的内容清除掉。
1
2
3
4
5
6
7
8
9
10
11
12
| prettyFunc () {
let preDom = document.querySelector("pre");
if (preDom.classList.contains("prettyprinted")) {
preDom.classList.remove("prettyprinted");
}
if (preDom.classList.contains("prettyprint")) {
preDom.innerHTML = `<code>${this.targetCodeStr}</code>`;
}
preDom.classList.add("prettyprint");
preDom.setAttribute("style", "overflow:auto");
window.prettyPrint && window.prettyPrint();
},
|
随机色块
1
2
3
4
5
6
7
8
9
10
11
12
13
| function randomColor() {
var colorArray = [ "#99CCFF", "#FFCC00", "#FF9966", "#66CCCC", "#99CCCC", "#CCFF99", "#99CC66", "#FF9900", "#0099CC", "#FF9966" ];
var tempColor = 0;
var randomNum = 0;
$(".main-article li").each(function(i, item) {
randomNum = Math.floor(Math.random() * colorArray.length);
while (tempColor == randomNum) {
randomNum = Math.round(Math.random() * colorArray.length);
}
$(item).css("background", colorArray[randomNum]);
tempColor = randomNum;
});
};
|
.main-article li改为进行随机的对应的id或class