代码高亮与随机色块

发表于 | 分类于
jekyll代码高亮与随机色块

代码高亮

静态页面

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