美化CSDN博客基于MarkDown写的文章-图片100%宽度、代码高亮

转载请注明出处：

http://blog.csdn.net/gane_cheng/article/details/52244277

http://www.ganecheng.tech/blog/52244277.html （浏览效果更好）

最近开始使用CSDN写博客，一来就赶上MarkDown编辑器，所见即所得的编写方式，深得我心。写第一篇的时候还有点不适，现在写了10篇了，慢慢的开始适应了。

但是第一次写的时候就觉得有两点不爽的地方，我可不是那么容易将就的人，别以为我真的会去适应。

插入的图片在预览的时候可以完全显示出来，在文章详情页面却最多只有602px宽度



代码显示和普通文本基本没有区别，不够高亮



不能忍！ 那就去改变啊！



先放一张美化后的效果图。



如果现在已经等不及了，可以直接下载插件来体验一下 http://download.csdn.net/detail/gane_cheng/9607031

下载crx文件之后，打开谷歌浏览器的扩展程序页面，然后把crx文件拖进去，刷新博客页面即可产生效果。

是不是感觉好很多，我做了什么呢？换了字体和配色，字体使用了Consolas等宽字体，关键字高亮，和IDE一样的风格。

本文当然不会介绍这么简单的东西，要有一点深度才行。什么才是有深度的呢，我们自己来写一个谷歌浏览器插件，接下来就跟着我一步一步做吧。

第一步 阅读谷歌浏览器插件开发文档

万事开头难，今天下午之前我也不曾想过我的第一个谷歌浏览器插件就这样诞生了。本文虽然是为了美化CSDN博客而生的，但是当你进行到最后一步的时候，你会发现，只要是网页，没有你改不了的。

开发文档：http://open.chrome.360.cn/extension_dev/overview.html

其实也不用看，直接到第二步吧。

第二步 编辑manifest.json文件

新建一个文件manifest.json。在文件里面加入下面的代码。

{
// 必须的字段
"name": "CSDNBigPicture",
"version": "1.0.0.0",
"manifest_version": 2,
// 建议提供的字段
"icons":
{
"16": "CSDN.png",
"48": "CSDN.png",
"128": "CSDN.png"
},
"description": "Make the pictures 100% width , which is in the content of CSDN Blog . Always updating site：https://github.com/ganecheng/CSDNBigPicture",
"content_scripts": [
{
"matches": ["http://blog.csdn.net/*"],
"css": ["marxico.css"],
"js": ["jquery-3.1.0.min.js", "myscript.js"]
}
]
}

三个必须选的字段：

name：你的插件的名字

version：你的插件的版本号

manifest_version：chrome18之后要求必须为2，以后会不会加，暂不知道

可选的字段非常多，这里介绍两个：

icons：插件的图标，分为16,28,128三种规格，单位是px，最佳格式为PNG，因为对透明支持最好

description：插件的描述信息，可以写上插件的主要功能

重头的字段来了，content_scripts，Content Scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。这也是本插件实现的方式。

matches：插件适用的页面

css：引入到页面的CSS，将在页面的DOM树创建和显示之前，按照定义的顺序依次注入。

js：引入到页面的JavaScript，默认在页面的DOM加载完毕之后，按照定义的顺序依次注入。

第三步 编辑CSS文件

创建marxico.css文件，和manifest.json在同一目录。在CSS文件中编写你想要的样式，需要注意的是，如果原来的页面中已经有相同的定义了，那么原来页面的CSS样式会覆盖你写的CSS样式。

.hljs-light .hljs {
background-color: #f0f0f0
}

.hljs-light .hljs, .hljs-light .hljs-subst, .hljs-light .hljs-tag .hljs-title,
.hljs-light .lisp .hljs-title, .hljs-light .clojure .hljs-built_in,
.hljs-light .nginx .hljs-title {
color: #000
}

