HTML ファイル内に直接書いた Markdown を変換して GitHub のスタイルで表示させる話

# 概要
marked.js を用いて，HTML ファイル内に直接記述された Markdown を変換し，さらに github-markdown-css を用いて GitHub の Markdown スタイルで表示させる．
# 詳細
かつてこんなことを呟いていた:
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">ふとMarkdownでWebページを書けたら楽だろうなと思って調べてみたら、もとはHTMLに変換できるフォーマットとして開発されたものらしい。下記ページのようにうまくやればHTMLファイル中にMarkdownで書くこともできるみたい。<a href="https://t.co/zOQe1Gu3ZA">https://t.co/zOQe1Gu3ZA</a></p>&mdash; 電気魚 (@denkiuo604) <a href="https://twitter.com/denkiuo604/status/1137129286026928129?ref_src=twsrc%5Etfw">June 7, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記ツイートにもある通り，[こちら](https://qiita.com/tukiyo3/items/b5180233843497103e8a)の記事を参考にして，HTML ファイル内に直接記述された Markdown を変換・表示させた．以下はそのサンプルコードである:

```html:markdown.html
<!DOCTYPE html>
<title>Markdown</title>
<meta charset="UTF-8">
<meta name="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>
<div id="mdrender"></div>
<div id="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(/&gt;+/g, '>'));
</script>
```
実際の表示は次のようになる:
![markdown](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478774/51563105-2f3d-d1f4-b0c2-ab2db240aaa7.png "markdown.htmlの表示")
これで呟きは実現されたわけだが，ちょっとページが味気ない．何か適当なスタイルシートを適用できれば良いなと思い探してみたら [github-markdown-css](https://github.com/sindresorhus/github-markdown-css) というのを見つけた．このスタイルシートを適用すると，GitHub 上で Markdown 形式の文書を閲覧したときと同様の表示にできる．以下はそのサンプルで，先ほどのサンプルコードに一部追記したものである:

```html:github-markdown.html
<!DOCTYPE html>
<title>GitHub Markdown CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="https://sindresorhus.com/github-markdown-css/github-markdown.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div id="mdrender" class="markdown-body"></div>
<div id="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(/&gt;+/g, '>'));
</script>
```
具体的な追加内容は次の通り:

- 適用するスタイルシートを表記:

```html
<link rel="stylesheet" href="https://sindresorhus.com/github-markdown-css/github-markdown.css">
```
- スタイルシートが適用されるクラス `markdown-body` を表記:

```html
<div id="mdrender" class="markdown-body"></div>
```
実際の表示は次のようになる:
![github-markdown](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478774/7bfa0efd-1768-eb05-0443-3dff6f00036a.png "github-markdown.htmlの表示")
GitHub を使う人にはお馴染みの見た目である．

# 参考
- [marked.js使ってみた - Qiita](https://qiita.com/tukiyo3/items/b5180233843497103e8a)
- [sindresorhus/github-markdown-css: The minimal amount of CSS to replicate the GitHub Markdown style](https://github.com/sindresorhus/github-markdown-css)
- [Blockquotes not recognized · Issue #874 · markedjs/marked](https://github.com/markedjs/marked/issues/874)
    - 各サンプルコードの最後の `script` タグ内に `marked(...innerHTML.replace(/&gt;+/g, '>'));)` という記述をしているが，この `replace` が無いと `>` が引用の意味で機能しなくなってしまう．