Bloggerに、コードスニペットなど簡単きれいに投稿する方法を調べてみた。
ブラウザのプラグインを利用し、軽量マークアップ言語の “Markdown” で文章を書く。
2014/10/23追記：
現在利用している Markdown Here のCSS設定をpastebin.comへアップ
現在利用している Markdown Here のCSS設定をpastebin.comへアップ
1. 軽量マークアップ言語って？
文字修飾するための シンプルな文法。
文法が工夫されていて、①書きやすく、②読みやすく、③元の文章から最終イメージを想像しやすい。
例えば、打ち消し と表示される、など。
~~打ち消し~~ と書くと、軽量マークアップの方言いろいろ比較
2. 軽量マークアップ言語： Markdown
マークアップには様々な流儀があるが、その中で、ここ数年よく見かけるようになったのが Markdown という書き方。
Markdownは、センスの良い文法とOSSのお陰で、デファクト化しつつあるのかな？
様々なMarkdownの実装
- Markdown Wiki
MarkdownによるWikiサービス、色々なプログラム言語でのMarkdown実装一覧もあり
3. Markdownでの投稿方法は？
つまるところ、Markdown文法で書かれたプレーンテキストから、HTML+CSS を生成する変換ソフトウェアを使って、投稿することになる。
この変換ソフトウェアを どこに導入して使うかで、使用感が違ってくる。
この記事を書いている時点で、４つの方法がある模様。
- Markdownを組み込んだブログサービスを利用
Qiita、GitHub、Stack Overflow、はてなブログなど - Markdownを組み込んだテキスト変換サービス（クラウドツール）を利用
StackEditや、Online Markdown Editorなど - ブログのテンプレートに、ウィジェットなどでMarkdownを組み込んで利用
Pagedownやgoogle-code-prettifyなどを組み込む - ブラウザのプラグインにMarkdownを組み込んで利用
Markdown Here
それぞれ長短あるが、もっとも楽で便利なのは、1. の「Markdown対応ブログ」を使うこと。
しかし、Markdown対応ブログは記事の著作権の扱いが微妙だったり、今回は Blogger 前提にもしているので、4. ブラウザのプラグインを試してみた。
4. Markdown Hereの紹介
Markdown Hereは、ChromeやFirefoxなどのブラウザプラグインで、Markdownテキストを簡単にHTMLへ変換してくれるソフトウェア。
特長
- 様々な言語のコードスニペットに対する構文強調表示に対応
- CSSをわりと簡単に調整できる
- Texによる数式イメージの挿入も可能 ※既定ではプライバシーに配慮してDisableです
- Blogger、gmail、Evernote（Web版）などで使える。
Markdown HereのGitHub Wikiページに対応環境の情報がある。
5. Install 方法
とっても簡単。
Chromeでは、Chromeウェブストアにて
① “Markdown Here”を検索
② “拡張機能”を選んで絞込み
③ インストール
② “拡張機能”を選んで絞込み
③ インストール
以上でおわり。
インストール前から開いていたBloggerやGmailのタブがあれば、プラグインを有効化するのに、一旦タブを閉じて開き直す必要あり。
6. 使い方
これも、とっても簡単。
- いつもどおり、BloggerやGmailで文章を書いたら、Ctrl-Alt-M を押下。
- 見出しやテーブル、コードスニペットなどが、美しく整形表示される。
- 再度編集するときは、再びCtrl-Alt-Mでテキストに戻してから、編集する。
なお、Ctrl-Alt-Mの代わりに、右クリックメニューの「Markdownを有効化/無効化」でもよい。
7. Markdown Hereの文法 - Grammar
Markdown自体の文法の解説は、すでに豊富な日本語リソースがあるので、Markdown Hereに関する２つのリンクだけ参考に掲載する。
8. 細かな設定 - Tuning
Chromeの右上にアイコンが追加されているので、右クリックして “オプション”を選べば、細かな設定を変更できる。
Chrome自体の設定画面から、”拡張機能”を選んで、Markdown Hereの “オプション” リンクをクリックしても同じ。
例えば…
- コード表示用のCSSテーマの選択、CSSの調整
- Texによる数式入力のON/OFF
ONにすると chart.googleapis.com に数式を送信し画像変換している（URLは変更可） - ショートカットを Ctrl-Alt-M 以外に変k脳
試しに、コード表示用のCSSテーマを変更してみる。
まず、Googlecode を選んだあと、①コード表示部分の背景を white から #F0F0F0 へ少し暗くしてみると、②直ちにプレビューに反映されるのがわかる。
反映後：
9. Blogger利用でのTips
9.1. h1ヘッダーは使わない
Markdownの “========” や “#” により
h1 ヘッダーを作るのは避ける。
理由は、BloggerのCSSでは、普通、
h1を投稿タイトル、h2以降を投稿内の見出しに使っているから。
投稿内で
h1 ヘッダーを使うと、見た目や、HTMLの構造がよろしくない。9.2. CSSの干渉を避ける
Markdownの「スタイリングCSS」設定は、シンプルなCSSにしておくのが良い。
Markdownの「スタイリングCSS」設定は、最終的に element の style attribute によって、インラインで埋め込まれる。例えば…
Markdownの「スタイリングCSS」設定は、最終的に element の style attribute によって、インラインで埋め込まれる。例えば…
h1 {
text-align: center;
}
と書くと
<h1 style="text-align:center;">some title</h1> といった感じのHTMLが生成される。
Bloggerでは、BloggerテンプレートにもCSSを持っているから、MarkdownのCSSで部分的に上書きされて、最終的な見た目が思った通りならない可能性が高い。
Chromeなら、右クリックメニューの「要素を検証」で、BloggerテンプレートとMarkdownのstyle attributeの干渉を確認するなどして、適宜、直すと良い。
9.3. Markdown Here スタイル変更後の反映手続き
Markdown Here は、記事にその場でHTMLを生成するので、設定を変更したからといって、自動で過去の記事の見た目が変わるわけではない。
Markdown Hereの設定変更を過去の記事に反映するには、一度、その記事の編集画面から、Ctrl-Alt-Mでプレーンテキストに戻し、再度、Ctrl-Alt-MでHTMLを生成し直す必要がある。
ここは不便だけれど、仕組み的な限界。
9.4. 見た目が乱れた場合
まれに、正しくマークアップできなくなる場合がある。何かのバグを踏んでいるようにも思うが、以下のようにすると直る模様。
- 投稿のテキスト編集画面で、Markdownのプレーンテキストに戻す（Ctrl-Alt-M）
- Markdownのプレーンテキストすべてを、クリップボードへ切り取り（Ctrl-X）
- テキスト編集画面と、HTML編集画面の両方が、空になっていることを確認
- テキスト編集画面で、プレーンテキストとしてMarkdownテキストを貼り付ける（Ctrl-Shift-V）
- テキスト編集画面で、HTMLへ戻す（Ctrl-Atl-M）
ただし、投稿画面の上部にあるツールバー（↓）を使って編集していた場合、その内容は失われるので注意。
9.5. ページ内アンカーの利用
2014-05-17 バージョン v2.11.0のMarkdown Hereでは、ヘッダーアンカーは、Bloggerでは正しく動かない。HTMLを見ると、記事へのPermlinkではなく、編集ページのURLをベースにアンカー付けてしまっている様子。
例えば、以下の様なアンカーを自動設置したいとする。
<a href="#Sample-title">Jump</a>
もしくは
<a href="http://kimama-eng.blogspot.jp/2014/08/centos-65-gcc48.html#Sample-title">Jump</a>
しかし、Markdownで
[Jump](#Sample-title) と書いて、投稿を公開すると、以下のような HTMLになってしまう。<a href="https://www.blogger.com/blogger.g?blogID=(途中省略)#Anchor-sample"></a>
Markdown Hereの「その他の先進的な設定」にある ヘッダーにアンカーリンクを自動で設定する も同様の動作となる。残念だけれど、この機能は、しばらく利用できなさそう。
いずれにしても、とっても便利なソフトウェアを公開してくれた Adam Pritchard,さんに感謝！
コメントを投稿