.hljs-light .hljs-string, .hljs-light .hljs-title, .hljs-light .hljs-constant,
.hljs-light .hljs-parent, .hljs-light .hljs-tag .hljs-value,
.hljs-light .hljs-rules .hljs-value, .hljs-light .hljs-rules .hljs-value .hljs-number,
.hljs-light .hljs-preprocessor, .hljs-light .hljs-pragma, .hljs-light .haml .hljs-symbol,
.hljs-light .ruby .hljs-symbol, .hljs-light .ruby .hljs-symbol .hljs-string,
.hljs-light .hljs-aggregate, .hljs-light .hljs-template_tag,
.hljs-light .django .hljs-variable, .hljs-light .smalltalk .hljs-class,
.hljs-light .hljs-addition, .hljs-light .hljs-flow, .hljs-light .hljs-stream,
.hljs-light .bash .hljs-variable, .hljs-light .apache .hljs-tag,
.hljs-light .apache .hljs-cbracket, .hljs-light .tex .hljs-command,
.hljs-light .tex .hljs-special, .hljs-light .erlang_repl .hljs-function_or_atom,
.hljs-light .asciidoc .hljs-header, .hljs-light .markdown .hljs-header,
.hljs-light .coffeescript .hljs-attribute {
color: white
}

.hljs-light .smartquote, .hljs-light .hljs-comment, .hljs-light .hljs-annotation,
.hljs-light .hljs-template_comment, .hljs-light .diff .hljs-header,
.hljs-light .hljs-chunk, .hljs-light .asciidoc .hljs-blockquote,
.hljs-light .markdown .hljs-blockquote {
color: #888
}

.hljs-light .hljs-number, .hljs-light .hljs-date, .hljs-light .hljs-regexp,
.hljs-light .hljs-literal, .hljs-light .hljs-hexcolor, .hljs-light .smalltalk .hljs-symbol,
.hljs-light .smalltalk .hljs-char, .hljs-light .go .hljs-constant,
.hljs-light .hljs-change, .hljs-light .lasso .hljs-variable,
.hljs-light .makefile .hljs-variable, .hljs-light .asciidoc .hljs-bullet,
.hljs-light .markdown .hljs-bullet, .hljs-light .asciidoc .hljs-link_url,
.hljs-light .markdown .hljs-link_url {
color: #080
}

.hljs-light .hljs-label, .hljs-light .hljs-javadoc, .hljs-light .ruby .hljs-string,
.hljs-light .hljs-decorator, .hljs-light .hljs-filter .hljs-argument,
.hljs-light .hljs-localvars, .hljs-light .hljs-array, .hljs-light .hljs-attr_selector,
.hljs-light .hljs-important, .hljs-light .hljs-pseudo, .hljs-light .hljs-pi,
.hljs-light .haml .hljs-bullet, .hljs-light .hljs-doctype, .hljs-light .hljs-deletion,
.hljs-light .hljs-envvar, .hljs-light .hljs-shebang, .hljs-light .apache .hljs-sqbracket,
.hljs-light .nginx .hljs-built_in, .hljs-light .tex .hljs-formula,
.hljs-light .erlang_repl .hljs-reserved, .hljs-light .hljs-prompt,
.hljs-light .asciidoc .hljs-link_label, .hljs-light .markdown .hljs-link_label,
.hljs-light .vhdl .hljs-attribute, .hljs-light .clojure .hljs-attribute,
.hljs-light .asciidoc .hljs-attribute, .hljs-light .lasso .hljs-attribute,
.hljs-light .coffeescript .hljs-property, .hljs-light .hljs-phony {
color: #88f
}

