投稿者: 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件)