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で編集するだけで素敵に整形されて表示されるようになりました。