コードブロックのスタイル変更

Bloggerに開設したこのブログの、コードブロックのスタイルを変更しました。 --- 僕は、日頃、技術的なメモを、VSCode上で、マークダウン形式で作成しています。 ブログ投稿記事も同じように作成していて、VSCodeのプレビューで確認したコードブロックが、できるだけそのままにBloggerでも見えるようにしたいと思い、Bloggerのコードブロックのスタイルを変更することにしました。 以下、その作業記録です。 <a name='more'></a> --- ## 環境 このブログ運用に関わる環境は、以下の通りです。 - ブログサービス：Blogger - 元テーマ：Awesome.Inc - マークダウン・プラグイン：Marked.js（0.6.2） - シンタックス・ハイライト・プラグイン：highlight.js(9.15.6) - [highlight.js 導入手順](https://logospathos-techlog.blogspot.com/2019/04/bloggerhighlightjs.html) - 数式表示プラグイン：KaTeX（0.10.0） - マークダウン・エディタ：VSCode（1.33.1） - マークダウン関連拡張機能： - Markdown All in One（2.2.0） - Markdown Preview Enhanced（0.3.13） - Markdown+Math （2.3.9） --- ## 作業 ### コードブロック用CSSコードの作成 VSCodeのプレビューをブラウザで表示させて、ブラウザの「要素の検査」で、コードブロックのスタイルを抜き出したところ、以下のとおりでした。 インラインのコードのスタイル： ```css html body code { font-family: Menlo,Monaco,Consolas,'Courier New',monospace; font-size: .85em !important; color: #000; background-color: #f0f0f0; border-radius: 3px; padding: .2em 0; } ``` コードブロックのスタイル： ```css pre[class*='language-'] { padding: .8em; overflow: auto; border-radius: 3px; background: #f5f5f5; } code[class*='language-'], pre[class*='language-'] { color: #333; background: none; font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.4; -moz-tab-size: 8; -o-tab-size: 8; tab-size: 8; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } ``` このコードを参考に、以下のコードを作成しました。 ``` CSS /* * Inline Code and Code Block */ code:not([class*='language-']) { font-family: Menlo,Monaco,Consolas,"Courier New",monospace; font-size: 0.85em !important; line-height: 1.6; color: #000; background-color: #f0f0f0; border-radius: 3px; padding: .2em 0; word-wrap: break-word; } code::before, code::after { letter-spacing: -0.2em; content: "\00a0"; } pre { font-size: 0.85em !important; background: #f5f5f5; border: #d6d6d6; margin-top: 0px; margin-bottom: 16px; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; } ``` 基本的に、highlight.jsでハイライトされるコードブロックには、[highlight.jsで適用したスタイル`vs2015`](https://logospathos-techlog.blogspot.com/2019/04/bloggerhighlightjs.html)で満足することにし、ただコードを折り返さず、横スクロールするようにしました。 一方、highlight.jsでハイライトされない（要素`class*='language-'`でない`code`要素）、インラインのコードには背景色等を設定しました。 ### コードブロック用CSSコードの適用 1. 「ダッシュボード」-「テーマ」から、「カスタマイズ」ボタンをクリック。 2. 「Blogger テーマ デザイナー」-「上級者向け」-「CSSの追加」をクリック。 3. 「カスタム CSS を追加」欄にコードブロック用に用意したCSSコードを入力。 4. 「ブログに適用」ボタンをクリックして、追加コードを適用する。 ## 結果 インラインのコードには、薄い背景色がつき、コードブロックは横スクロール付きで、折り返しなしで表示されるようになりました。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9GEdy9M3l3uyEKwJcXQ6bdJc3yThzl9Qzce7j3rlA4L0IYWDHuCZ58hYSzTajFeEnHk-sJ6D7g7m9UCIBVx-kWpTDscL_f3n5fkMIjo9glmSN2fa3VBuwA4jLcPVGhk6wQW95xAL_2E/s1600/20190502-01_%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%25E3%2583%2596%25E3%2583%25AD%25E3%2583%2583%25E3%2582%25AF%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%25AB%25E5%25A4%2589%25E6%259B%25B4_01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9GEdy9M3l3uyEKwJcXQ6bdJc3yThzl9Qzce7j3rlA4L0IYWDHuCZ58hYSzTajFeEnHk-sJ6D7g7m9UCIBVx-kWpTDscL_f3n5fkMIjo9glmSN2fa3VBuwA4jLcPVGhk6wQW95xAL_2E/s320/20190502-01_%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%25E3%2583%2596%25E3%2583%25AD%25E3%2583%2583%25E3%2582%25AF%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%25AB%25E5%25A4%2589%25E6%259B%25B4_01.png" width="320" height="122" data-original-width="628" data-original-height="240" /></a></div> ただ、コードブロックの1行目に余分なスペースが入ってしまっています。直接的には、`pre`要素のプロパティで`white-space: pre;`を指定していて、`code`要素内でタグの次に改行が入っているためですが、マークダウンでこの改行をどのようにすればいいのか、調査が必要なようです。 --- ## 今後の課題 * [ ] コードブロックの一行目に余分なスペースが入ってしまいます。 --- ## 更新履歴 2019-05-02 新規作成