SyntaxHighlighterを導入してソースコードを見やすくしてみました

2013/07/27 2015/03/08

SyntaxHighlighterでソースコードを見やすくする

　
PHPのソースコードを始め、ソースコードの部分が見にくいなぁ、と以前から思っていましたが、ブログを再開後しばらくして便利なツールがあることを知りまして、今回、それを入れてみることにいたしました。
　
その便利なツールが「SyntaxHighlighter」です。
　
現在は、Ver 3.0になっているようで、機能的にも徐々にバージョンアップしてきているようですね。
設置の方法もブログなどを探していただくと、いろいろと情報提供をしてくれている方も増えてきていて、それほど苦労せずに設置できるんじゃないかなぁ。と思い．．．．たいですね。
　
　

SyntaxHighlighter設置の参考サイト

　
設置の方法としては、下記のサイトに分かりやすく説明がしてありました。
http://www.netyasun.com/syntaxhighlighter/
http://controlkey.blog.fc2.com/blog-entry-16.html
　
最初は上の方のサイトを見て「SyntaxHighlighter」の基本的な使い方を勉強して、2コ目のサイトで FC2ブログへの設置方法を勉強しました。
　
しかしっ！！
私は、2週間前の三連休の時に 2日間ほど設置に時間を費やしたあげくに「’SyntaxHighlighter’は宣言されていません。」という JavaScriptのエラーから脱出できずに断念。
　
　

SyntaxHighlighterを設置する際の落とし穴ポイント

　
http://www.872style.com/872/memo/web/SyntaxHighlighter.php
　
そして、今日、改めて上記のサイトを参考にしながらやり直してみました。
このサイトには、Headの部分に書くものと、bodyの最後に書くものと、その理由も含めて書いてありまして、非常に参考になりました。
　
まずは、ローカルに HTMLファイルを作成し、ローカルで動くことを確認しました。
そして、ブログ上に CSS、JSファイルをアップロードして、相対パスで書いていたソースの場所を URL形式の絶対パスに切り替えて動作を確認。
　
そして、動作することを確認した上で FC2ブログ上のテンプレートの修正と、記事の修正を実行。
そして、動作確認．．．．．．
　
でも動かないっ！！！！！
　
2時間ほど悩んでみましたがよく分からず、仕方がないからと、違うテンプレートファイルに同じソースを貼り付けてみると．．．今度は動作しましたっ！！！
　
つまりは、テンプレートによっては CSSの設定なのか、JSの記述の仕方なのか分かりませんが、正しく動作しない場合があります！って言うことですね。
そこまで分析する気がありませんので、テンプレートを変えてよしとします。
　
もし、「SyntaxHighlighter」がブログでうまく動かない場合は、テンプレートを変えてみてください。
動くかもしれません。
　
そんなわけで、このサイトもテンプレートを変更しました。
　
　
ちなみに、最初に参考にしたサイトがありましたが、そのサイトは、トップページの画像のバージョンは、3.0.83となっていたものの、ダウンロードのファイルのバージョンは 1.5.1。
で、最初に参考にしたサイトだったこともあって、よく分からずにそのまま進めて行ってもうまくいかず、表示が崩れてそこでようやくバージョンが違っているということに気づきました。
みなさんもバージョン違いには気を付けましょうっ！！
　
　

SyntaxHighlighterはブラウザによって見え方が違う

　
また、IEではスクロールバーが出る際に最後の 1行が欠けてしまう不具合がありまして、こちらも参考にして対応しました。
http://blog.remora.cx/2010/07/new-function-of-syntaxhighlighter-3.html
　
でも、これを対応しても半分くらい欠けていたので、「margin-bottom: 1em !important;」の部分の「1em」を「2em」にしています。なので、スクロールバーがない場合や、IE以外の場合は、多少余白が多く見えますが、欠けてしまうよりいいでしょう。
　
　

SyntaxHighlighterを設置するサンプルコード

　
ちなみに、ローカルで動作確認した際の HTMLは以下の通りです。
大したものではないですが。
　
———————–

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>SyntaxHighlighter Brushes Tests</title>

<!-- /ここから/ -->
<link href="./styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="./styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./scripts/shCore.js"></script>
<script type="text/javascript" src="./scripts/shAutoloader.js"></script>
<script type="text/javascript" src="./scripts/shBrushXml.js"></script>
<!-- /ここまでは head内/ -->

</head>
<body>

＜pre class="brush: php;">
<p>　表示したいソースを <em>＜pre> ～ ＜/pre></em>でかこみ、HTMLの表示であれば、<br />
<em>class=&quot;brush: html;&quot;</em> を記入します。</p>
＜/pre>

＜pre class="brush: text;">
<p>　表示したいソースを <em>＜pre> ～ ＜/pre></em>でかこみ、HTMLの表示であれば、<br />
<em>class=&quot;brush: html;&quot;</em> を記入します。</p>
＜/pre>

＜pre class="brush: css;">
<p>　表示したいソースを <em>＜pre> ～ ＜/pre></em>でかこみ、HTMLの表示であれば、<br />
<em>class=&quot;brush: html;&quot;</em> を記入します。</p>
＜/pre>


