PCメモブログ

[PR]

2024/11/21 (Thu) 15:36

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2014/02/13 (Thu) 21:43

このブログは忍者ブログを使っているのですが、そのうちPHP関連のソースコードを載せることがあるかもしれないので、今のうちにSyntaxHighlighterを導入しようと思います。

SyntaxHighlighterはブログ、ホームページなどできれいにソースコードを表示するためのツールでJavaScriptとCSSで実装されています。

SyntaxHighlighterは以下のURLからダウンロードできます。

http://alexgorbatchev.com/SyntaxHighlighter/download/

このページの冒頭の"Click here to download"をクリックするとzipファイルのダウンロードが始まるので適当なところに保存して展開します。今回ダウンロードしたのはsyntaxhighlighter_3.0.83.zipです。

インストールの方法は英語ですが以下のURLに書いてあります。

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

とりあえずここに書いてある通りに作業してみます。

まず展開してできるフォルダの下にある以下の各ファイルを忍者ブログのファイルアップロード機能でアップロードします。

script/shCore.js
scripts/shBrushPhp.js　（※）
scripts/shBrushXml.js　（※）
styles/shCore.css
styles/shThemeDefault.css

※で示したscripts/shBrush???.jsは使う言語によって変えるみたいです。今回はPHP用のファイルであるshBrushPhp.jsと、XMLやHTMLで使えるshBrushXml.jsを使います。

アップロードしたらブログ設定のデザイン－PC用テンプレートを開き、使用中テンプレートの「修正」リンクをクリックします。

HTML編集欄の<head>～</head>の間に以下の行を追加します。

<script type="text/javascript" src="http://file.ブログのホストアドレス/shCore.js"></script>
<script type="text/javascript" src="http://file.ブログのホストアドレス/shBrushXml.js"></script>
<script type="text/javascript" src="http://file.ブログのホストアドレス/shBrushPhp.js"></script>
<link rel="stylesheet" type="text/css" href="http://file.ブログのホストアドレス/shThemeDefault.css" /> 
<link rel="stylesheet" type="text/css" href="http://file.ブログのホストアドレス/shCore.css" />

http://file.ブログのホストアドレス/の部分は、このブログの場合はhttp://file.pcmemo.take-uma.net/になります。これで準備は完了です。あとは、ソースコードを埋め込みたい箇所を以下のように <pre>で囲みます。

<pre class="brush: php; html-script: true">
<?php
phpinfo();
?>
</pre>

このとき、<pre>～</pre>で囲む部分に"<"や">"があるときはHTMLエスケープ（<および>に書き換え）しないといけないようです。
また、<pre>のclass属性には"brush: "に続けてphpやxml、htmlなどの名前を書きます。使える名前は上で書いたアップロードファイルの一覧で※を付けたファイルの種類によって変わります。使える名前の一覧とshBrush???.jsの対応は以下のURLに書いてあります。

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

その後ろのhtml-script:trueは、phpなどのようにHTMLと混在して記述するスクリプト言語を清書する場合に指定します。html-script:trueを使うためには使う言語用のshBrush??.jsのほかにshBrushXml.jsが必須のようです。
このほかにもいくつかclass属性に指定できるオプションがあるようで、以下のURLに説明があります。

http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

そして、ブログの最後に以下の<script>タグを書きます。このscriptタグがレンダリングの指示になります。

<script type="text/javascript">     
SyntaxHighlighter.all()
</script>

実はすでにこのページに載せているコードはすでにSyntaxHighlighterを使って成形したものになっています。結構いい感じですね。

このページのHTMLソースとこの記事を比較してみるのも参考になると思います。

でも公開前に詳細プレビューで確認するとうまく表示されないんですよね。なんかスタイルシートが読み込まれていない感じ。<head>に追加したスタイルシート読み込みの<link>要素が出力されていませんでした。原因はよくわかりません。公開した後ならちゃんと表示されています。

ランキングに参加してみました。クリックしていただければ嬉しいです。