やりたかったこと
簡単にWebサイトを作って公開したかった。
ただし
- Markdownで書きたい（生のHTMLは書きたくない）
- 好きなCSSを当てたい
※1 CSSにこだわらなければVS Codeのプラグインを使ってHTMLやPDFを吐き出すのが早くて簡単です。
※2 Blogが書きたいのであればHugoとかJekyll、GatsbyJSを検討してください。
というわけで
- Markdownでコンテンツを書いた。
- Markdown -> HTML変換するJavaScriptライブラリ(Marked)を選んだ。
悩んだこと
ググってもQiitaみたいに動的にMarkdownをHTMLに変換する方法しか出てこなかった。
Markdownで書かれたコンテンツをHTMLで読み込んで表示する方法がわからない。
ということをぼんやりつぶやいたら神が現れた。圧倒的感謝🙏
https://t.co/zLAByYOKJ3
— dtsuji🥑 (@dim0627 ) 2018年12月27日
できました😊
コードとその内容
教えて頂いたコードとその理解を備忘録として残しておきます。
markedのreadmeに書かれている箇所は割愛させていただきます。
全体
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('./content.md')
.then(response => document.querySelector('#content').innerHTML = marked(response.data));
</script>
</body>
</html>
要点１
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Promise based HTTP client for the browser and node.js
axiosは非同期なHTTPクライアントです。
要点2
axios.get('./content.md')
markdownファイルをGET Methodで取得しています。
要点3
.then(response => document.querySelector('#content').innerHTML = marked(response.data));
重要なのは.then();の部分です。
axiosは非同期なのでgetの成功を待つためにthenを使用します。
上記のコードではgetしたresponseからdataを取り出しています。
取得したMarkdownに対して何かを行う場合はthenの中に処理を書きます。
（私はTocbotを使用してtocを自動生成する処理を書きました。）
Top comments (0)