<!-- /ここから/ -->
<script type="text/javascript">
SyntaxHighlighter.autoloader(
      "css                      ./scripts/shBrushCss.js"
     ,"js jscript javascript    ./scripts/shBrushJScript.js"
     ,"perl pl                  ./scripts/shBrushPerl.js"
     ,"php                      ./scripts/shBrushPhp.js"
     ,"plain text               ./scripts/shBrushPlain.js"
     ,"sql                      ./scripts/shBrushSql.js"
     ,"html xml xhtml           ./scripts/shBrushXml.js"
);
SyntaxHighlighter.all();
</script>
<!-- /ここまでは bodyuの前/ -->

</body>

<head>

<title>SyntaxHighlighter Brushes Tests</title>

</head>

<body>

＜pre class="brush: php;">

<p>　表示したいソースを <em>＜pre> ～＜/pre></em>でかこみ、HTMLの表示であれば、<br />

<em>class="brush: html;"</em> を記入します。</p>

＜/pre>

＜pre class="brush: text;">

<p>　表示したいソースを <em>＜pre> ～＜/pre></em>でかこみ、HTMLの表示であれば、<br />

<em>class="brush: html;"</em> を記入します。</p>

＜/pre>

＜pre class="brush: css;">

<p>　表示したいソースを <em>＜pre> ～＜/pre></em>でかこみ、HTMLの表示であれば、<br />

<em>class="brush: html;"</em> を記入します。</p>

＜/pre>

SyntaxHighlighter.autoloader(

"css ./scripts/shBrushCss.js"

,"js jscript javascript ./scripts/shBrushJScript.js"

,"perl pl ./scripts/shBrushPerl.js"

,"php ./scripts/shBrushPhp.js"

,"plain text ./scripts/shBrushPlain.js"

,"sql ./scripts/shBrushSql.js"

,"html xml xhtml ./scripts/shBrushXml.js"

);

SyntaxHighlighter.all();

</script>

</body>

———————–
※一部全角の「＜」を使用しています。　
　
　
　
※2014.01.15　追記
この記事は、FC2ブログで書いていた頃の記事です。現在はWordPressに移り「Crayon Syntax Highlighter」と言うプラグインで運用をしています。
　
「Crayon Syntax Highlighter」についての記事は「WordPressのCrayon Syntax Highlighterの使い方」に記事を書いています。

- プログラミング・Web関連技術

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: エックスサーバーで独自SSLは永久無料で取り放題。利用方法と理由を解説！

エックスサーバーでは独自SSLが無料でいくつでも設置できるように！しかも、国、都道府県などの数項目の入力と数クリックだけという超簡単！SSL化しない理由がない！

: Selenium WebDriver、Pythonをインストールしブラウザ自動操作の環境構築手順のまとめ

ブラウザを自動操作しテストを実行するロボットをselenium WebDriver＋Pythonの環境を構築し、動作確認までの手順のまとめ。初心者向けに詳細解説。サンプルソースも。

: コピーコンテンツ・直リンクの3つの対策Google通報などのまとめ

コピーコンテンツを発見したときにやること！Googleに通報、画像の直リンクを禁止、RSSの全文配信を停止。この対策をしないとあなたのサイトの評価も下がるかも！

: .htaccessのmod_expiresでブラウザキャッシュで高速化でSEO対策！

Page Speed Insightsの指摘事項のファイルのブラウザキャッシュの設定方法。解説もしてるけど、.htaccessにコピペするだけの簡単設置で効果抜群！SEOにも威力を発揮！

: XSERVERにCakePHP3をインストール。コマンドラインのPHPのバージョンを変更する方法で解決

XSERVERにCakePHP3をインストールするときに問題となるのはサーバーパネルとSSH接続の時とで認識されるPHPのバージョンの違いがあるため。その解消方法を解説する。

: 日本語は2バイト文字？3バイト文字？

日本語は2バイトという理解でしたが、UTF-8では事情が違います。その説明です。

: PythonでUTF-8など日本語（全角文字）を使う方法。コメントにも必要。

Pythonの標準では日本語（全角文字）を利用できないので、利用する際は文字コードを宣言する必要がある。「# coding: utf-8」の様に記述すればOK。

: Webサイト公開時に重複コンテンツを排除する.htaccessのリダイレクトの設定のまとめ

サイトを公開する際にはURLの正規化は必須です。正規化とは何かを解説し、.htaccessに設定すべきリダイレクトの設定を具体的に説明します。

: 直リンク禁止の.htaccessを超分かりやすく解説。日本語じゃなくてPHPで説明

直リンクを禁止する.htaccessの記述内容を日本語ではなくPHPで解説！私自身もこの方法ですっかり理解できました。.htaccessって簡単！って思えますよ。

: さくらサーバのmb_send_mailでメール送信時にmalformed header from script ‘xxx.php’: Bad header: xxxのエラーが

さくらインターネットのレンタルサーバからPHPのmb_send_mail()関数を利用してメールを送信するとInternal Server Errorが発生。その原因は、メールアドレスが登録されていないこと。