typecho（prismjs）代码美化，仿照苹果MAC教程 - 听风博客

安宇雨 - 随手采集
2020-09-10 14:26:58
随手采集
0000-未整理-等待研究

话不多说，直接开始代码吧

演示图：
[ 代码美化演示图

代码美化演示图

](https://owoii.com/usr/uploads/2019/11/3509446192.png)

我的选中的是些
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+c+csharp+cpp+aspnet+css-extras+markup-templating+git+go+java+php+jq+json+jsonp+json5+sql+python+plsql&plugins=line-numbers+toolbar+show-language+copy-to-clipboard
当然，这个就自己去选择就好了。
我选的主题是黑色款，也可以和我一样这样选择

关于prismjs的使用教程，就不介绍了，直接是美化开始

`/在下载的css最后面添加/

/添加修改/
.code-toolbar{
position: relative;
background: #000;
padding-top: 20px;
border-radius: 5px;
}

pre[class*="language-"].line-numbers {
position: relative;
padding: 3px; /修改/
padding-left: 3.8em;
counter-reset: linenumber;
max-height: 400px;/修改/
background: #151515;/修改/
border: none;
}
.pre-mac{
position: absolute;
top: 7px;
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;
}`