自作Markdown記法とプレビュー機能の作り方

Markdown記法とは

はてなブログやQiitaなど様々なところで使われている記法です。

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。 (wikipedia引用)

例えば、「*タイトル*」と書くと「タイトル」と表示されるような感じです。

今回は、Markdown記法で書かれた文章をhtmlに変換し、
プレビュー機能で文章を表示するところまでを紹介します。

利用するもの

・AngularJS
　プレビュー機能の作成に利用します。
　※当記事ではAngularJSの知識をある程度持っていることを前提で進めていきます。
　AngularJS — Superheroic JavaScript MVW Framework

・propellerkit
　プレビュー機能の作成に利用します。
　propeller.in

MarkdownをHTMLに変換

今回考えたMarkdown記法は以下の通りです。

Markdown記法	表示結果
#titleタイトル#	タイトル
%red赤い文字%	赤い文字
*bold太い文字*	太い文字
_under下線_	下線

※あくまで分かりやすさ優先で考えたのでhtmlで書くより面倒なものもあります^^;

さっそくMarkdownで入力された文章をhtmlに変換する処理を作成していきます。
ここでは仮処理として、ボタンが押されたらMarkdownをhtmlに変換するようにします。

ここからAngularJSを利用していきます。

htmlはこちら

<textarea type="text" cols="120" rows="20"ng-model="content"></textarea>
<button type="button" ng-click="convert();"> 変換 </button >

Javascriptはこちら

$scope.content = "";
function convert(){
　var convertContent = $scope.content;
　console.log(convertContent)　//変換処理前
　/*変換処理*/
　 //タイトル
　  convertContent = convertContent.split('#title').join("<div style='font-size:20px;font-weight:bold;'>");
    convertContent = convertContent.split('#').join("</div>");
　 //赤い文字
    convertContent = convertContent.split('%red').join("<span style='color:red;'>");
    convertContent = convertContent.split('%').join("</span>");
　 //太文字
    convertContent = convertContent.split('*bold').join("<b>");
    convertContent = convertContent.split('*').join("</b>");
　 //下線
    convertContent = convertContent.split('_under').join("<u>");
    convertContent = convertContent.split('_').join("</u>");
　
　 console.log(convertContent)　//変換処理後
}

※AngularJSの基本的な部分は省略しています。

単純なので簡単に説明します。

まず変換ボタンが押されると、「ng-click」にある「convert」関数が動作され、
変換処理がはじまります。

変換処理ではjavascriptの「split」メソッドと「join」メソッドを利用しています。

例えば、入力されたMarkdownの中に「#title」という文字列が含まれていた場合。
まずは「split」メソッドを使って、この文字列を除去します。
次に「join」メソッドを使って、除去した箇所に対応するhtmlを追加します。

このようにすることで、Markdownをhtmlの形に変換することができます。
(だいぶんゴリ押しですが...)

実際にコンソールを使って、変換処理前と変換処理後の文章を比べてみましょう。

例えば、以下のような文章をフォームに入力したとします。

#titleタイトルです#

%red赤い文字です%

*bold太い文字です*

_under下線付きです_

コンソール結果は以下の通りです。

【変換前】

#titleタイトルです#

%red赤い文字です%

*bold太い文字です*

_under下線付きです_

【変換後】

<div style='font-size:20px;font-weight:bold;margin-bottom:-10px;'>タイトルです</div>

<span style='color:red;'>赤い文字です</span>

<b>太い文字です</b>

<u>下線付きです</u>

Markdownの部分がhtmlに変換されていることがわかります。

以上で、Markdownをhtmlに変換する処理が完成しました。
次に、htmlに変換した文章をプレビューで表示する機能を作成していきましょう。

プレビュー機能

まずはプレビューを表示していきましょう。

上記で仮処理としていた「変換」ボタンを「プレビュー」ボタンに変更し
ボタンが押されたらプレビューのダイアログが表示される機能を作成してきます。

ここでは、propellerkitのModalを利用します。
propeller.in

それでは早速htmlを見ていきましょう。

<textarea type="text" cols="120" rows="20"ng-model="content"></textarea>
<button type="button" data-target="#preview-dialog" data-toggle="modal" ng-click="preview()"> プレビュー </button >
<!--プレビューダイアログ-->
<div tabindex="-1" class="modal fade" id="preview-dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" >
            <div class="modal-content">
                <div class="modal-header pmd-modal-bordered">
                    <button aria-hidden="true" data-dismiss="modal" class="close"type="button">×</button>
                    <h2 class="pmd-card-title-text">プレビュー</h2>
                </div>
                <p>ここに文章が表示されます</p>
            </div>
        </div>
