typecho(prismjs)代码美化,仿照苹果MAC教程

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

演示图:

代码美化演示图

我的选中的是些
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;
}

然后</body>前面添加JS

<script>
    //这个是开启行号
    $("pre").addClass("line-numbers").css("white-space", "pre-wrap");
    
    //等加载完添加mac的三个红绿灯的点
    window.onload = function() {
        $("pre").before('<div class="pre-mac"><span></span><span></span><span></span></div>');
    }
</script>

方法思路大概是这样,大家可以自己举一反三。

Last modification:November 29th, 2019 at 01:55 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 听风与你

    补充一点,一定要选择工具栏和行号,不然很丑的。

Leave a Comment