Bloggerにソースコードを載せる時のデザインを導入（SyntaxHighlighter）

2025/01/21

Bloggerの私なりのメンテナンスもだいぶ落ち着いて、最初の方に書いた記事のリライトをしているのですが、ずっと放置していたプログラムのソースコードの記述デザインについて、ようやく修正しました。

「Bloggerのテーマを変更した話」の記事の時点で修正はしたのですが、その後、同テーマのバージョンアップがあったため再度テーマを差し替えたのです。Bloggerって結局テーマで全て構築されているので、テーマを新しくするってなると自分が手直ししたところをまたやり直すことになるのですよね。

まぁそもそもBlogger自体使ってる人も居ないのでアレですが、HTML修正した個所はどこかに記録しておくと後々の作業がやりやすいかもしれません。いや、私が...単純にめんどくさがって適当に修正したのが悪いのですが。運用・保守の際のドキュメントって大事ですよねぇ（白目

bloggersyntaxhighlighter

そして以前から同じものを使ってはいたのですが、備忘録も兼ねて。プログラミングコードの記述レイアウトについて下記のブログの記事を参考にさせていただいたことを改めてご紹介いたします。Blogger民の先人の知恵をお借りしております。いつも思いますが、本当にBlogger民の皆様、ありがとうございます！

表示例

実際のデザインは下記の通りです。

import openpyxl as excel

#新規ワークブックを作る
book = excel.Workbook()

#アクティブなシートを得る
sheet = book.active

#連続でセルに値を設定する
for i in range(10):
sheet.cell(row=(i+1),column=1,value=i)

#ファイルを保存
book.save("test.xlsx")

黒背景で基本が白文字、タイトル・行番号付きです。今回導入したデザインにはコピー機能や選択機能はありませんでした。なので、見栄えだけ...って感じですかね。私の場合は、特に長いコードを書くつもりはないので、これで充分かなって思っています。

導入手順

メニューから「テーマ」を選択します。
「カスタマイズ」横のプルダウンから「バックアップ」を選択します。
「カスタマイズ」横のプルダウンから「HTMLの編集」を選択します。
エリア内でCtrl＋Fで検索ボックスを表示させ、</body>タグを検索します。
上記の「ブログでソースコードを張り付ける（改改）」記事にあるスクリプトコードをコピーします。
</body>タグの上部へ貼り付けます。
HTMLを上書き保存します。

使用方法

投稿で記事の編集画面が表示されたら、「HTMLビュー」に切り替えます。

下記の通り<pre>タグ内にソースコードを記述します。また、classにはプログラミング言語を指定し、titleはファイル名などを記載すると良いでしょう。classにプログラミング言語を指定してもソースコードにはその言語が何であるかは表示されないので、複数言語を扱う場合は都度、タイトルなどに表記しておくと親切だと思います。

<pre class="brush:python" title="【python】ファイル名：test.py">
import openpyxl as excel

#新規ワークブックを作る
book = excel.Workbook()

#アクティブなシートを得る
sheet = book.active

#連続でセルに値を設定する
for i in range(10):
sheet.cell(row=(i+1),column=1,value=i)

#ファイルを保存
book.save("test.xlsx")
</pre>