highlight.js 编程语言代码高亮显示js插件,支持20多种语言


highlight.js 编程语言代码高亮显示js插件,支持20多种语言

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["highlight.pack", "highlightstyles/default"], function() {
               hljs.initHighlightingOnLoad();
            });
        });
    </script>
</head>
<body>

    <pre><code>
<script id="bfwone" data="dep=jquery.17" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone-min.js"></script></code>
    </pre>
    id必须为bfwone,data中数据以&隔开,其中dep表示bfwone加载完自己后首先加载这些依赖库,可以加载多个,以|分开,jb表示云端的js库地址,cb表示云端的样式库地址,err=1表示打开调试模式,ujb表示用户自定义的local
    js库地址,ucb表示用户定义的local
    样式库地址,loadjs表示加载完依赖库后第一个加载的用户自定义脚本,loadcss表示动态加载用户样式
</p>
<p>
    第二步按需加载js插件
</p>
<p>


    <pre><code >
<script type="text/Javascript">
        bready(function() {
        use(["colpick", "colpick"], function() {//第一个参数是js插件名称,第二个参数是插件css名称,第三个参数默认是remote,就是加载云端的插件与样式,如果改为本地,可以写local
        $('#picker').colpick({
        flat: true,
        layout: 'hex',
        submit: 0
        });
        });
        });
        </script>
        <div id="picker">
        时间选择器
</div></code>
    </pre>
</body>
</html>

官方网站:https://highlightjs.org/
立即下载highlight.js查看所有js插件

网友评论0

程序员在线工具箱