Markdownからhtmlに変換するツールを作成
自分にとって良いツールが見つからないのでMarkdownからhtmlに変換するツールを作りました。
一般的なMarkdown記法なら変換できるかと思います。WordPressのような一般的なブログで使うことを目的としているので、h2タグなどに余計なidは入りません。
作るに至った経緯
せっかくなので作るに至った経緯を説明したいと思います。
ビジュアルモードやは使いづらい
WordPressに限らず、ビジュアルモードのブログ投稿フォームって使いづらいですよね。文章を書くだけなら見やすいかもしれないですが、画像やリンクを挿入するとなると途端に面倒くさくなります。しかもブログを書くのに慣れてくると、ビジュアルモードよりテキストモードで書いたほうが表示崩れが起きずに楽です。
しかしながらテキストモードの欠点は見にくいこと。テキストモードは基本的にHTML形式で記述していきます。つまり人間ではなく機械が理解できるように記述しないといけない。そのため人間にとっては少々見にくい文章になってしまいます。
そんな両者の間をいくのがMarkdownです。Markdown形式で記述していくとテキストモードに比べてかなり読みやすい文章になります。それでいてテキストモードのようにリンク等も挿入できます。とても便利ですが、WordPressは標準で使えません。はてなブログでは使えたのですがね…
WordPressでMarkdownを使いたい
はてなブログのときはMarkdown形式で記事を書いていました。なのでWordPressでもMarkdownで記事を書きたいです。
しかしWordPressの標準機能ではMarkdownは使えません。プラグインで対応させようとしましたが、相性が悪いのかはてなブログみたいに簡単に使えません。
仕方ないのでテキストモードで我慢していました。でもやっぱりテキストモードは見にくい…
Markdownで記入後にHTMLに変換すれば楽になる
WordPress側で対応するのは諦めて、Markdownで書いた文章をhtmlに変換して貼り付ければかなり楽になると気づきました。そこでMarkdownをhtmmlに変換するツールを探しました。
しかしどのツールも微妙に使いづらいのです。特にh2タグ等に余計なidが付与されるのは邪魔でした。
どれも使いづらいなら自作してしまいましょう。
勉強も兼ねて自作しました
ということで勉強も兼ねてjavascriptで自作しました。javascriptは初めて使ったので戸惑いましたが、どうにかなりましたね。でも”var”でintだろうがstringだろうが宣言するのは未だに慣れません。
作ったと言ってもこちらの「『marked.js』 を使ってブラウザ上で markdown を html に変換する方法」を参考に”marked.js”を使っています。仕組みは簡単で、テキストエリアに入力された文章を取得して”marked.js”に渡しているだけです。その後余計なidは”replace”関数で取り除きました。
まとめ：自作ツールって便利
Markdownからhtmlへの変換は”marked.js”を使うことで簡単にできました。自作ツールって自分の欲してる機能が100％備わっているので、当たり前ですが便利ですね。
コメント