使用prism给代码高亮
先去prism官网配置你的js和css,然后下载,加到你的网页中去,如:
<link rel='stylesheet' href='prism.css' type='text/css' media='all' />
<script type='text/javascript' src='prism.js'></script>
在对应的代码添加标签:
<pre class="line-numbers language-html">
<code class=" language-html">
代码
</code>
</pre>
如果是wordpress,在functions.php添加以下函数就有对应按钮了:
// 添加代码高亮按钮
function appthemes_add_quicktags(){
if (wp_script_is('quicktags')){
?>
<script>
var aLanguage = ['html', 'css', 'javascript', 'php', 'json', 'sql', 'vim', 'nginx','shell'];
for( var i = 0, length = aLanguage.length; i < length; i++ ) {
QTags.addButton(aLanguage[i], aLanguage[i], '\n<pre class="line-numbers language-' + aLanguage[i] + '"><code class="language-' + aLanguage[i] + '">\n', '\n</code></pre>\n');
}
</script>
<?php
}
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags');