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は以下の通りです。
大したものではないですが。
———————–
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<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="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> <!-- /ここから/ --> <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> |
———————–
※一部全角の「<」を使用しています。
※2014.01.15 追記
この記事は、FC2ブログで書いていた頃の記事です。現在はWordPressに移り「Crayon Syntax Highlighter」と言うプラグインで運用をしています。
「Crayon Syntax Highlighter」についての記事は「WordPressのCrayon Syntax Highlighterの使い方」に記事を書いています。
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
-
直リンク禁止の.htaccessを超分かりやすく解説。日本語じゃなくてPHPで説明
直リンクを禁止する.htaccessの記述内容を日本語ではなくPHPで解説!私自身もこの方法ですっかり理解できました。.htaccessって簡単!って思えますよ。
-
-
So-netのレンタルサーバHSはヤバイ・借りてはいけないレンタルサーバリスト
餅は餅屋。サーバはサーバ屋が提供するサービスを利用するべきという記事で、単独でSo-netを紹介。OEMでサービスの提供を受けているだけなので何とも残念すぎる内容。
-
-
PythonでMySQLへの接続ライブラリMySQL-pythonの簡単インストール方法
PythonはMySQLに接続するライブラリは別途インストールが必要。なのでMySQL-pythonライブラリのインストール方法とサンプルスクリプトで動作検証までを解説。
-
-
Gitで「fatal: Authentication failed for ‘https://example.com/git_repositories/example.git/’」のエラーが出た場合の対処方法の一つ
Gitのリモートリポジトリにアクセスする際、Authentication failedのエラーが。しかし、ID、PASSが間違っているのではなく、リモートリポジトリのURLが間違っている場合もあるので再度確認を。
-
-
コピーコンテンツ対策.htaccessで直リンク禁止しリダイレクトで対応
不正なコピーコンテンツからの直リンクを拒否する.htaccessの設定方法。拒否するサイトを指定、許可するサイトを指定する方法、単純な拒否と画像の差し替えを解説。
-
-
Webサイト公開時に重複コンテンツを排除する.htaccessのリダイレクトの設定のまとめ
サイトを公開する際にはURLの正規化は必須です。正規化とは何かを解説し、.htaccessに設定すべきリダイレクトの設定を具体的に説明します。
-
-
CentOS環境に ntpdをインストールして自動的に時刻を取得して合わせる設定にする
VirtualBoxに構築した CentOSの環境の時計がずれているとき、ntpdをインストールし、時計を合わせる方法を解説。NTPサーバを指定する方法や ntpdを自動起動する設定も解説。
-
-
mod_pagespeedでWebサイトを超簡単高速化・Google謹製の最終兵器
Webサイトの表示スピード高速化の最終兵器、Google謹製mod_pagespeedの解説です。レンタルサーバではX-Serverでしか利用できませんが、ワンクリックで高速化します。
-
-
chromedriver.exe – ディスクがありませんと出てSeleniumの設定が上手くいかない
Selenium WebDriverを使ってChromeを自動操作する仕組みを作る際、chromedriver.exeを利用しますが、ディスクがありません、というエラーが発生する場合があります。その対処方法を解説します。
-
-
mod_pagespeedカスタマイズで高速化を詳細解説・Google謹製
mod_pagespeedをデフォルトのまま使っていませんか?mod_pagespeedはデフォルトのままでも速い!でも仕組みを理解し設定し直せばより速くなる!