SublimeTextとMarkdownで書く

Photo:hashtag button [2011-365-199] By:eclecticlibrarian

Photo:hashtag button [2011-365-199] By eclecticlibrarian

どうも。暑さに完封 らいぱちです。

seesaaブログで記事を投稿するとき、
いちいちプレビューしたり、タブを切り換えたりが面倒だなあと思っていました。

解決法がないかと、がんばってググってみると
どうやらSublimeText2を使ってMarkdown記法で記述すれば、
リアルタイムプレビューしながら記事が書けそうだと判明。

早速、未知への挑戦です。



今回やりたいのは…

「何度もプレビューしたり画面をいってこいしたりしなくても
最終的なデザインに近い状態でプレビューしながら文章が書けて、
さらに、書き終わったらなるべくラクチンに記事をポストする」

ということになります。

毎度毎度手探りですが、今回はざっくりこんな手順で進めます。

1.SublimeText2をインストールして
2.Markdown記法でリアルタイムプレビューしながら記述して
3.できたhtmlソースを使って、seesaaブログで記事投稿

ざっくりそんな具合で試合開始です。

Markdown記法で記述する

書きやすくて読みやすいプレーンテキストとして記述した文書を、
妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット

Markdown – wikipedia

記事をポストしようと思って文章を書くときに開始タグや終了タグが
出てくるhtmlはアルファベットや記号など、ちょっと余計な文字も入力しないといけなくて、面倒です。そう、面倒なんです。
そんなときよりシンプルな記述のルールで文書を書くことができるマークアップ言語、それがMarkdownです。
(詳しくはそもそもMarkdownってナンダロウカ?で。)

たとえば、htmlで書くとこんな感じになるコードがあったとします。

<h1>これはH1タグです</h1>
<h2>これはH2タグです</h2>
<ul>
<li>これはリスト</li>
<li>これはリスト</li>
<li>これはリスト</li>
</ul>

同じ内容をMarkdown記法で書くと、こんな感じでもっとすっきりします。

#これはH1タグです
##これはH2タグです
*これはリスト
*これはリスト
*これはリスト

ハッシュ(#)が見出しタグ、アスタリスク(*)がリストタグを表現するルールになっているので、
htmlタグを書くよりもとてもシンプルにコードを書くことができます。

SublimeText2をインストール

sublimetext2-logo.jpg
Markdownを書くことができるエディタはいろいろありますが
macで使えるMarkdownエディタ)、
リアルタイムプレビューできるPackageを追加して、カスタマイズもできる
SublimeText2を使ってやっていきます。
(SublimeText2は公式ページからダウンロードできます)

Packageをインストール

SublimeText2をインストールできたら、PackageControlもインストールします。
そうすることでSublimeText2の機能を拡張するパッケージを追加することができるようになりますから。
SublimeTextを拡張するPackageControlをインストールするはこちらへ)

OmniMarkupPreviewerをインストールする

リアルタイムプレビューするにはこいつがなければはじまりません。
Markdownをプレビューするパッケージです。

メニューバー>「Preference」>「Package Control」>「Package Control:install package」を選択。

検索ボックスにOmniMarkdownpreviewerと記入して出てきたパッケージをクリック。
少し待つとインストールが完了します。

ついでにほかの便利なPackageもインストールしておく

  • Markdown Extended
    Markdown内のコードをシンタックスハイライトでカラフルにしてくれます。
  • Monokai Extended
    Markdownをシンタックスハイライトしてくれます。
  • Trailing Spaces
    半角スーペスでの改行をわかりやすくしてくれるパッケージです。

ちょっとだけ設定が必要なものもありますが、Markdown記法をするのに便利なPackageなので一緒にインストールしておくとよいかと思います。

いよいよMarkdownで記述する

ここまででようやくMarkdownで書く準備ができました。
いよいよSublimeText2の新規ファイルを作ってMarkdownで記述していきましょう。
(Markdownの書き方についてくわしくはMarkdown記法でブログを書こうへ)

ポイントは新規ファイルを作ったら、まずは保存します。
保存するときに拡張子を「.md」にして保存します。これで「この文書はMarkdownで書かれたものなんですよ」とPCに教えてあげることになります。
(.mdはMarkdown文書であることの拡張子です)

Markdown文書であることを示した状態で、画面をctrl+クリック
preview markup in browser」を選択します。
メニュー画面.png

すると、いつもお使いのブラウザが立ち上がったではありませんか。

まだなにも書かれていない空白のタブだとは思いますが、ブラウザが立ち上がったかと思います。
いまこそSublimeTextに思いっきりMarkdownでコードを書いていきましょう。

書いているそばから、なにもなかったタブに文字や見出しが表示されてきませんか?
うまいこと書いたものが表示されていれば成功です。

