ホーム / 方法 /

Bloggerでソースコードをカッコ良く表示する方法

Blogger HTML ソースコード 方法

t f B! P L

自分のブログは、気付くとコード類やエクセルに関する内容が多くなってきています…😅

その中で、他の皆様のようにカッコよくソースコードを表示させたくて、皆様方の方法をパクり…リスペクトし…🙇

今は、0kuwa様の下記グログで記述されたものを活用させていただいております。
Bloggerでソースコードを貼り付ける（改改）
こちらのブログで記述頂いている内容はとても分かりやすいのですが、毎回伺っている状態なので、恐縮ながら自分のブログにも備忘として記述致します✨

なお、基本的に0kuwa様が記述されている内容のうち、自分に必要そうな部分を抽出して、再掲しているのようなものですので、詳細は上記ブログを御覧ください🙇

ソースコードをハイライトできるようにする設定

ハイライト（当記事では、“コードの言語部分とその他を色分けすること”の意味で使ってます。）できるようにするためには、Bloggerの「テーマ」の「HTMLの編集」を実施します😆👍

とは言え、編集画面の<body></body>の間に以下のコードをコピペするだけ✨

<!-- SyntaxHighlighter 追加 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"/>
<!-- autoloader対応 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js"/>
<!-- /HTMLと他言語を同時にハイライト対応用(html-script: true) -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"/>
<!-- テーマの読み込み(shCore.css内包版) -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreFadeToGrey.css" />
<script language='javascript' type='text/javascript'>
var shCdnUrlStr='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83';
SyntaxHighlighter.autoloader(
  'actionscript3 as3      '+shCdnUrlStr+'/scripts/shBrushAS3.js',
  'bash shell             '+shCdnUrlStr+'/scripts/shBrushBash.js',
  'coldfusion cf          '+shCdnUrlStr+'/scripts/shBrushColdFusion.js',
  'cpp c                  '+shCdnUrlStr+'/scripts/shBrushCpp.js',
  'c# c-sharp csharp      '+shCdnUrlStr+'/scripts/shBrushCSharp.js',
  'css                    '+shCdnUrlStr+'/scripts/shBrushCss.js',
  'delphi pascal pas      '+shCdnUrlStr+'/scripts/shBrushDelphi.js',
  'diff patch             '+shCdnUrlStr+'/scripts/shBrushDiff.js',
  'erlang erl             '+shCdnUrlStr+'/scripts/shBrushErlang.js',
  'groovy                 '+shCdnUrlStr+'/scripts/shBrushGroovy.js',
  'html xml xhtml xslt    '+shCdnUrlStr+'/scripts/shBrushXml.js',
  'java                   '+shCdnUrlStr+'/scripts/shBrushJava.js',
  'javafx jfx             '+shCdnUrlStr+'/scripts/shBrushJavaFX.js',
  'javascript js jscript  '+shCdnUrlStr+'/scripts/shBrushJScript.js',
  'perl pl                '+shCdnUrlStr+'/scripts/shBrushPerl.js',
  'php                    '+shCdnUrlStr+'/scripts/shBrushPhp.js',
  'text plain             '+shCdnUrlStr+'/scripts/shBrushPlain.js',
  'powershell ps          '+shCdnUrlStr+'/scripts/shBrushPlain.js',
  'python py              '+shCdnUrlStr+'/scripts/shBrushPython.js',
  'ruby rails ror         '+shCdnUrlStr+'/scripts/shBrushRuby.js',
  'scala                  '+shCdnUrlStr+'/scripts/shBrushScala.js',
  'sql                    '+shCdnUrlStr+'/scripts/shBrushSql.js',
  'vb vbnet               '+shCdnUrlStr+'/scripts/shBrushVb.js'
);
SyntaxHighlighter.config.bloggerMode = true; // Blogger対応
SyntaxHighlighter.defaults['toolbar'] = false; // 「?」表示
SyntaxHighlighter.defaults['auto-links'] = false; // 自動リンク
//不具合が起きる為コメント化。使用時はpre側で要記述。
//SyntaxHighlighter.defaults['html-script'] = true; //HTMLと他言語を同時にハイライト
SyntaxHighlighter.defaults['tab-size'] = 2; //tabインデント量
// コード表示させるタグ名(デフォルト"pre")
// SyntaxHighlighter.config.tagName="";
SyntaxHighlighter.all();
</script>
<style>
.syntaxhighlighter {
  font-size: 14px !important; /* フォントサイズ */
  margin: 0.5em 0em 0.5em 0em !important; /* 上下空き */
  border: 1px solid #bbbbbb !important; /* 罫巻 */
  /* 角丸 */
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -ms-border-radius: 10px !important;
  -o-border-radius: 10px !important;
  border-radius: 10px !important;
}
.syntaxhighlighter table caption {
  padding: 0.3em 0 0.1em 1em !important; /* タイトルpadding */
  color: #ffffee !important; /* タイトル文字色 */
  background-color: #666666 !important; /* タイトル背景色 */
}
.syntaxhighlighter, .syntaxhighlighter div,
.syntaxhighlighter code, .syntaxhighlighter span {
  line-height: 1.2em !important; /* 行間 */
}
.syntaxhighlighter table td.code {
  padding: 0.3em 0 !important; /* コードエリアのpadding */
}
.syntaxhighlighter {
  background-color: #222222 !important; /* コード背景色 */
}
.syntaxhighlighter .line.alt1 {
  background-color: #222222 !important; /* コード偶数行背景色 */
}
.syntaxhighlighter .line.alt2 {
  background-color: #333333 !important; /* コード奇数行背景色 */
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a{
    color: #88eeee !important; /* コメント色 */
}
.syntaxhighlighter .preprocessor {
  color: #88eeee !important; /* #以降の色 */
}
.syntaxhighlighter .value {
  color: #00cc00 !important; /* 代入数字色 */
}
.syntaxhighlighter .keyword {
  color: #ff0000 !important; /* キーワード色 */
}
.syntaxhighlighter .script {
  font-weight: bold !important;
  color: #ff0000 !important; /* スクリプト色 */
  background-color: none !important;
}
.syntaxhighlighter.nogutter td.code .container textarea,
.syntaxhighlighter.nogutter td.code .line {
  padding-left: 1em !important; /* 行番号非表示時左空き量 */
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #114466 !important; /* 行強調時、行背景色 */
}
.syntaxhighlighter .line.highlighted.number {
  color: white !important; /* 行強調時、数字？ */
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #3185b9 !important; /* 行強調時、行番号背景色 */
  color: #121212 !important; /* 行強調時、行番号数字色 */
}
</style>
<!-- SyntaxHighlighter 追加 -->
後は、「テーマの保存」を忘れずにクリックして設定完了です。

ハイライトの方法

上記を完了したら、いよいよ記事での作業です✨

ハイライトの方法は2つあり、
  • 『pre』タグを使う方法
  • 『script』タグを使う方法
が、あるようで…それぞれ、一長一短あるようですので、注意点含めて、以下に整理します😆

『pre』タグを使う方法

preタグを使う場合は、HTML画面で以下のように記述する事になるそうです。
<pre class="brush:[言語の選択]" title="タイトル">
書きたいコード
</pre>
なお、記述の際、『<』『>』はそれぞれ、『&lt;』『&gt;』と変換して記述する必要があるのでご注意下さい。

下記のscriptタグですと、『<』『>』をそのまま打っても問題ないようなので、個人的に、『<』『>』が多いコードはscriptタグの方が楽なように感じます。

『script』タグを使う方法

scriptタグを使う場合は、HTML画面で以下のように記述する事になるそうです。
      <script class="brush:[言語の選択]" title="タイトル" type="syntaxhighlighter"><![CDATA[
      書きたいコード
      ]]></script>
なお、上記の通り、『<』『>』については、そのまま記述できますが、以下の通り４つのコードは書き換えが必要とのことです。
  • 『<script>』は『&lt;script&gt;』へ
  • 『]]>』              は『]]&gt;』へ
  • 『</script>』 は『&lt;/script&gt;』へ
  • 『<br />』       は『&lt;br /&gt;』へ

