使用prism.js代码高亮

AI摘要：本文介绍了如何使用prism.js代码高亮实现代码块高亮显示效果。首先，在head标签中加入prism.js和prism.css的引用，然后在footer中加入Prism.highlightAll()的代码。这样就可以实现代码块的高亮显示效果了。

实现代码块高亮显示效果
head加入

<script src="https://cdnjs.sgcd.net/code-highlight/js/prism.js"></script>
<link rel="stylesheet" href="https://cdnjs.sgcd.net/code-highlight/css/prism.css"  />

footer加入

<script>Prism.highlightAll()  </script>

美化 mac 风格

在js中加入

var container = document.getElementsByTagName('main')[0];
var codeBlocks = container.getElementsByTagName('pre');
Array.from(codeBlocks).forEach(function(item) {
  item.style.whiteSpace = 'pre-wrap';
  // Add pre-mac element for Mac Style UI
  var preMac = document.createElement('div');
  preMac.classList.add('pre-mac');
  preMac.innerHTML = '<span></span><span></span><span></span>';
  item.parentNode.insertBefore(preMac, item);
  item.classList.add('line-numbers');
});

css

.pre-mac {
  position: relative;
  margin-top: -7px;
  top: 21px;
  left: 10px;
  width: 100px;
  z-index: 99;
}
.pre-mac > span {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.pre-mac > span:nth-child(1) {
  background: red;
}
.pre-mac > span:nth-child(2) {
  background: sandybrown;
}
.pre-mac > span:nth-child(3) {
  background: limegreen;
}