SyntaxHighlighterでソースコードの装飾

SyntaxHighlighterでソースコードの装飾

記事一覧SyntaxHighlighterでソースコードの装飾

最近、技術ネタが蓄積されてきたこともあって、今年溜まっていた分を徐々に書いていこうと思います。このサイトのデザインは数年前からあるテンプレートを使っていて、ソースコードやインストール手順などを書く時は、自分で作成した css を使っています。最近では、Redmine のようなプロジェクト管理ツールの Wiki 機能の中にも、ソースコードの装飾がデフォルトで搭載されているものもあり、もう当たり前の時代のようです。

そこで、新しく記事を書いていくまでに、このブログのテンプレートを新しくしたり、ソースコードの装飾などカスタマイズも考えたいと思い、まずはソースコードをキレイに表示するところからです。決してソースコードがキレイなわけではないです(笑)

今回は、SyntaxHighlighter を使って、PHP・sh・Perl・Java・html・JavaScript などのソースコードや、Linux のコマンドラインによるサーバ構築やミドルウェアのインストール手順などの TIPS を書いていければと思います。

SyntaxHighlighter の 2012年11月1日 現在の最新バージョンは 3.0.83 です。ダウンロードしたファイルを解凍すると、styles の中に css が、scripts の中に JavaScript のファイルがあります。今回は styles から shCoreDefault.css を、scripts からは shBrushBash.js や shBrushPhp.js など自分がよく使うものを選択して、それ以外は読み込まないようにしておきます。css も js も core ファイルだけは必須のようなので、これと組み合わせて定義します。

下記は html を対象としたソースコード。プレーンなテキストよりは見やすくなったのではないでしょうか。バージョン 2 の頃はソースをコピーしようとすると行番号までコピー対象でしたが、最新バージョンだとソースの部分だけを選択すれば行番号はコピーされないので便利です。もちろん、行番号の部分からドラッグすれば、行番号もコピーできます。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="/sh/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/sh/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>

参考カテゴリ

オススメ記事

最新の投稿やよく見られているのオススメ記事一覧です。

AmazonLinuxでEC2起動時にスワップ領域の割り当てに失敗

EC2 起動時のスワップ領域割り当てですが、これまでは以下の記事を参考に、/etc/rc.local を使って行っていました。 ・ Amazon EC2(Linux)のswap領域ベストプラクティス しかし、最近になって、EC2 イン...

>>記事を確認する

【5分でできる】Laravel5.4から5.5へバージョンアップ

Laravel5.5 がついにリリースされたので、5.4 ベースで作っていたものをバージョンアップしてみました。 composer.json の以下の部分を 5.5.* に変更するだけですが、依存関係のパッケージも問題なくアップデ...

>>記事を確認する

【30分でできる】AWSのEC2にgoofysを入れてS3をマウント

過去に携わったプロジェクトで、S3FS の通信状態が悪い時があるので、アプリ側のプログラムを AWS SDK を使ったものに置き換えていこうという施策がありました。 S3FS の導入には関わっていなかったので、導...

>>記事を確認する

【30分でできる】ぐるなびAPIで飲食店の店舗情報取得

過去に作成した「ぐるなびAPI」のプログラムや、ぐるなびの Web Service が新しくなったこともあり、API からの情報取得プログラムを書き換えてみました。 以前の記事は下記になります。 ・ ぐるなびAPIで...

>>記事を確認する

NginxのFastCGIキャッシュで白い画面がキャッシュされる

以前から、トップページにアクセスすると、レスポンスステータスは 200 で返ってくるのに、画面に何も表示されない現象が稀に見受けられたので調査してみました。 さすがに機会損失にも繋がるということで、...

>>記事を確認する

Laravel5.4の認証ユーザーのパスワードハッシュについて

Laravel で用意されている認証モジュールを利用する際、ユーザーモデル(User.php)経由で登録されるパスワードのハッシュ方法について調べてみました。 Laravel 上ではパスワード文字列を bcrypt() のヘルパー...

>>記事を確認する

Laravel5.4のコントローラコンストラクタでAuth::user()が取得できない

Laravel5.4 で認証を通したアクセスに対して、コントローラのコンストラクタでユーザモデルの値を取得しようと思ったら、なぜか Auth::user() の値が取得できなくて悩みました。 public function __construc...

>>記事を確認する

NginxのHSTS(HTTP Strict-Transport-Security)の設定

「Let's Encrypt」のおかげで、全サイト SSL 化していますが、これまで nginx の設定では、http のアクセスがあった場合に https に 301 リダイレクトさせていました。 この場合、Googlebot に http のアク...

>>記事を確認する

GoogleMapのAPIキーの認証情報にリファラURL設定

昔は API キーを指定することで、JavaScript で GoogleMap が表示できていましたが、何年か前に、そのキーに対して認証情報の追加が推奨されました。 新規で発行する場合は必須になっているかもしれませんが...

>>記事を確認する

【30分でできる】AmazonLinuxでApache2.4+php7.1+Laravel5.5

先日、「 VagrantでCentOS6.9のイメージを使う 」の通り、CentOS6.9 には Apache2.4 と PHP7.1 で Laravel のフレームワークが使える環境を構築しました。 ただ、将来的には AWS かつ Amazon Linux 上で動か...

>>記事を確認する