######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>

Q.E.D.


Think Big, Act Small