投稿者: mystral-kk 2011年6月 4日(土) 16:13 JST
Auge[*1] さんのツイートに興味を覚えて、JavaScriptベースのSyntaxHighlighterをGeeklogに組み込んでみた。意外とややこしいので、以下は自分用のメモ。
<!-- 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日追記:入力するコードの中では、< と > は使用できず、それぞれ < > と入力する必要がある。
tinyMCE.addI18n('en.syntaxhl',{を
tinyMCE.addI18n('ja.syntaxhl',{に書き換えて保存する。
tinyMCE.addI18n('en.syntaxhl_dlg',{を
tinyMCE.addI18n('ja.syntaxhl_dlg',{に書き換えて保存する。
'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(), ), );に書き換え、保存してから、再びサーバーへアップロードする。
// 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でsyntaxhlプラグインを使用すると、入力したコードが自動的に<pre>タグでくるまれてエディタウィンドウに挿入されるが、このとき<pre>タグの属性値に -(ハイフン)を含む文字列が設定される。HTMLフィルターを有効にしていると、この属性値がフィルタリングされて表示がおかしくなるので、コンフィギュレーション > その他 > HTMLフィルタで、「RootユーザはHTMLフィルタ無効 」を「はい」に変更して、保存する。これでおしまいです。お疲れさまでした。
この記事を書くきっかけを与えていただいたAugeさんに感謝します。
コメント (0件)