Bloggerでコードブロックを美しく表示するためには、以下の２つのステップを踏みます。
STEP１：テーマのカスタマイズ
テーマの編集 Bloggerのダッシュボードにログインし、「テーマ」セクションに移動します。
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スクリプトとスタイルを読み込みます。
- 保存 変更を保存して、ブログを確認します。
方法２：本文内のコードブロック
- コードの挿入 ブログ記事の本文に、以下のような形式でコードを挿入します。
<pre class="prettyprint lang-python linenums">
# ここにソースコード
</pre>
この例ではPythonのコードを示していますが、自分のコードの言語に合わせてlang-xxxxの部分を変更してください。
- 保存してプレビュー 変更を保存して、ブログをプレビューまたは公開して、コードが正しく表示されるか確認します。
これらの手順に従うことで、Bloggerでコードブロックをきれいに表示することができます。手順に迷ったり問題が生じた場合は、テーマの設定画面やHTMLの編集画面で変更を元に戻すことができます。
.jpeg)