正直、どちらが楽かと言うと、好みの問題のような気がしてきましたが、慣れてしまうとpreタグの方が楽かもしれませんね💦

ハイライトできる言語

ハイライトさせる言語の選択は、preでもscriptでも同様に、『class="brush:[言語の選択]"』の部分で実施します。

例えば、class="brush:html"といった雰囲気です。

なお、先ほどテーマの部分に張り付けた内容であれば、以下の言語に対応しているとの事です✨
  • 『actionscript3』『as3』
  • 『bash』『shell』
  • 『coldfusion』『cf』
  • 『cpp』『c』
  • 『c#』『c-sharp』『csharp』
  • 『css』
  • 『delphi』『pascal』『pas』
  • 『diff』『patch』
  • 『erlang』『erl』
  • 『groovy』
  • 『html』『xml』『xhtml』『xslt』
  • 『java』
  • 『javafx』『jfx』
  • 『javascript』『js』『jscript』
  • 『perl』『pl』
  • 『php』
  • 『text』『plain』
  • 『powershell』『ps』
  • 『python』『py』
  • 『ruby』『rails』『ror』
  • 『scala』
  • 『sql』
  • 『vb』『vbnet』
因みに、特にハイライトする必要が無い場合は、『text』や『plain』とすれば良いようです。

