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>
评论区