HTML
JavaScript
HTML5

静的なWebサイトをMarkdownで作りたい


やりたかったこと

簡単に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で読み込んで表示する方法がわからない。

ということをぼんやりつぶやいたら神が現れた。圧倒的感謝:pray:


コードとその内容

教えて頂いたコードとその理解を備忘録として残しておきます。

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>


要点1

<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を自動生成する処理を書きました。)