見栄えの調整方法

コードの表示部分については、タイトルや行番号の有無、HTMLとその他の言語の同時ハイライトなど見栄えを変更できるので、その方法も整理したいと思います。

タイトルの表示・非表示について

タイトルは、title=""の部分を変えることで表示を変更できます。

タイトルがいらない場合は、『title=""』とすればタイトルが無くなります。
<pre class=“brush:text“ title="">
タイトルの帯ごと無くなり、
このような雰囲気になります。
</pre>

行番号を表示・非表示について

デフォルトでは、行番号は表示されます。

行番号を非表示にする場合は、『gutter:false』をclassの中に追記します。
<pre class="brush:html gutter:false" title="行番号を非表示にする">
↑のように記述すると、
こんな雰囲気になります。
</pre>

行番号の始まりを変更する

行番号の開始番号も任意に変更可能です。変更する場合は『first-line:任意の数字』をclassの中に追記します。
<pre class="brush:html first-line:15" title="行番号の始まりを15にしてみる">
↑のように記述すると、
こんな雰囲気になります。
</pre>

任意の行を強調表示する

強調したい行があれば、『highlight:[数字列]』をclassの中に追記します。
<pre class="brush:html highlight:[3,4,5,7]" title="3～5、7行目をハイライト！">
↑のように記述すると、
こんな雰囲気になります。
ここはハイライトになっています。
ここはハイライトになっています。
ここはハイライトになっていません。
ここはハイライトなっています。
ここはハイライトになっていません。
</pre>

HTMLに加えて他の言語も同時にハイライトする

このSyntaxHighlighterでは、HTMLと同時に異なる言語もハイライトすることができるようです。

その場合は、『class="brush:[言語]"』の部分を、『class="brush:[言語] html-script: true"』とすれば良いようです。

例えば、pythonとHTMLを同時にハイライトしたければ、
  class="brush:py html-script: true"
ってな感じです👍

その他の色合いなどの見た目は、編集画面の<body></body>にコピペした部分を編集すれば、一括で変更が可能とのことです。
（個別変更をトライしてみましたが、無理でした…）

因みに、この『SyntaxHighlighter』は、プレビューをすることで記述結果を確認することが可能です。
但し、プレビュー時では横スクロース操作はできませんので、ご注意を！

まとめ

先人の知恵をお借りして、コードをカッコ良く表示する方法をまとめてみました😊

更に気になる方は0kuwa様のHPをご覧下さい👍

Tips 【コード内に<>を表示する方法】
この記事を書いていて、HTML編集で<>を表示する方法に躓きましたので、残しておこうと思います。
  • &amp;lt;で<
  • &amp;gt;で>
が表示されます👍

Profile

自分の写真
Japan
茨城県で生まれ育ち、千葉県、愛知県、岐阜県を経由して、今に至る妻子持ちのオッサンです。 基本手抜きが大好きで、どうすれば定常作業の手抜きができるのか？を悶々と考え続けてます(・_・;)

このブログを検索

QooQ

Blogger