</div>

ダイアログの表示方法は、上記リンクのpropellerkit公式ページを見ていただいた方が早いかと思います。

実際に「プレビュー」ボタンが押されると、このようなダイアログが表示されます。

それでは、いよいよhtmlに変換した文章をプレビューで表示していきたいと思います。

htmlは以下の通りです。
1箇所のみ変更しています。

<div tabindex="-1" class="modal fade" id="preview-dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" >
            <div class="modal-content">
                <div class="modal-header pmd-modal-bordered">
                    <button aria-hidden="true" data-dismiss="modal" class="close"type="button">×</button>
                    <h2 class="pmd-card-title-text">プレビュー</h2>
                </div>
                <p ng-bind-html="previewContent"></p>
            </div>
        </div>
</div>

Javascriptは以下の通りです。
ここも変更点は1箇所のみです。

$scope.content = "";
$scope.previewContent = "";
function preview(){
　var convertContent = $scope.content;
　/*変換処理*/
　 //タイトル
　  convertContent = convertContent.split('#title').join("<div style='font-size:20px;font-weight:bold;'>");
    convertContent = convertContent.split('#').join("</div>");
　 //赤い文字
    convertContent = convertContent.split('%red').join("<span style='color:red;'>");
    convertContent = convertContent.split('%').join("</span>");
　 //太文字
    convertContent = convertContent.split('*bold').join("<b>");
    convertContent = convertContent.split('*').join("</b>");
　 //下線
    convertContent = convertContent.split('_under').join("<u>");
    convertContent = convertContent.split('_').join("</u>");

   $scope.previewContent= $sce.trustAsHtml(convertContent); 
}

htmlの変更点は

<p ng-bind-html="previewContent"></p>

のみです。
ここでjavascript側で変換したhtmlを反映します。

Javascriptは、最後の

$scope.previewContent= $sce.trustAsHtml(convertContent); 

を追加したのみです。

htmlで「ng-bind-html」を利用する際には、反映したいhtmlを
「$sce.trustAsHtml」を利用してエスケープしてあげる必要があります。
(しなければエラーが出てしまいます)

プレビューの表示結果は以下の通りです。

無事に表示されました。

しかし、改行や空白がきちんとされていない点が気になります。
ですので、javascriptで以下の処理を追加してみます。

$scope.content = "";
$scope.previewContent = "";
function preview(){
　var convertContent = $scope.content;

　/*改行・空白処理*/
    convertContent = convertContent.replace(/\r?\n/g, "<br>");
    convertContent = convertContent.replace(/\s+$/g,"");

　/*変換処理*/
　 //タイトル
　  convertContent = convertContent.split('#title').join("<div style='font-size:20px;font-weight:bold;'>");
    convertContent = convertContent.split('#').join("</div>");
　 //赤い文字
    convertContent = convertContent.split('%red').join("<span style='color:red;'>");
    convertContent = convertContent.split('%').join("</span>");
　 //太文字
    convertContent = convertContent.split('*bold').join("<b>");
    convertContent = convertContent.split('*').join("</b>");
　 //下線
    convertContent = convertContent.split('_under').join("<u>");
    convertContent = convertContent.split('_').join("</u>");
    console.log(convertContent)

   $scope.previewContent= $sce.trustAsHtml(convertContent); 
}

改行・空白処理を追加しました。
ここではJavascriptの「replace」メソッドを利用しています。

まず1つめ

convertContent = convertContent.replace(/\r?\n/g, "<br>");

では、改行文字「/\r?\n/g」があれば改行コードに変換しています。

2つめの

convertContent = convertContent.replace(/\s+$/g,"");

では、空白文字「/\s+$/g」があれば空白に変換しています。

コンソールの表示結果は以下の通りです。

<div style='font-size:20px;font-weight:bold;margin-bottom:-10px;'>タイトルです</div><br><br><span style='color:red;'>赤い文字です</span><br><br><b>太い文字です</b><br><br><u>下線付きです</u>

改行している箇所にはしっかりと「br」タグが挿入されていることがわかります。

プレビューでの表示結果は以下の通りです。

先ほどとは違い、きちんと改行されていることがわかります。

以上でプレビュー機能が完成しました。

おわりに

今回は主にjavascriptのメソッドを使用し、Markdownからhtmlへの変換処理を作成しました。
一度作成してしまえば、少し面倒なhtmlも自作のMarkdown記法でスイスイ書くことができると思います。
ぜひお試しください。