为博客添加代码语法高亮

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>