google-code-prettify 代码高亮

google-code-prettify

GitHub 项目地址 演示地址

功能:语法高亮

引入文件:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.css">
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>

更多风格样式文件请参考演示地址

HTML:

<pre class="prettyprint linenums lang-php">…</pre>

linenums:添加行号(不是必须的)
lang-php:特定语言(不是必须的)

JavaScript:

<script>window.onload = function() { prettyPrint(); }</script>

或者可以直接在文档末尾引入:

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

还可以添加主题样式,用法

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer></script>

run_prettify.js 文件包含了 JS 文件并执行调用

如果不想在每个<pre>元素里添加 prettyprint 类,可通过批量添加:

$(function() {
    //代码高亮
    $(‘pre’).each(function() {
        if(!$(this).hasClass(“prettyprint”)) {
            $(this).addClass(“prettyprint”);
        }
    });
})

如果行号显示不正常,可修改

<style type=”text/css”>
ol.linenums {
    padding-inline-start: 40px; 
}
.linenums li, 
li.L0, li.L1, li.L2, li.L3, 
li.L5, li.L6, li.L7, li.L8 { 
    list-style-type: decimal !important 
}
<style>
赞(0) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...