概要
marked.js を用いて，HTML ファイル内に直接記述された Markdown を変換し，さらに github-markdown-css を用いて GitHub の Markdown スタイルで表示させる．
詳細
かつてこんなことを呟いていた:
ふとMarkdownでWebページを書けたら楽だろうなと思って調べてみたら、もとはHTMLに変換できるフォーマットとして開発されたものらしい。下記ページのようにうまくやればHTMLファイル中にMarkdownで書くこともできるみたい。https://t.co/zOQe1Gu3ZA
— 電気魚 (@denkiuo604) June 7, 2019
上記ツイートにもある通り，こちらの記事を参考にして，HTML ファイル内に直接記述された Markdown を変換・表示させた．以下はそのサンプルコードである:
markdown.html
<!DOCTYPE html><title>Markdown</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><divid="mdrender"></div><divid="mdraw"style="display:none;">
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
*italic*
**太字**
**bold and _italic_**
~~取り消し線~~
[リンク (GitHub)](https://github.com/)
1. 富士
2. 鷹
3. 茄子
- 箇条書き1
- 箇条書き2
- 箇条書き3
> 吾輩は猫である。
> 名前はまだ無い。
</div><script>document.getElementById("mdrender").innerHTML=marked(document.getElementById("mdraw").innerHTML.replace(/>+/g,'>'));</script>実際の表示は次のようになる:
これで呟きは実現されたわけだが，ちょっとページが味気ない．何か適当なスタイルシートを適用できれば良いなと思い探してみたら github-markdown-cssというのを見つけた．このスタイルシートを適用すると，GitHub 上で Markdown 形式の文書を閲覧したときと同様の表示にできる．以下はそのサンプルで，先ほどのサンプルコードに一部追記したものである:
github-markdown.html
<!DOCTYPE html><title>GitHub Markdown CSS</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0"><linkrel="stylesheet"href="https://sindresorhus.com/github-markdown-css/github-markdown.css"><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><divid="mdrender"class="markdown-body"></div><divid="mdraw"style="display:none;">
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
*italic*
**太字**
**bold and _italic_**
~~取り消し線~~
[リンク (GitHub)](https://github.com/)
1. 富士
2. 鷹
3. 茄子
- 箇条書き1
- 箇条書き2
- 箇条書き3
> 吾輩は猫である。
> 名前はまだ無い。
</div><script>document.getElementById("mdrender").innerHTML=marked(document.getElementById("mdraw").innerHTML.replace(/>+/g,'>'));</script>具体的な追加内容は次の通り:
- 適用するスタイルシートを表記:
<linkrel="stylesheet"href="https://sindresorhus.com/github-markdown-css/github-markdown.css">- スタイルシートが適用されるクラス
markdown-bodyを表記:
<divid="mdrender"class="markdown-body"></div>実際の表示は次のようになる:
GitHub を使う人にはお馴染みの見た目である．
参考
- marked.js使ってみた - Qiita
- sindresorhus/github-markdown-css: The minimal amount of CSS to replicate the GitHub Markdown style
- Blockquotes not recognized · Issue #874 · markedjs/marked
- 各サンプルコードの最後の
scriptタグ内にmarked(...innerHTML.replace(/>+/g, '>'));)という記述をしているが，このreplaceが無いと>が引用の意味で機能しなくなってしまう．
- 各サンプルコードの最後の