午後から→オーバークロック

駆け出しハッカー()によるプログラミング・サービス開発備忘録。

HTML単体でMarkdownを表示させる

テンプレートファイル

marked.jsを使用。 以下のテキストを書き込んだhtmlを開けばすぐにマークダウンが見れます。

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="UTF-8">
       <link href="https://rawgithub.com/jasonm23/markdown-css-themes/gh-pages/markdown7.css" rel="stylesheet"></link>
   </head>
    <body>
        <div id="container">
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
        <script>
var markdown = (function() {/*

# First level header

## Second level header

- あめんぼあかいな
  - あいうえお
- **うきも**に`こえび`もおよいでる

---

>かきのきくりのきかきくけこ

*/}).toString().match(/\/\*([^]*)\*\//)[1];
           var md = marked(markdown);
           $("#container").append(md);
       </script>
    </body>
</html>

f:id:nemupm:20151204153114p:plain

CSSファイルについて

github.com

上記 CSSをお借りしました。 mime typeの関係でrawgithub.comを使っています。