之前觉得cnblog排版乱. 而csdn对word兼容性较好一些.所以就转到csdn了. 后来看到别人的cnblog排版挺好,如
等效果.
参考资料 http://www.cnblogs.com/mingjiatang/p/5954352.htmlhttp://www.cnblogs.com/solontan/p/3502072.htmlhttp://blog.liuxianan.com/custom-cnblogs-highlight-theme.htmlhttps://github.com/gzdaijie/cnblogs_markdown_optimize 后感爱折腾,有强迫症,尝试一些东西时候总是受尽折磨.尤其是类似css ps等样式图片等一些东东的时候
本次实现了可能比较丑陋些,有时间了在完善一下吧.
使用到的代码 \页面定制CSS代码/* 标题开始优化 */#cnblogs_post_body{ color: black; font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 15px;}#cnblogs_post_body h1 { background: #333366; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 23px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222;}#cnblogs_post_body h2 { background: #006699; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 20px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222;}#cnblogs_post_body h3 { background: #2B6695; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 18px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222;}#cnblogs_post_body h4{ background: #2B6600; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 16px; font-weight: bold; height: 24px; line-height: 23px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222;}/* 标题优化完成 */ \页脚html代码<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><link rel="external nofollow" href="http://files.cnblogs.com/files/mingjiatang/mystyle.css" rel="stylesheet"><script type="text/javascript" src="http://files.cnblogs.com/files/mingjiatang/mycnblogs.js"></script><script type="text/javascript" src="http://files.cnblogs.com/files/mingjiatang/mystyle.js"></script><script type="text/javascript"> var setMyBlog = { setCopyright: function() { //设置版权信息，转载出处自动根据页面url生成 var info_str = '<p>作者：<a target="_blank">@狮子XL</a><br>'+ '本文为作者原创，转载请注明出处：<a class="uri"></a></p><hr></hr>', info = $(info_str), info_a = info.find("a"), url = window.location.href; $(info_a[0]).attr("href","http://weibo.com/imaxiaolang"); $(info_a[1]).attr("href",url).text(url); $("#cnblogs_post_body").prepend(info); }, setCodeRow: function(){ // 代码行号显示 var pre = $("pre.sourceCode"); //选中需要更改的部分 if(pre && pre.length){ pre.each(function() { var item = $(this); var lang = item.attr("class").split(" ")[1]; //判断高亮的语言 item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉 item.removeClass().addClass("brush: " + lang +";"); //根据语言添加笔刷 SyntaxHighlighter.all(); }) } }, setAtarget: function() { // 博客内的链接在新窗口打开 $("#cnblogs_post_body a").each(function(){ this.target = "_blank"; }) }, setContent: function() { // 根据h2、h3标签自动生成目录 var captions_ori = $("#cnblogs_post_body h2"), captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(), content = $("<blockquote><h4>目录</h4></blockquote>"); $("#cnblogs_post_body").prepend(content.append(captions)); var index = -1; captions.replaceWith(function(){ var self = this; if(self.tagName == "H2" || self.tagName == "h2"){ // 设置点击目录跳转 index += 1; $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]); return '<a rel="external nofollow" href="#_caption_' + index + '"><strong>' + self.innerHTML + '</strong></a><br>'; } else { return self.innerHTML + "<br>"; } }); }, runAll: function() { /* 运行所有方法 * setAtarget() 博客园内标签新窗口打开 * setContent() 设置目录 * setCopyright() 设置版权信息 * setCodeRow() 代码行号显示 */ this.setAtarget(); this.setContent(); this.setCopyright(); this.setCodeRow(); } } setMyBlog.runAll();</script>