Aixj


愿世界安康,愿你我皆好!

进入博客 >

Aixj

Aixj

愿世界安康,愿你我皆好!
  • 文章 16篇
  • 吐槽 19条
  • 分类 2个
  • 标签 26个
2021-10-16
290 ℃
已收录

typecho(prismjs)代码高亮美化

本文最后更新于2021年10月16日,已超过251天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

关于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>

标签: 美化 代码高亮

7

- THE END -

非特殊说明,本文版权属于 admin

本文采用《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权


暂无评论 >_<