DEV Community

d.yoshimitsu
d.yoshimitsu

Posted on

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

#html #javascript

やりたかったこと

簡単に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で読み込んで表示する方法がわからない。
ということをぼんやりつぶやいたら神が現れた。圧倒的感謝🙏

コードとその内容

教えて頂いたコードとその理解を備忘録として残しておきます。
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)