美化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