博客园设置类似sublime高亮代码

需要用到highlight.js,需要翻墙,官网为https://highlightjs.org,首先官网的只有默认主题包,我们需要自定义主题包需要去它的github上找,地址为https://github.com/isagalaev/highlight.js,我用的主题是monokai-sublime.css

所以呢在github上把这个css文件给copy下来,然后把它的js文件也copy下来。上传文件到博客园,不要用官网的cdn,因为样式不能自定义,还要担心哪天地址不能用了

<link rel="stylesheet" href="http://files.cnblogs.com/files/JAYIT/highlights.min.css">
<script type="text/javascript" src="http://files.cnblogs.com/files/JAYIT/highlight9.3.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 上面这段代码是我的引用 

 我们在要高亮代码的时候改成将<pre class="></pre> 改成<pre><code class=""></code></pre>注意这个html是指当前你要高亮的语言名如java,c#,c++等。如果呢你不想用的话,这玩意是允许你自定义的,首先在头部写一段声明js,记得要引用jquery

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
}); 

那你想要用br来直接代替来声明代码高亮怎么办呢?加上下面这段js

hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

不使用它的类则设置nohighlight

<pre><code class="nohighlight">...</code></pre>

  

  

原文地址:https://www.cnblogs.com/JAYIT/p/5433309.html