忍者ブログ
PCメモ
PC関係のメモ、気付いたこと。 simhとChromium OSをいじって遊んでいます。 Chromium OSのカスタムビルドを配布しています。(http://chromiumosde.gozaru.jp) twitter: @zui22904336 PGP fingerprint: 45FC 0E47 A68A FA06 02FE 2BEF B72C C6E6 F9FF 1C19
Admin / Write
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エスケープ(&lt;および&gt;に書き換え)しないといけないようです。
また、<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>要素が出力されていませんでした。原因はよくわかりません。公開した後ならちゃんと表示されています。

  


ランキングに参加してみました。クリックしていただければ嬉しいです。
にほんブログ村 IT技術ブログ IT技術メモへ
にほんブログ村

パソコン ブログランキングへ

拍手[0回]

PR


Comment
Name
Title
Mail
URL
Comment
Pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
  HOME   9  8  7  6  5  4  3  2  1 
プロフィール
HN:
zui
性別:
非公開
PR
忍者カウンター
忍者ブログ [PR]