markdown コンテンツを javascriptで表示する #HTML

Qiita初投稿です。
これまで、ちまちまとhtmlべた書きのホームページを公開していたのですが書くのが面倒になってきて、markdownを直接表示できるようにしてみました。

こんな感じです。

markdownで書いたもの

# WebブラウザのレンダリングとAngular の change detection
WebフレームワークとHTML 描画の仕組みの関係を研究する。

## react.js と仮想DOM
### 仮想DOM
- [仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう](https://employment.en-japan.com/engineerhub/entry/2020/02/18/103000)
- [ブラウザの仕組み: 最新ウェブブラウザの内部構造](https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/)

ソースコード

jquery + marked.js でできました。

html

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="UTF-8">
       <link href="../../lib/marked/0.3.5/markdown7.css" rel="stylesheet"></link>
   </head>
    <body>
        <div id="container">
        </div>
        <script src="../../lib/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <script src="../../lib/marked/0.3.5/marked.min.js"></script>
        <script src="../../script/showmarkdown.js"></script>
    </body>
</html>

showmarkdown.js

function loadFile(fileName, callback){
    httpObj = new XMLHttpRequest();
    httpObj.open('GET', fileName+"?"+(new Date()).getTime(),true);
    // ?以降はキャッシュされたファイルではなく、毎回読み込むためのもの
    httpObj.send(null);
    httpObj.onreadystatechange = function(){
       if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
           callback(httpObj.responseText);
       }
    }
 }

 var list = [];
 loadFile('tech_study_of_web_framework.md', function(resultText) {
     var md = marked(resultText);
     $("#container").append(md);
 });

サーバ上のファイルの読み込み

httpObjで読み込みます。
ちなみにこのコードではローカルのファイルはCORSに阻まれて読めないため、サーバにアップロードしないと動作確認できません。

function loadFile(fileName, callback){
   httpObj = new XMLHttpRequest();
   httpObj.open('GET', fileName+"?"+(new Date()).getTime(),true);
   // ?以降はキャッシュされたファイルではなく、毎回読み込むためのもの
   httpObj.send(null);
   httpObj.onreadystatechange = function(){
      if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
          callback(httpObj.responseText);
      }
   }
}

markdown を表示

先ほどの loadfile を呼び出したものを marked に渡して表示してあげます。callbackになります。

var list = [];
loadFile('tech_study_of_web_framework.md', function(resultText) {
    var md = marked(resultText);
    $("#container").append(md);
});

これで、markdownで編集するだけで素敵に整形されて表示されるようになりました。