使用prism.js代码高亮
>实现代码块高亮显示效果
head加入
```html
```
footer加入
```html
```
美化 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 = '';
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;
}
```