CSDNブログを美化してMarkDownに基づいて書いた文章-写真の幅は100%で、コードは明るいです.

36454 ワード

markdown コードが明るい CSDNブログ美化 Googleブラウザプラグイン

転載は出典を明記してください.
http://blog.csdn.net/gane_cheng/articale/detail/52242424277
http://www.ganecheng.tech/blog/52244277.html (閲覧効果がより良い)
最近CSDNを使ってブログを書くようになりました.MarkDownエディタに追いつきました.第一編を書く時はまだ調子が悪いです.今は10編を書きました.だんだん慣れてきました.
でも、初めて書いた時は、二つの不愉快なところがあります.私はそんなに簡単に我慢できる人ではないです.本当に適応できると思わないでください.

に挿入された画像はプレビューの時に完全に表示されますが、記事の詳細ページでは最大602 px幅

だけです.

コード表示と普通のテキストは基本的に区別がなく、高輝度が足りません.
我慢できません変えましょう.
まず美化後の効果図を置いてください.
今はもう間に合わないなら、直接プラグインをダウンロードして体験してみてください.http://download.csdn.net/detail/gane_ching/9607001
crxファイルをダウンロードした後、Googleブラウザの拡張プログラムページを開いて、crxファイルをドラッグして、ブログページを更新すれば効果があります.
感じがいいですか?私は何をしましたか?フォントと配色を変えて、フォントはConsolasなどの幅のフォントを使って、キーワードは高くて明るくて、IDEと同じスタイルです.
この文章はもちろんこんな簡単なものは紹介しません.何が深いですか?私達は自分でGoogleのブラウザーのプラグインを書きにきて、続いて私に従って1歩ずつしましょう.
第一歩はGoogleブラウザのプラグインを読んで文書を開発します.
何事も最初が難しいです.今日の午後までに、私の最初のGoogleブラウザのプラグインがこのように誕生したとは考えられませんでした.この文章はCSDNブログを美化するために生まれたのですが、最後の一歩まで進んだ時、ウェブページであれば、変えられないものがないことが分かります.
文書を開発する:http://open.chrome.360.cn/extension_dev/overview.
実は見なくてもいいです.直接に二歩目に行きましょう.
第二段階はmaifest.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"]
    }
  ]
}

選択しなければならない3つのフィールド:

name:あなたのプラグインの名前は

です.

version:プラグインのバージョン番号

maifest_version:chrome 18以降は2でなければいけません.後で追加するかどうかはまだ分かりません.
オプションのフィールドがとても多いです.ここで二つを紹介します.

icons:プラグインのアイコンは、16,28,128の3つの規格に分けられています.単位はpxで、最適なフォーマットはPNGです.透明なサポートには最高です.

description:プラグインの説明情報は、プラグインの主要機能

を書き込むことができます.
重要なフィールドが来ました.content_.scripts,Contect ScriptはWebページ内で実行されるjavascriptスクリプトです.標準のDOMを使うことで、ブラウザでアクセスしたページの詳細情報を取得し、これらの情報を変更することができます.これもこのプラグインの実現の方式です.

matches:プラグイン適用ページ

css:ページに導入されたCSSは、ページのDOMツリーの作成と表示の前に、定義された順序で順次注入されます.

js:ページに導入されたJavaScriptは、デフォルトではページのDOMロードが完了した後、定義された順序で順次注入されます.

第三ステップCSSファイルの編集
maxico.cssファイルを作成して、maifest.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バッグも引用しています.
mysscript.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ファイルを生成する
これらのファイルを一つのフォルダに入れます.
Googleブラウザの拡張プログラムページを開きます.右上の開発者モードにチェックを入れて開発者機能を有効にします.パッケージ拡張プログラムをクリックします.
ポップアップダイアログでは、上のフォルダを選択して、パッケージ拡張プログラムをクリックします.つまり、プラグインを作成して、作成したプラグインとフォルダは同じレベルになります.
第六段階CRXファイルをブラウザにインストールする
CRXファイルが生成された後、ファイルをGoogleブラウザの拡張プログラムページにドラッグします.
拡張プログラムを追加するにはクリックしてください.
効果のプレビュー:
締め括りをつける
全体の過程は難しくないです.CSDNブログのページだけを変えます.自分の審美眼をより満足させる.
ソースコードは、このサイトにアクセスしてソースコードを取得することができますが、いくつかのより多くの審美的な変更を行うには、JavaScriptコードをウェブページに注入することができますが、それはあなたがやりたいことを行うことができます:https://github.com/ganecheng/CSDNBigPicture

ビットカウント(アルゴリズム)

デザインモード----ポリシーモード