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

需要用到highlight.js,需要FQ,官网为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>

  

  

时间: 2024-08-25 17:28:41

博客园设置类似sublime高亮代码的相关文章

博客园Markdown模式的MATLAB代码高亮方案

前言 博客园随笔写作可以使用 Markdown 进行编辑,当展示代码时,可以使用下面的语法来对代码块进行展示: ?```language code-content ?``` 一般来说,指明了 language 后,应该是可以是实现语法高亮的.其基本原理就是将代码中的 关键字 .变量 .函数 等待字符做正则化匹配,将纯文本的代码内容分块,与固定语法内容的着色方案(css样式)对应上. 然鹅!!大部分编程语言都能实现较好的高亮,而 Matlab 效果却很差,语法样式是错误的!看着很不舒服. 就像下面

利用Word来发布博客到博客园(onenote类似)

设置步骤: 选择左上角的按钮,选择发布>博客. 点击"管理帐户",在帐户管理窗口中选择"新建", 在博客服务商中选择"其他". 在API中选择MetaWeblog. 在博客文章URL中博客园的MetaWeblog访问地址,格式为:http://www.cnblogs.com/你的用户名/services/metaweblog.aspx. 在用户名与密码中与中输入你的Blog用户名与密码. 利用Word来发布博客到博客园 Word中使用代码高

博客园安装jQuery返回顶部代码教程

博客园支持上传js文件,这给博主提供了很大的拓展空间,例如返回顶部的jQuery代码. 首先先上传返回顶部图片到博客园 topback.gif: 然后在scrolltopcontrol.js中找到topback.gif的地址,将其替换成上传至博客园中的文件地址(右键topback.gif → 复制链接地址) scrolltopcontrol.js 代码: var scrolltotop={ setting:{ startline:100, //起始行 scrollto:0, //滚动到指定位置

实现Iapp软件截取博客园随笔内容更改事件代码

代码如下           还没有完全写完, t() { .线程一.1 hs("http://www.cnblogs.com/BlmVac/p/5551737.html",null,null,codebh) f(codebh?"博客园") { .判断是否能截取网络数据1.1 sj(codebh,"是否提示*","*",proSwit) .tw(proSwit) f(proSwit==0) { .判断proSwit.1 sj(

博客园设置访问数量统计-小试牛刀

当访问到别人的博客时有个访问数量统计是不是觉得很奇妙. 其实设置起来也很简单,就是一个提供统计访问量的小网站,在上面注册使用就行了. 下面我就来记录下我是如何一步做到的: 1.网上搜索方法啦,找到大佬们提供的博客记录,也就是这个网站:http://www.amazingcounters.com 2.打开发现是英文的,没关系,用谷歌网站自带翻译神器,页面一下子就变成可读页面了 3.操作步骤网站上也提供了,总共分三步,第一步选择自己的风格,然后滑到网页底部,点击步骤2按钮 4.然后进行注册,注意这里

博客园设置背景音乐【不需要额外服务器或第三方音乐平台】

一.申请侧边公告栏 js 权限(页首和页脚都只支持html) 这里就不详说,这个很多人都有说,百度一下即可. 二.选取音乐 你喜欢的音乐,只要浏览器 Audio 标签支持即. 三.上传音乐文件 在博客园管理界面的上传文件出上传你的音乐,看到关键点了没[之前图片缩放后看不清,我给重新截图了]?文件后缀名不是 mp3 等音乐文件后缀名,而是 .js 有木有! 重点就是在这里,你需要将自己的音乐文件该成这里允许的格式上传即可,然后通过 js 创建 DOM 对象,创建一个 Audio 实例即可使用. 在

博客园-设置底部个性化签名格式

设置个性化签名格式,修改成自己喜欢的内容,使我们的签名与众不同,把代码贴在“页面定制CSS代码”框中,当然你可以修改代码,改变样式,代码如下: 页面定制CSS代码: /* 设置签名格式 定制css样式 */ #MySignature { display: none; background-color: #B2E866; border-radius: 10px; box-shadow: 1px 1px 1px #6B6B6B; padding: 10px; line-height: 1.5; te

博客园设置自定义页面样式

首先是背景图片,这个修改对模版而言都是通用的 body { background:url('URL') no-repeat top center fixed;} 这里图片路径可以上传到博客本地图片,图片就有了网上路径 然后是正文模块在整体背景中的浮动 #home { margin:0px auto; width:1000px; } 一个控制模块顶部和背景距离 一个控制模块和宽度{当页面缩放的宽度远远小于你设定的宽度,右边搜索框及其他组件都会移动到底层,不利于使用,最好设置一个合适的宽度} 正文模

在博客园设置访问人数

很简单:首先先 1.先到http://www.amazingcounters.com/sign-up.php   这个地址去申请一个帐户,申请时填写好自己的资料,可以选择访问总量或者人数,如果两个都要的话,貌似要设置两个账户. 2.在上述网站的"Get HTML Code See Statistics"菜单中找到需要添加的HtmLCOde: 3.进入博客园后台管理- > "设置" 选项,在公告编辑栏中添加你的HtmlCode,比如我的是: 1 <div