先看效果图：

那代码高亮简直好看得不行啊有木有？你们是不是也想自己定义一下？

接下来我就告诉你该怎么自定义自己博客的主题样式（估计很多人也会，主要着重介绍一下那个代码高亮的插件，嘿嘿）

第一步：改默认样式；

点击你博客园上面的导航栏中的『管理』，然后再点击「设置」

看到这个没？页面定制css,你把你的CSS样式写到这里来，这里的样式会覆盖默认的样式。

那该怎么写这个样式呢？就在你博客首页打开控制台找你想要更改的地方，博客园的主题一般是用id选择器的。你可以先再控制台右侧更改css，先看看效果，等你觉得效果差不多了就可以复制到那个设置里面去。

为了美观，我就把博客园下面的广告给去掉了，譬如这样：

#ad_t2 ,#ad_c1,#under_post_news,#ad_c2,#under_post_kb,#blogTitle,.postSeparator,.dayTitle{
   display:none;}

然后你们可以根据自己的喜好更改样式，我自己主题的代码就不贴出来了，你们自己去研究吧。

实现代码高亮

接下来就是要介绍一下怎么实现这个代码高亮了，这里我用到的是google的prettify插件，效果如下：

//这个是随便找的代码var domain = require('domain');var request = require('request');function async_error() {    setTimeout(function(){        var r = Math.random() * 10;        console.log("random num is " + r);        if (r > 5) {            throw new Error("async: random num" + r + " > 5");        }    },10)}function sync_error() {    var r = Math.random() * 10;    console.log("sync num is " + r);    if (r > 5) {        throw new Error("sync: random num" + r + " > 5");    }}var d = domain.create();d.on('error',function(err){    console.log('你错了',err);    // return;});setInterval(function () {   d.run(async_error);    // d.run(sync_error);}, 1000)

那怎么使用呢？我是先向博客园申请了js代码的权限，申请入口还是在刚刚那个【设置】里：

我这里是批准了所以显示支持js代码，你们要想实现这个代码高亮，那就得先申请（希望博客园的管理员别打我 —..— ）

然后复制下面代码到【博客侧边栏公告】里：

如果现在发布并刷新页面，其实可以看到你的博客代码部分可能发生了高亮，但是还有些小地方要修改，在【页面定制css】中加入如下代码：

/*代码高亮部分*/.cnblogs_code{
   border:none;background:none;padding:0;}#cnblogs_post_body ol {
   padding-left:7px;}.cnblogs_code div{
   display:none;}.postBody li, .postCon li{
   margin-bottom:0;}.prettyprint, pre.prettyprint{
   margin:0 !important;}.cnblogs_code span{
   font-size:14px !important;}

好了，差不多大功告成了。但是这个代码高亮还要使用下面左边（红框）的那个插入代码才有用

对于你以前用右边那个插入代码的不生效。

还有用红框那个插入代码时尽量不要选择【全部折叠】、【显示行号】、【行内代码】，会有样式变化。

如果有不懂或者不好的地方可以评论我，我会及时回答的。

最后，来看看我的github上关于prettify的使用介绍吧：

再补充一点：如果你觉得这个代码高亮主题不好看，你可以在这个网站上找自己喜欢的：