blogger格闘記③ コードブロックの一行目が空白になる

コードブロックを実装できたはいいものの、一行目が空欄になってデザイン的にちょっとキモかったという記録です。

原因

<pre><code> 

const name = "ちひろ";

のように<code>の後ろで改行していた。

解決方法

<pre><code>const name = "ちひろ";

のようにすればいいのだけど、vscodeで整形されると結局改行が入るし、何より見た目がキモい。

ので、JavaScriptを使って、<code>内は自動的に先頭の改行を削除するようなスクリプトを追加。これにより、vscodeで整形されたコードでも一行目が空白にならずに表示できるようになりました。

以下を</body>の直前に入れています。