Bloggerでコードブロックをきれいに表示する方法

Bloggerでコードブロックを美しく表示するためには、以下の２つのステップを踏みます。

STEP１：テーマのカスタマイズ

1. テーマの編集 Bloggerのダッシュボードにログインし、「テーマ」セクションに移動します。

2. HTMLの編集 テーマ設定画面で「カスタマイズ」からまたは「HTMLを編集」を選択します。そして、</head>の直前に以下のコードを挿入します。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'>
</script>
<style type='text/css'>
pre.prettyprint.linenums li {
list-style-type: decimal;
}
</style>

上記のコードは、コードの表示を整形するためのPrettifyスクリプトとスタイルを読み込みます。

1. 保存 変更を保存して、ブログを確認します。

方法２：本文内のコードブロック

1. コードの挿入 ブログ記事の本文に、以下のような形式でコードを挿入します。

<pre class="prettyprint lang-python linenums">
# ここにソースコード
</pre>

この例ではPythonのコードを示していますが、自分のコードの言語に合わせてlang-xxxxの部分を変更してください。

1. 保存してプレビュー 変更を保存して、ブログをプレビューまたは公開して、コードが正しく表示されるか確認します。

これらの手順に従うことで、Bloggerでコードブロックをきれいに表示することができます。手順に迷ったり問題が生じた場合は、テーマの設定画面やHTMLの編集画面で変更を元に戻すことができます。