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