Qiita投稿アプリ開発(8) marked+highlight.jsで下書きの簡易プレビュー
先週末に実装した機能もこれで最後ですね。
面倒そうで一番開発に対して乗り気のなかった下書きのプレビューですが、もし自分がアプリを使う立場だったらと考えると、これは欲しいなと思いました。
投稿してから編集するのはおかしな話ですからね。
昔だったら妥協していていたと思いますが、最近ユーザに近いところで仕事をしているためか、多少は使う人を考えられるようになってきたのかもしれません。
作るとなれば実装の方針を決めないといけませんが、パーサの開発とかを一から作るのはやりたくないので、ライブラリを探すことにしました。
注目したのが、Qiitaの書式がMarkdown記法を採用していることと、そしてソースコードの部分がハイライトされてることです。
そこで「javascript markdown highlight」でググってみました。
そしたら以外にも簡単に見つかりました。
せっかくなので、ライブラリを簡単に紹介しておきますね。
marked
Markdown記法で書かれた文章をHTML形式に変換してくれるライブラリです。
ライブラリ本体は以下のリンクの先にあるmarked.jsです。
HTMLファイルにダウンロードしたJavascriptに追加することで、ライブラリが利用可能となります。
使い方も非常に簡単です。
highlight.js
こちらはソースコードに色付けを行うように文章を加工してくれるライブラリです。
ライブラリは以下のリンクから取得出来ます。
HTMLファイルにダウンロードしたJavascriptを追加することで利用可能になります。
こちらも使い方が非常に簡単で、以下のコードを実行するだけです。
下書きのプレビュー
markedとhighlight.jsというライブラリについて紹介しましたが、いかがでしょうか。
Qiitaの下書きをプレビューする機能を作るのが簡単そうに思えてきませんか？
それでさっくりと作ってみました。
そして動作させて見ました。動きました。
・・・はい。非常に簡単でしたね。
やはり先人達が作成したライブラリの力は偉大だったようです。
あっけなく実装出来てしまったので、あとは細かい動作の実装とデザインくらいしか残っていません。
ようやく完成が見えてきているので、そろそろスクリーンショットでも公開したいですね。
