エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      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は以下の通りです。
大したものではないですが。
 
———————–

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

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

GoogleAdwords

GoogleAdwords

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

ブラウザのキャッシュを活用するの対策!広告バナーを消して表示を高速化

あなたのサイトが遅いのはバリューコマースのバナーではないですか?バリューコマースのバナーを外すだけでmod_deflateとmod_expiresを設定するより効果があります!

X Serverへの引越しの注意点まとめ。ロリポップとの違いと対処方法 6事例

ロリポップからX Serverに引越し。ロリポップとX Serverの違いに注目することでX Serverの設定方法を明確にします。またX Serverならではの設定ポイントなども解説。

EストアのショップサーブのWordPressサービスにメリット無し

ショップサーブのオプションサービスのWordPressを使ってみましたがデータベースには直接触れず使えないサービスでした。

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

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

CentOS環境に ntpdをインストールして自動的に時刻を取得する設定にする
CentOS環境に ntpdをインストールして自動的に時刻を取得して合わせる設定にする

VirtualBoxに構築した CentOSの環境の時計がずれているとき、ntpdをインストールし、時計を合わせる方法を解説。NTPサーバを指定する方法や ntpdを自動起動する設定も解説。

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

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

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

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

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

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

Gitで「fatal: Authentication failed for 'https://example.com/git_repositories/example.git/'」のエラーが出た場合の対処方法の一つ
Gitで「fatal: Authentication failed for ‘https://example.com/git_repositories/example.git/’」のエラーが出た場合の対処方法の一つ

Gitのリモートリポジトリにアクセスする際、Authentication failedのエラーが。しかし、ID、PASSが間違っているのではなく、リモートリポジトリのURLが間違っている場合もあるので再度確認を。

PythonでMySQLへの接続ライブラリMySQL-pythonの簡単インストール方法

PythonはMySQLに接続するライブラリは別途インストールが必要。なのでMySQL-pythonライブラリのインストール方法とサンプルスクリプトで動作検証までを解説。