Ys' Library | プログラミング・ガジェット徒然日記
JavaScriptやHTML、その他プログラミングの中で詰まったこととその解決法、またはガジェットについて書くブログです。
2013年2月3日日曜日
Markdownで投稿した記事のソースコードの見た目をいい感じにする
[前回の記事](http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html)でBloggerにMarkdownで記事を投稿できるようになった。 ただ、今のままではMarkdown内のコードがあまり良い感じに表示されない。 ![no so cool](http://lh6.ggpht.com/-LyQGV-MaV1I/UQzUnmR_U0I/AAAAAAAAAPs/fB1ZUhk2Wcc/image05.png?imgmax=600) そこで、今回はMarkdown内のコードをシンタックスハイライトする方法を紹介する。 参考にするのは、前回の記事でも参考にした次の記事。 - [This works...: Markdown with blogspot.com and blogger.com -](http://dvdotsenko.blogspot.jp/2012/08/markdown-with-blogspotcom-and-bloggercom.html) #手順 ##1. `prettify.js`を手に入れる 上の記事で紹介されている著者の[GitHubのレポジトリ](https://github.com/dvdotsenko/snippets)から、`lib/prettify.js`をダウンロードし、自前のサーバや任意のホスティングサービスにアップロードする。 ##2. Bloggerのテンプレートにコードを挿入 ダッシュボードのテンプレートセクションで、「HTMLの編集」を選択する。 ![htmlの編集を選択](http://lh3.ggpht.com/-daVwGozRh9c/UOt1-SVWKSI/AAAAAAAAAOE/FR-xQdi-U6A/markdown_in_blogger_01.png?imgmax=320) 表示されたダイアログの中で、前回の記事で挿入したコードを探し、その直後に下記のようにコードを挿入する。 この`prettify.js`はMarkdown中の全てのコードブロックに対してシンタックスハイライトをかけるようカスタマイズされているので、コードを読み込むだけでいい。 ##3. CSSを追加する ダッシュボードのテンプレートセクションで、カスタマイズ -> アドバンス -> CSSを追加、と進み、以下のスタイルを追加する ![カスタマイズ](http://1.bp.blogspot.com/-888RNs_HwsY/UQomhIJgYBI/AAAAAAAAAPQ/POp2fymQndM/s320/markdown_in_blogger_02.png) ![CSSを入力](http://1.bp.blogspot.com/-NxKVmrg5mek/UQomhpneQ2I/AAAAAAAAAPc/RDnNRaMMty8/s320/markdown_in_blogger_03.png) /* Pretty printing styles. Used with prettify.js. */ /* Vim sunburst theme by David Leibovic */ pre .str, code .str { color: #65B042; } /* string - green */ pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ pre .typ, code .typ { color: #89bdff; } /* type - light blue */ pre .lit, code .lit { color: #3387CC; } /* literal - blue */ pre .pun, code .pun { color: #fff; } /* punctuation - white */ pre .pln, code .pln { color: #fff; } /* plaintext - white */ pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ pre.prettyprint, code.prettyprint { background-color: #000; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; } pre.prettyprint { width: 95%; margin: 1em auto; padding: 1em; white-space: pre-wrap; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { } @media print { pre .str, code .str { color: #060; } pre .kwd, code .kwd { color: #006; font-weight: bold; } pre .com, code .com { color: #600; font-style: italic; } pre .typ, code .typ { color: #404; font-weight: bold; } pre .lit, code .lit { color: #044; } pre .pun, code .pun { color: #440; } pre .pln, code .pln { color: #000; } pre .tag, code .tag { color: #006; font-weight: bold; } pre .atn, code .atn { color: #404; } pre .atv, code .atv { color: #060; } } --- これでMarkdown内のコードもいい感じにシンタックスハイライトされる。 あとは行番号つけられれば完璧かなー
0 件のコメント:
コメントを投稿
次の投稿
前の投稿
ホーム
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