.hljs-light .hljs-keyword, .hljs-light .hljs-id, .hljs-light .hljs-title,
.hljs-light .hljs-built_in, .hljs-light .hljs-aggregate, .hljs-light .css .hljs-tag,
.hljs-light .hljs-javadoctag, .hljs-light .hljs-phpdoc, .hljs-light .hljs-yardoctag,
.hljs-light .smalltalk .hljs-class, .hljs-light .hljs-winutils,
.hljs-light .bash .hljs-variable, .hljs-light .apache .hljs-tag,
.hljs-light .go .hljs-typename, .hljs-light .tex .hljs-command,
.hljs-light .asciidoc .hljs-strong, .hljs-light .markdown .hljs-strong,
.hljs-light .hljs-request, .hljs-light .hljs-status {
font-weight: bold
}

.hljs-light .asciidoc .hljs-emphasis, .hljs-light .markdown .hljs-emphasis
{
font-style: italic
}

.hljs-light .coffeescript .javascript, .hljs-light .javascript .xml,
.hljs-light .lasso .markup, .hljs-light .tex .hljs-formula, .hljs-light .xml .javascript,
.hljs-light .xml .vbscript, .hljs-light .xml .css, .hljs-light .xml .hljs-cdata
{
opacity: .5
}

.hljs-dark {
background: #f6f6f6
}

.hljs-dark .hljs {
background: #23241f
}

.hljs-dark .hljs, .hljs-dark .hljs-tag, .hljs-dark .css .hljs-rules,
.hljs-dark .css .hljs-value, .hljs-dark .css .hljs-function .hljs-preprocessor,
.hljs-dark .hljs-pragma {
color: #E6DB74
}

.hljs-dark .hljs-strongemphasis, .hljs-dark .hljs-strong, .hljs-dark .hljs-emphasis
{
color: #a8a8a2
}

.hljs-dark .hljs-bullet, .hljs-dark .hljs-blockquote, .hljs-dark .hljs-horizontal_rule,
.hljs-dark .hljs-number, .hljs-dark .hljs-regexp, .hljs-dark .alias .hljs-keyword,
.hljs-dark .hljs-literal, .hljs-dark .hljs-hexcolor {
color: #ae81ff
}

.hljs-dark .hljs-tag .hljs-value, .hljs-dark .hljs-code, .hljs-dark .hljs-title,
.hljs-dark .css .hljs-class, .hljs-dark .hljs-class .hljs-title:last-child
{
color: #a6e22e
}

.hljs-dark .hljs-strong, .hljs-dark .hljs-strongemphasis {
font-weight: bold
}

.hljs-dark .hljs-emphasis, .hljs-dark .hljs-strongemphasis, .hljs-dark .hljs-class .hljs-title:last-child
{
font-style: italic
}

.hljs-dark .hljs-keyword, .hljs-dark .hljs-function, .hljs-dark .hljs-change,
.hljs-dark .hljs-winutils, .hljs-dark .hljs-flow, .hljs-dark .lisp .hljs-title,
.hljs-dark .clojure .hljs-built_in, .hljs-dark .nginx .hljs-title,
.hljs-dark .tex .hljs-special, .hljs-dark .hljs-header, .hljs-dark .hljs-attribute,
.hljs-dark .hljs-symbol, .hljs-dark .hljs-symbol .hljs-string,
.hljs-dark .hljs-tag .hljs-title, .hljs-dark .hljs-value, .hljs-dark .alias .hljs-keyword:first-child,
.hljs-dark .css .hljs-tag, .hljs-dark .css .unit, .hljs-dark .css .hljs-important
{
color: #AE81FF
}

.hljs-dark .hljs-function .hljs-keyword, .hljs-dark .hljs-class .hljs-keyword:first-child,
.hljs-dark .hljs-constant, .hljs-dark .css .hljs-attribute {
color: #66d9ef
}

.hljs-dark .hljs-variable, .hljs-dark .hljs-params, .hljs-dark .hljs-class .hljs-title
{
color: #f8f8f2
}

