MarsEditとJP Markdownの組み合わせが便利すぎる

WordPressでブログを更新していて感じていた不満が、MarsEditとJP Markdownの組み合わせでほぼ解消できたので記事にしてみようと思います。

この組み合わせのメリットは、「Markdow記法HTMLタグ混在して記事が書ける」ことです。

今までの不満点

このブログを初めてからもうすぐで1年になります。途中で半年ほど放置してしまったのですが、昨年の11月頃から更新を再開し記事の作成と合わせて、PHPやCSS・HTMLを勉強してきました。

最初はWordPress標準の「TinyMCE」や「TinyMCE Advance」のビジュアルモードを使って記事を書いていたのですが、いちいちブラウザでアクセスして記事を作成するのが面倒になり、ブロガーの方達が絶賛していた「MarsEdit」を購入。これでブラウザを開かずに更新できると思ったのですが、MarsEditの扱いにイマイチなじめず・・・。

せっかくHTMLを勉強したので、ここ2ヶ月ほどはWordPressの自動整形をオフにして、「TinyMCEのHTMLモード」とプラグインの「Add QuickTag」の組み合わせでタグ打ちをして記事を更新してました。

だけど不満が・・・。タグを打った文章を後で修正しようとすると、とにかく視認性が悪く面倒

文章の言い回しを変えたいな・もう少し分かりやすく補足事項を書きたいな、などと思っても、ガチガチにタグを打った文章を見ると、面倒〜!と思ってしまいまったく修正する気が起きなかったんです。まるで文章をアンカーボトルで固定してしまったような気分です。

  • こうなったらビジュルエディタもいいけど、divなどのタグを打ちたい時に自動整形で消されてしまうリスクに怯えるのは嫌だ。
  • シンタックスハイライトをするプラグインを入れても、タグ打ちした文章はやっぱり重い印象、もっと気軽に文章をいじりまわしたい。
  • スニペットの利用で、「Add QuickTag」は使いたい。
  • せっかく購入したので、できればMarsEditを活かしたい。

なんとかしたいなと思い、ビジュアルエディタモードと仲良く付き合おうかなと考えていた時に、プラグインの「JP Markdown」を発見!

JP Markdown

JP Markdownは、JetPackに搭載されているMarkdownの機能のみを取り出した、JetPackほどの高機能はいらないという時にセレクトできる、軽量なプラグインです。

記事の下書きはMacの「Ulysses」を使用しているので、Markdown自体には慣れていました。なので、過去にもWordpressでMarkdownを利用できる「WP Markdown」や「AdovanceカスタムフィールドでMarkdown」を利用できるプラグインはなどは試してみましたが、HTMLタグと混在できずに100%Markdownで記載しないといけないなどで、どれもイマイチなじめず・・・。

TinyMCEのHTMLモードとAdd Quicktagの組み合わせにプラスしてMarkdownを利用できるような、そんなプラグインは無いのかなと諦めていました・・・。

HTMLタグとMarkdownを混在して利用したい!そんなワガママな希望、「JP Markdown」でようやく叶えることができました。MarsEditのHTMLエディタモードで「MarkdownとHTMLタグの混在した記事」を作成して投稿すれば、そのままブログの記事として公開できます。もちろん、ブラウザでWordpressの投稿画面からでも「MarkdownとHTMLタグ」で記事を書けます、そして「Add Quicktag」も利用できます。

保存しても変換はされないので、後で修正する時も「MarkdownとHTMLタグ」のままで表示されます。ブログの記事にアクセスがあった時に、都度HTMLタグに変換をして出力しているようです。

注意点(自動整形)

JP Markdownは、WordPressの自動整形機能を利用します。なので、勝手にPタグがついたり、brが消えるのが嫌だったり、タグをそのまま出力したいということで自動整形機能をオフにしていると、MarkdownからHTMLへうまく変換できないことになります。

このプラグインを利用するときは、自動整形機能を元に戻す必要があります。・・・私は、imgにPタグが付くのが嫌なので、imgの時だけpタグ除去をしていますが、とりあえず希望通りの綺麗なhtmlを吐き出してくれています。

自動整形機能を利用するのでタグの表示にクセは残りますが、色々と勉強したのでうまく付き合えそうです。

注意点(HTMLタグの自動生成)

MarsEditのHTMLモードでMarkdownを記載し、1度でもビジュアルモードに切り替えると、文章全体にHTMLタグが自動で生成されてしまいます。HTMLからMarkdownへは変換をしてくれないので、ビジュアルモードへの切り替えは注意が必要です。

エディタ画面の表示がスッキリする

タグをガチガチに打った文章を見ると、シンタックスハイライトをさせても視認性が悪くて嫌だったのですが、この組み合わせで利用するようになってからは、とてもスッキリしています。

HTMLタグ

<h2>花粉対策アイテム</h2>
<p>2月なのに花粉が多くて苦しいです。</p>
<p>暖かい春を迎えるのは楽しみですが、<br>
花粉対策アイテムを買い揃えないと・・・。</p>
<p><img src="http://exsample@@@@.test.jp" alt="花粉対策アイテム" width="150" height="150" class=""></p>
<ul>
<li>アレグラ(花粉症の薬)</li>
<li>大量のポケットティシュ</li>
<li>目薬</li>
</ul>
<p>他の花粉対策情報は下記より</p>
<p><a href="http://http://exsample@@@@">花粉対策!!</a>

MarkdownとHTMLタグの混在

## 花粉対策アイテム

2月なのに花粉が多くて苦しいです。

暖かい春を迎えるのは楽しみですが、<br>
花粉対策アイテムを買い揃えないと・・・。

<img src="http://exsample@@@@.test.jp" alt="花粉対策アイテム" width="150" height="150" class="">

- アレグラ(花粉症の薬)
- 大量のポケットティシュ
- 目薬

他の花粉対策情報は下記より

<a href="http://http://exsample@@@@">花粉対策!!</a>

画像やリンクについては、Wordpressのメディアや、MarsEdit標準の機能を利用しタグを出力しています。

個人的に必要だと思うMarkdownタグ

個人的に、「見出し:H1〜H6」・「リスト:ol・ul」・「強調:strong」があれば純分かなと感じています。pタグは、空白行で挟んだ部分がタグで括られるので悩むことはないと思います、改行はbrを打ってしまったほうが視認性もよく便利です。

他のタグは今までどおり打ってしまえばいいので、財産のスニペットもそのまま活用できます。pタグやimgにclassを与えたい時なども、今までどおり打てば大丈夫です。

まとめ

不満だったことが、プラグイン一つであっさり解決してしまったので拍子抜けしましたが、「MarkdownとHTMLタグの混在環境」はとてもスッキリしていて便利です。

過去記事を編集するときは、新しく書く部分だけMarkdownで記載をしています。

HTMLタグ、Markdown、両方の良いとこどりができるので凄くオススメです。残る不満は、MarsEditでアイキャッチを設定したい・・・。