Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Marked.js で Markdown をクライアント側でパースして表示する

Typescript クイックガイド で、ソースを見たら Markdown で書かれてたのをみて「カッケー」と思ったのと、利用規約やプライバシーポリシーは Github に置くといいよ というのを見て、なら「github に .markdown ファイルを置いてクライアントサイドでスタイリングできたら嬉しいじゃん?」と思いやってみた。

Javascript による markdown パーサいろいろ

上記 Typescript クイックガイド では marked.js が使われているようだが、他にもいろいろある模様。下記にて比較してくださっている。

もともと marked.js を使おうと思ってたし、上記サイトでも問題無さそうだったので、そのままいく。


marked.js を読み込んだ後、

var formatted = marked(markdown_text)

で、HTML に整形された文字列が返されるというシンプルなもの。(整形オプションがいろいろあるようだが割愛)

Typescript クイックガイドでは、HTML 内に Markdown テキストがベタ書きされていたが、せっかくなので管理がしやすいように外部 Markdown ファイルを読みこむようにしてみた。

<!DOCTYPE html>
<html lang="ja">
        <meta charset="utf-8">

        <title>Markdown renderer</title>
        <meta name="description" content="Markdown renderer">

        <!-- bootstrap -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" rel="stylesheet">

        <!-- js libraries -->
        <script type="text/javascript" src="js/jquery-2.0.3.js"></script>
        <script type="text/javascript" src="js/marked.js"></script>
                var target = $("#markdown_content");

                    url: target[0].attributes["src"].value,
                    target.append("This content failed to load.");

        <!-- Content -->
        <div class="container">
            <div id="markdown_content" src="./sample.markdown"> </div>

一番下の <div id="markdown_content" src="./sample.markdown"> の src に読み込む Markdown ファイルを指定するようにした。

bootstrap で見栄えを良くしているが、必須ではない。

こちらが デモ

marked() は非同期版もあるようなので、そちらを使うべきだったかな。


Octopress とか、HTMLを生成しちゃうんじゃなくて、クライアントサイドで 「Markdown を描画する」できると、投稿の手間が減って良いかもですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
Help us understand the problem. What are the problem?