SublimeText2のcssを編集する

Markdownで記入してブラウザでリアルタイムに表示される。
はじめて見たときに、ちょっとした感動を覚えました。

が、

せっかくリアルタイムに表示してくれているのに、ひとつ物足りない…
それはブログで表示されるデザインと、まったく違うもんなんだもん。

こちらは最終的に投稿される状態でどんどんリアルタイムで表示されていってほしいのですね。

defalut.cssを編集する

SublimeText2のリアルタイムプレビューでも、Markdownをブラウザに表示するときにはcssを使って装飾されています。

なので、デザインを変更するためにはこのSublimeText2で使われているcssを変更してしまえばデザインがかわるはずです。

「ライブラリ」>「Application Support」>「Sublime Text 2 」>「Packages」>「OmniMarkupPreviewer」>「public」>「defalut.css」
これがSublimeText2がMarkdown文書をブラウザでプレビューするときに使っているcssです。
このcssを編集していきます。
(念のためオリジナルのcssファイルを複製、元ファイルの名前を変更して使いましょう)

cssファイルを開いてみると思いのほか複雑で、少し心が折れそうになると思います。

しかもseesaaブログで使用しているcssをこのファイルにコピペしても、
セレクタやidが違うので思った通りのデザインにはなりません。

世の中そんなに甘いもんじゃなかったです。

markdown-bodyをいじれば見た目が変わる

SublimeText2でプレビューしたページを「要素を調査」やFirebugを使って
じーっと見てみると
SublimeText2の記事自体は「markdown-body」というクラスに
なっているみたいです。

なのでmarkdown-body h2とかmarkdown-body h3など
markdown-bodyが指定しているプロパティを変更していくとseesaaブログと同じような見出しや記事本文のフォントに変更できて、表示したいブログの形に近づきます。

実際に記事を書きながらブラウザでリアルタイムにプレビューされていくと、こんな感じで画面に表示されていきます。
作業画面.jpg

記事を書き終えたら…

cssを整えて、リアルタイムプレビューを見ながら記事を書き終えたら、
markdownで書かれているものをhtmlに整形しないといけません。

SublimeText2の画面をctrl+クリックし、「Copy Markup as HTML」を選択すると、いままでMarkdownで書いてきたものがMarkdown記法のルールに従ってhtmlタグ付きのソースコードとなった状態で、そのコピーができます。
それをまるっとseesaaブログの記事投稿画面にペーストというのがシンプルでしょうか。

このコピーしたソースコードにはいらない余分な部分もあるので、記事本文に必要な部分だけ残して他を削除したら、ついに完成です。

もっと雑なコピペの方法

書き終えたプレビューが表示されているブラウザのソースコードを開きます。
(firefoxなら「⌘+U」です)
そうするとプレビューながらも同じようにhtmlタグでできた記事本文があるので
必要な部分だけコピー

seesaaにペースト、というやりかたとかもカンタンでいいかと思います。

Markdown Hereとリッチテキストというやり方もあるけれど…

Firefoxアドオンにクリック一発でMarkdown記法で書かれた文書をhtmlに直してくれるアドオンがあります。
seesaaブログをリッチテキスト化して、このアドオンをいれることで書き上げたMarkdown文書をコピペするだけで、余分な箇所を削除したり、プレビューのソースコードを開いたりすることなくhtmlに整形することができます。

それはそれでラクチンなのですが、できあがったhtmlを見てみると、記事本文部分にさらに新しいid属性を持った<div>が作られたりして、それはそれは複雑な感じになります。

これでオフラインでも作業できる

インターネットに接続されていなくても、ブラウザをたちあげていれば、
書いたそばから投稿後のイメージを確認することができるので作業効率も本当にアップします。

seesaaブログって重かったりするし、なんどもプレビューと投稿画面といったりきたりしなくてもよいのでストレスも減りました。

あとは根本的に記事を速く書くってことができれば、一番いいんですけれど。

おわりに

今回新しくわかったことはこんなことです。

  • SublimeText2が少しだけ使えるようになった。
  • Markdown記法の初歩ができるようになった。
  • seesaaへの記事投稿がちょっと書きやすくなった

Markdown記法だったり、新しくエディタをインストールしたり、その使い方だったり
いろいろとややこしいことだらけで一苦労でしたが、なんとかかんとかブログを書くスタイルができそうです。

なんせど素人なもので、やり方がおかしい説明がおかしい多々あるかと思いますが最後までお読みいただきありがとうございました。

あなたのお役に立てたら幸いだなあと思いつつ、きょうはこんなところで試合終了。

この記事が気に入ったら
いいね!しよう

Twitter で

PAGE TOP