SyntaxHighlighterでソースコードの見た目を簡単に変更する方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
あなたがブログに載せているソースコード。その見た目を少し変えてみませんか?
プログラミングの学習記録や備忘録として書いているソースコードの見た目を変えるだけで、その記事全体の印象も変わります。

今回はそれぞれテーマの表示の違いとその変更方法についてお話します。

スポンサーリンク

テーマごとの表示の違い

SyntaxHighlighterのテーマは全部で8種類あります。
それぞれのテーマがどのように表示されるのか、サンプル(記述言語:CSS)を見ていきましょう。

shThemeDefault.css
その名の通り、デフォルトではこれになってます。シンプルイズベスト!って方にオススメ。

shThemeDjango.css
コメントや行番号が深緑っぽい色なので、若干見づらいです。(私だけ??)

shThemeEclipse.css
上の「shThemeDefault.css」と若干似ていますが、コードの色が変わっています。

shThemeEmacs.css
色合いがハッキリしていて見やすい反面、少し目がチカチカするかも。

shThemeFadeToGrey.css
コメントの色がグレーで全体的に見やすいです。個人的にはこれが一番好き。

shThemeMDUltra.css
他のテーマと違って、「.post-body {」の部分にも色がついています。全体的にカラフルな印象。

shThemeMidnight.css
少し分かりづらいですが背景が真っ黒ではなく、暗い青色です。



shThemeRDark.css
こちらは「shThemeFadeToGrey.css」と似ていますが、比較すると落ち着いた感じです。

以上、全8種類のテーマでした。
サンプルとして記述言語は「CSS」でご紹介しましたが、「HTML」や「JAVA」など他の記述言語によって文字の色も変わります。
あなたが使っている言語で試していただくと、また少し違った印象を受けることでしょう!

スポンサーリンク

SyntaxHighlighterのテーマ変更方法

1. Blogger管理画面「テンプレート」→「HTMLの編集」を選択

2. 上の8種類のいずれかに書き換えて、「テンプレートを保存」→「戻る」を選択

おしまい!たったコレだけです。

スポンサーリンク

さいごに

いかがでしたか?テーマを変更するだけで見た目が全然違いますね。
ソースコードを目立たせたい時やブログ全体のデザイン(背景色や文字色)にマッチしたテーマを使うことによって、グッと見やすくなります。
(えらそうに言ってますが、デザインに関してはじぇんじぇん分かりません)
カラフルなものがあったり、落ち着いた色合いのものがあったり、どのテーマが自分のブログに合っているか試してみると楽しいですよ。

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント