20160909-00
最近個人的にMarkdown押しです。

テキストエディタで書けるし、あとはPandocというツールを使ってhtmlに変換すれば、それらしいドキュメントに見えるし、元の文章はテキストなので検索なんかもしやすいし、結構良いかも!とか思っちゃったわけです。

で、このブログ、Livedoor Blogの管理画面の「記事を書く」で文章を書いて「HTMLタグ編集」モードにしてコピーしてテキストエディタに貼り付けて<h3>タグなどを付け直したり編集しなおしたりして、またブログ管理画面に貼りなおして見た目を確認して、テキストエディタでまた修正してブログ管理画面に貼り付けて見た目を確認して、、、って馬鹿か?俺は!

なんだ、この手間は。
こんなに面倒臭いから、更新頻度少ないんだわ、こりゃ。

というわけで、ブログの更新手順を今一度見直してみた。


使用するテキストエディタ

Markdownと相性の良いGithub製のAtomを使用。
これを使うと、Markdownで文章書いてShift + Ctrl + mでプレビューが表示される。 プレビューで確認しながらMarkdownで文章が書けるってわけだ。

20160909-01

Atomのダウンロードはこちら。

https://atom.io/


Markdownの文法

このブログでよく使用するhtmlタグは<h3><pre>によるコード記載時のタグ。
あとはところどころ文章の意味合いの区切りとして空行を入れるように心掛けているので<p><br>なんかも無意識に使ってるんだなぁ。。。

というわけで、以下でMarkdownの文法は確認できる。

Markdown記法 チートシート Qiita

ただ、Markdown中にhtmlタグを記述することも可能だ。
例えば自分の場合はコード表示時にSyntaxhighlighterを導入しているわけで、<pre>タグにclassを指定しているわけだけど、そんな場合は例えば

<pre  class="brush:plain;">$ sudo apt-get install apache2</pre>

みたいに、もうMarkdownで書いている文章中にhtmlタグで書いちゃったほうが楽そうだ。


htmlへの変換とブログ記事としての貼り付け

冒頭で「Pandocというツールを使って」と書いたけど、まずはAtom上でhtml変換してみる。
Atomではプレビュー画面上で右クリックして表示されるメニューに「Save As HTML...」があるので、これを選択すればhtmlファイルに変換・保存できる。
あとはhtmlファイル中の<body>内の内容をブログの管理画面の記事を記入するテキストエリアにHTMLタグ編集モードにしたうえで貼り付ければOKだな。


ブログ貼り付け後の作業

記事内で画像を使用する場合はAtom上でimageタグを書くよりはブログ記事を記入するテキストエリアに貼り付け後にブログの機能を使用して画像を貼り付けるほうが良いですな。
どうせLivedoorへ画像のアップロードしてからじゃないと貼り付けられないんだし。


まとめ

ブログを書くのにMarkdownエディタ(Atom)とMarkdownは相性が良い、と感じた。

もちろん、最後はそのブログサービス内の機能を使用して画像を貼り付けたり、アフィリエイトを貼り付けたりする必要はあるが、ブラウザーとエディタを何度も往復する必要がなくなったのは大きい。

まだ改善の余地はありそうだが、これで「ブログを書く」=「自分の考えを整理する」時間を増やすことはできそうだ。

あ、Pandoc使わなかったな。。。