2019年8月24日(土) 11:50 JST

GeeklogにSyntaxHighliterを組み込む

  • 投稿者:
  • 表示回数 3,025
Geeklog

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

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

  1. SyntaxHighlighterのサイトから最新版(2011年 6月の時点では3.0.83)をダウンロードする。
  2. ローカルで展開(解凍)する。syntaxhighlighter_バージョン番号というフォルダができるので、これをsyntaxhighlighterにリネームして、公開領域の直下(lib-common.phpがあるフォルダ内)にアップロードする。
  3. 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}>
    
  4. なお、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日追記:入力するコードの中では、< と > は使用できず、それぞれ &lt; &gt; と入力する必要がある

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

  1. こちらのサイトからsyntaxhlプラグインをダウンロードする。
  2. ローカルで展開(解凍)する。
  3. 作成された RichGuk-syntaxhl-文字列 フォルダを syntaxhl にリネームする。
  4. syntaxhl/langs フォルダ内の en.jsja.js という名前でコピーする。ja.js をテキストエディタで開き、1行目の
    tinyMCE.addI18n('en.syntaxhl',{
    

    tinyMCE.addI18n('ja.syntaxhl',{
    
    に書き換えて保存する。
  5. syntaxhl/langs フォルダ内の en_dlg.jsja_dlg.js という名前でコピーする。ja_dlg.js をテキストエディタで開き、1行目の
    tinyMCE.addI18n('en.syntaxhl_dlg',{
    

    tinyMCE.addI18n('ja.syntaxhl_dlg',{
    
    に書き換えて保存する。
  6. syntaxhl フォルダを 公開領域/tinymce/js/tiny_mce/plugins/ にアップロードする。
  7. アップロード先のサーバーから、非公開領域/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(),
    	),
    );
    
    に書き換え、保存してから、再びサーバーへアップロードする。
  8. アップロード先のサーバーから、公開領域/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;
    };
    
    に書き換え、保存してから、再びサーバーへアップロードする。
  9. 管理者としてサイトにログインしてから、管理者用メニューのTinyMCEをクリックし、設定を編集する。「ツールバー」の4つの欄のうちの好みの欄の最後に ,syntaxhl を追加し、「プラグイン」の syntaxhlにチェックを入れてから、「送信」をクリックする。これでTinyMCEを使用する時に、ツールバーにペンのアイコンが追加される。

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

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

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