• TOP
• Javascript

Bloggerでシンタックスハイライトも含めたMarkdownな環境を構築する

2021-10-28T21:45:00-07:00 2021-11-03T04:15:18Z Blogger Javascript

#### 目的 無料で広告なしの記事が書けるBloggerですが残念なことに Markdown記法に対応していません。 この記事では自分がBloggerをMarkdown記法に対応させるまでにしたことをまとめます。 BloggerにMarkdown記法とシンタックスハイライトを適用するための記事は既に存在するのですが個人的にいくつか足りない機能があったためその補完が目的です。 Markdownを適用するだけならこちらの記事

【blogger】シンタックスハイライトはprism.jsで - 夢見るひよこのデジタルライフ備忘録

dreamingchicktakenotes.blogspot.com

BloggerでMarkdown書けるようにした。 - Qiita

undefined

qiita.com

に丁寧に書いて下さっている方がいるので問題なくできました。 しかしMarkdown記法に使うMarked.jsの仕様で言語指定のないコードブロックが生成されません。 例えば ````` ``` ``` ````` という風に書いてもコードブロックが生成されません。 ````` ```javascript ``` ````` こちらなら問題なく動作します。 またシンタックスハイライトに使われているprism.jsの仕様？なのか*や=などのトークン（記号に）余計な背景色がついてしまう場合があります。  これらの問題を修正するためにBloggerのテーマのHTMLの/bodyのすぐ上に次のコードを追加します。 ```html <style> code[class*="language-"], pre[class*="language-"], code,pre{ background: #eeeeee; text-shadow: 0 1px white; color: black; white-space: pre; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; word-spacing: normal; word-break: normal; word-wrap: normal; } pre { margin: 1em 0; /* ブロック前後の余白 */ padding: 1em; /* ブロック内の余白 */ border-radius: 5px; /* 角丸 */ overflow: auto; } </style> <style> .token.string, .token.operator { background: none !important; } </style> ``` これで問題なく書けるようになります。 追記 marked.jsのバージョンが4.0.0に上がり(2021/11/02)上記サイトのコードがうまく機能しなくなっているようです。とりあえず使えるようにしたいという方は読み込むバージョンを次のように変更してください。 ``` https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.8/marked.min.js ```