『marked.js』を使ってブラウザ上で markdown を html に変換する方法

10 years ago

今まで markdown-js ってのを使っていたのですが, marked ってやつが table とか code block とかデフォルトで対応してて良い感じだったので導入がてらまとめました.

ついでに簡易エディタの作り方もざっくり書いたので最後まで見てもらえると幸いです.

marked.js とは

A full-featured markdown parser and compiler, written in JavaScript. Built for speed.

markdown 用のパーサー&コンパイラです.
javascript で書かれていて高速です!

marked.js の使い方

超簡単です! marked.js を読み込んで marked(テキスト) を実行するだけです.

<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>  
<script>  
var md = marked("# Hello, world!");  
console.log(md); // <h1 id="hello-world-">Hello, world!</h1>  
</script>

最小サンプルを用意しました. よかったら遊んでみてください.

[runstant]

marked.js で簡易 markdown エディタを作ってみた

ついでに runstant 上で簡易 markdown エディタ作ってみました.

こちらで実行できます. エディタ側のフォーカスをはずした際に変換されてプレビュー側に反映されます.

[runstnat]

html/less/js の組み合わせです.
下記にコード全体を載せておきます.

html

marked.min.js を読み込んで, editor 用, preview 用それぞれの要素を定義しています.

<!DOCTYPE html>

<html>  
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <title>${title}</title>
        <meta name="description" content="${description}" />

        <style>${style}</style>

        <script src="http://cdn.rawgit.com/phi-jp/high/0.0.3/high.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
        <script>${script}</script>
    </head>
    <body>
        <div class='editor'>
            <h2>editor</h2>
            <textarea class='ta'># Hello, world!</textarea>
        </div>
        <div class='preview'>
            <h2>preview</h2>
            <textarea class='ta'></textarea>
        </div>
    </body>
</html>

less

左半分に editor, 右半分に markdown の変換結果が表示されるように配置しています.

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

body {  
    background-color: rgb(240, 240, 250);
}

h2 {  
    font-size: 1.5rem;
    line-height: 1.6rem;
    font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    margin: 5px;
    padding: 0px;
}

.ta {
    width:100%;
    height:100%;
    font-size: 14px;
}

.editor {
    padding: 10px;
    width: 50%;
    position: absolute;
    left: 0px;
    height:60%;
}

.preview {
    padding: 10px;
    right: 0px;
    width: 50%;
    position: absolute;
    height:60%;
}

javascript

やっている流れは

editor, preview それぞれの textarea 要素を取得
sync メソッドを定義
- エディタの内容を取得
- marked を使って markdown -> html
- preview に変換結果を代入
- コンソールにも出力
editor からフォーカスをはずした際(blur)に sync するようイベントリスナを登録
一回 sync しとく

ってな感じです.

/*
 * # 『marked.js』 を使ってブラウザ上で markdown を html に変換する方法
 */


window.onload = function() {  
    // 要素を取得
    var editorTA = document.querySelector('.editor .ta');
    var previewTA = document.querySelector('.preview .ta');

    var sync = function() {
        var value = editorTA.value; // テキストエリアから値を取得
        var md = marked(value); // マークダウンに変換
        previewTA.value = md; // プレビューにぶっこむ
        console.log(md); // コンソールにも出しとく
    };

    // ブラー時に変換する
    editorTA.onblur = sync;

    // 一回やっとく
    sync();
};

marked.js を使えば簡単にこういったエディタを作ることができますね♪

phi

phiaryjust a creator