侧边栏壁纸
  • 累计撰写 265 篇文章
  • 累计创建 140 个标签
  • 累计收到 16 条评论

目 录CONTENT

文章目录

为博客添加代码语法高亮

Sherlock
2016-01-09 / 0 评论 / 0 点赞 / 2229 阅读 / 0 字
温馨提示:
本文最后更新于2023-10-09,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
1.使用highlight.js

CSS 文件添加到 <head> 中,将 js 文件添加到页面底部 </body> 标签前面,这样就完成了 highlight.js 的引入。

CSS:

<link href="https://cdn.bootcss.com/highlight.js/9.0.0/styles/github.min.css" rel="stylesheet">  

JS:

<script src="https://cdn.bootcss.com/highlight.js/9.0.0/highlight.min.js"></script>  
<script >hljs.initHighlightingOnLoad();</script>  
2.使用SyntaxHighlighter

SyntaxHighlighter 配置稍微复杂一点,不过没好看。需要自己通过 autoloader 配置分发语言到不同的 js 文件。

CSS:

<link href="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet">  
<link href="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css" rel="stylesheet">  

JS:

<script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>  
<script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js"></script>  
<script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>  
<script>  
$(document).ready(function(){
    $('pre code').each(function() {
        var language = $(this).attr('class');
        if (language) {
            //  language-html    
            language = language.substring(9);
               $(this).addClass('brush:' + language);
        }
    });
    SyntaxHighlighter.config.tagName="code";
    SyntaxHighlighter.autoloader(
            ['js','jscript','javascript','https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js'],
            ['json','ini','bash','shell','https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js'],
            ['css','https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js'],
            ['xml','html','https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js'],
            ['sql','https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js'],
            ['java','https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js'],
            ['ruby','https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js']
        );     
    SyntaxHighlighter.all();
});
</script>  
0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区