読者です 読者をやめる 読者になる 読者になる

趣味プログラマによるOSS開発日誌

趣味で作っているOSSソフトウェアの紹介や関連技術の紹介、楽曲製作、Webデザイン勉強状況を紹介します。

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の下書きをプレビューする機能を作るのが簡単そうに思えてきませんか?
それでさっくりと作ってみました。
そして動作させて見ました。動きました。
・・・はい。非常に簡単でしたね。
やはり先人達が作成したライブラリの力は偉大だったようです。
 
 
あっけなく実装出来てしまったので、あとは細かい動作の実装とデザインくらいしか残っていません。
ようやく完成が見えてきているので、そろそろスクリーンショットでも公開したいですね。