📖

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

1 min read

目的

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

https://dreamingchicktakenotes.blogspot.com/2017/03/bloggerprismjs.html
https://qiita.com/her0m31/items/1804bdc251a647e0e9a8
に丁寧に書いて下さっている方がいるので書いてある通りにすることで問題なくできました。
しかしMarkdown記法に使うMarked.jsの仕様で言語指定のないコードブロックが生成されません。
例えば
```
```

という風に書いてもコードブロックが生成されません。

```javascript
```

こちらなら問題なく動作します。
またシンタックスハイライトに使われているprism.jsの仕様?なのか*や=などのトークン(記号に)余計な背景色がついてしまう場合があります。

これらの問題を修正するためにBloggerのテーマのHTMLの/bodyのすぐ上に次のコードを追加します。

<style>
  code[class*=&quot;language-&quot;],
  pre[class*=&quot;language-&quot;],
  code,pre{
     background: #eeeeee;
     text-shadow: 0 1px white;
     color: black;
     white-space: pre;
     font-family: Consolas, Monaco, &#39;Andale Mono&#39;, &#39;Ubuntu Mono&#39;,  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>

これで問題なく書けるようになります。
実際にMarkdownで書かれたBlogger

https://tiki-ticker.blogspot.com/2021/10/phinajs.html
追記
marked.jsのバージョンが4.0.0に上がり(2021/11/02)上記サイトのコードがうまく機能しなくなっているようです。とりあえず使えるようにしたいという方は読み込むバージョンを次のように変更してください。
https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.8/marked.min.js

Discussion

ログインするとコメントできます