.hljs-dark .hljs-string, .hljs-dark .css .hljs-id, .hljs-dark .hljs-subst,
.hljs-dark .haskell .hljs-type, .hljs-dark .ruby .hljs-class .hljs-parent,
.hljs-dark .hljs-built_in, .hljs-dark .sql .hljs-aggregate, .hljs-dark .django .hljs-template_tag,
.hljs-dark .django .hljs-variable, .hljs-dark .smalltalk .hljs-class,
.hljs-dark .django .hljs-filter .hljs-argument, .hljs-dark .smalltalk .hljs-localvars,
.hljs-dark .smalltalk .hljs-array, .hljs-dark .hljs-attr_selector,
.hljs-dark .hljs-pseudo, .hljs-dark .hljs-addition, .hljs-dark .hljs-stream,
.hljs-dark .hljs-envvar, .hljs-dark .apache .hljs-tag, .hljs-dark .apache .hljs-cbracket,
.hljs-dark .tex .hljs-command, .hljs-dark .hljs-prompt, .hljs-dark .hljs-link_label,
.hljs-dark .hljs-link_url {
color: #e6db74
}

.hljs-dark .hljs-comment, .hljs-dark .hljs-javadoc, .hljs-dark .java .hljs-annotation,
.hljs-dark .python .hljs-decorator, .hljs-dark .hljs-template_comment,
.hljs-dark .hljs-pi, .hljs-dark .hljs-doctype, .hljs-dark .hljs-deletion,
.hljs-dark .hljs-shebang, .hljs-dark .apache .hljs-sqbracket,
.hljs-dark .tex .hljs-formula {
color: #75715e
}

.hljs-dark .coffeescript .javascript, .hljs-dark .javascript .xml,
.hljs-dark .tex .hljs-formula, .hljs-dark .xml .javascript, .hljs-dark .xml .vbscript,
.hljs-dark .xml .css, .hljs-dark .xml .hljs-cdata, .hljs-dark .xml .php,
.hljs-dark .php .xml {
opacity: .5
}

.hljs-keyword{
font-weight: bold;
}

code {
color: white;
font-family: Consolas;
}

第四步 编辑JavaScript文件

主要的功能其实是在JavaScript中完成的。本插件使用JavaScript代码来改变图片的默认宽度，使得最大宽度可以达到文档最大宽度即100%，这样大图片也不会说显示的不够大了。同时使用JavaScript来对代码样式做一些更改。

由于代码基于jQuery，所以还引用了jQuery包。

创建myscript.js，然后加入以下代码：

$("#main").css("box-shadow","0px 2px 30px #888");

$(".prettyprint").addClass("hljs-light");

$(".hljs-preprocessor").css("color","#A29A4E");

$("code").css("font-family","Consolas");

if($(".hljs-dark").length>0){
$(".hljs-dark").css("color","white");
}

if($(".hljs-light").length>0){
$(".hljs-light").css("color","black");
$(".hljs-string").css("color","blue");
$(".hljs-title").css("color","blue");
}

$("#article_content").find("img").each(function(i){
var obj=$(this);
obj.css("max-width","100%");
if(obj.parent().text().length==0){
obj.parent().css("text-align","center");
}
});

到这里，我们的主要功能就实现了。

第五步 打包生成CRX文件

将这几个文件放到一个文件夹里面。



然后打开谷歌浏览器的扩展程序页面。勾选右上角的开发者模式来启用开发者功能。点击打包扩展程序。



在弹出的对话框中，选择上面的文件夹，点击打包扩展程序，即生成了你的插件，生成的插件和文件夹在同一级。

第六步 安装CRX文件到浏览器

CRX文件生成之后，将文件拖入谷歌浏览器扩展程序页面。





点击添加扩展程序。



效果预览图：

总结

整个过程其实不难，仅仅是针对CSDN博客的页面做一些改变。使得更满足自己的审美观。

代码已经开源，可以访问此网址获取源码，做一些更满足你的审美的一些改变，既然都可以向网页注入JavaScript代码了，那你就完全可以做任何你想做的事儿了：

https://github.com/ganecheng/CSDNBigPicture