GeeklogにSyntaxHighliterを組み込む

2011年6月 4日(土) 16:13 JST
投稿者: mystral-kk
表示回数 4,125

Augeさんのツイートに興味を覚えて、JavaScriptベースのSyntaxHighlighterをGeeklogに組み込んでみた。意外とややこしいので、以下は自分用のメモ。

1. まずSyntaxHighligterが動作するようにする

SyntaxHighlighterのサイトから最新版（2011年 6月の時点では3.0.83）をダウンロードする。
ローカルで展開（解凍）する。syntaxhighlighter_バージョン番号というフォルダができるので、これをsyntaxhighlighterにリネームして、公開領域の直下（lib-common.phpがあるフォルダ内）にアップロードする。

Geeklogで使用しているテーマのheader.thtmlを編集する。</head>タグの直前付近に次のコードを挿入する。

<!-- Load SyntaxHighlighter -->
<script type="text/javascript" src="{site_url}/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="{site_url}/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="{site_url}/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="{site_url}/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="{site_url}/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="{site_url}/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>
<link rel="stylesheet" type="text/css" href="{site_url}/syntaxhighlighter/styles/shCore.css"{xhtml}>
<link rel="stylesheet" type="text/css" href="{site_url}/syntaxhighlighter/styles/shThemeDefault.css"{xhtml}>

なお、SyntaxHighlighter.autoloader()を使うともっと楽ができるはずなのだが、うまくいかなかったので、shBrush*.jsファイルを1個ずつ読み込んでいる。

この時点でSyntaxHighlighterは使えるようになっており、記事エディタで次のようにしてコードを入力できる。

<pre class="brush: html">
    HTMLのコード
</pre>

brush: htmlの部分をbrush: cssにすればCSSを、brush: jsにすればJavaScriptを、brush: phpにすればPHPのコードを入力できる。WYSIWYGエディタなど邪道で使わないという人はここで終わり。

2011年 6月 7日追記：入力するコードの中では、< と > は使用できず、それぞれ < > と入力する必要がある。

2. TinyMCEにsyntaxhlプラグインを組み込む

こちらのサイトからsyntaxhlプラグインをダウンロードする。
ローカルで展開（解凍）する。
作成された RichGuk-syntaxhl-文字列 フォルダを syntaxhl にリネームする。
syntaxhl/langs フォルダ内の en.js を ja.js という名前でコピーする。ja.js をテキストエディタで開き、1行目の
```
tinyMCE.addI18n('en.syntaxhl',{
```
を
```
tinyMCE.addI18n('ja.syntaxhl',{
```
に書き換えて保存する。
syntaxhl/langs フォルダ内の en_dlg.js を ja_dlg.js という名前でコピーする。ja_dlg.js をテキストエディタで開き、1行目の
```
tinyMCE.addI18n('en.syntaxhl_dlg',{
```
を
```
tinyMCE.addI18n('ja.syntaxhl_dlg',{
```
に書き換えて保存する。
syntaxhl フォルダを 公開領域/tinymce/js/tiny_mce/plugins/ にアップロードする。

アップロード先のサーバーから、非公開領域/plugins/tinymce/addons.php をダウンロードして、テキストエディタで開き、565行目付近にある

	'emojisoftbank'			=> array(
		'plugins'	=> array(),
		'buttons'	=> array('emojisoftbank'),
		'html'		=> array(
							'img' => array(),
						),
	),
);

を

	'emojisoftbank'			=> array(
		'plugins'	=> array(),
		'buttons'	=> array('emojisoftbank'),
		'html'		=> array(
							'img' => array(),
						),
	),
	
	'syntaxhl'				=> array(
		'plugins'	=> array(),
		'buttons'	=> array('syntaxhl'),
		'html'		=> array(),
	),
);

に書き換え、保存してから、再びサーバーへアップロードする。

アップロード先のサーバーから、公開領域/tinymce/js/tinymce_loader.js.php をダウンロードして、テキストエディタで開き、610行目付近にある

//	d.template_replace_values = {
//			username : "Some User",
//			staffid : "991234"
//	};
	
	return d;
};

を

//	d.template_replace_values = {
//			username : "Some User",
//			staffid : "991234"
//	};
	
	d.extended_valid_elements = "textarea[cols|rows|disabled|name|readonly|class]";
	
	return d;
};

に書き換え、保存してから、再びサーバーへアップロードする。

管理者としてサイトにログインしてから、管理者用メニューのTinyMCEをクリックし、設定を編集する。「ツールバー」の4つの欄のうちの好みの欄の最後に ,syntaxhl を追加し、「プラグイン」の syntaxhlにチェックを入れてから、「送信」をクリックする。これでTinyMCEを使用する時に、ツールバーにペンのアイコンが追加される。

3. HTMLフィルターを無効にする

TinyMCEでsyntaxhlプラグインを使用すると、入力したコードが自動的に<pre>タグでくるまれてエディタウィンドウに挿入されるが、このとき<pre>タグの属性値に -（ハイフン）を含む文字列が設定される。HTMLフィルターを有効にしていると、この属性値がフィルタリングされて表示がおかしくなるので、コンフィギュレーション > その他 > HTMLフィルタで、「RootユーザはHTMLフィルタ無効」を「はい」に変更して、保存する。これでおしまいです。お疲れさまでした。

この記事を書くきっかけを与えていただいたAugeさんに感謝します。

Geeklog増殖計画