Concrete5本家の下記の記事を参考にSyntax Highlighterプラグインを導入してみました。
Here is how to add code and coloring syntax in TinyMCE
コードをハイライト表示するにはTinyMCEのプラグインとSyntax Highlighterが必要です。
設定が面倒ですが、コードを記事に書く場合はすごく楽です。
1. syntaxhlのダウンロード
下記のサイトからプラグインをダウンロードします。
右上のソースのダウンロードをクリックしてください。
http://github.com/RichGuk/syntaxhl
2. syntaxhlの配置
ダウンロードしたアーカイブを解凍してディレクトリ名をsyntaxhlに変更します。
変更が完了したらユーザー領域のjs/tiny_mce/pluginsディレクトリにコピーします。
3. 言語ファイルの作成
syntaxhlのディレクトリ内のlangsに言語ファイルがあるので、英語の言語ファイルをコピーしてください。
コピーが完了したら、ファイル名を下記のとおりにリネームしてください。
- コピーしたen.jsをja.jsにリネーム
- コピーしたen_dlg.jsをja_dlg.jsにリネーム
これをしないと正しく動きません。
4. TimyMCE設定の変更
pluginsにsyntaxhlを追加
plugins: "paste,inlinepopups,spellchecker,safari,advlink,template,syntaxhl",
theme_concrete_buttons2にsyntaxhlを追加
theme_concrete_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor,template,syntaxhl",
extended_valid_elementsに下記を追加
extended_valid_elements: "textarea[cols|rows|disabled|name|readonly|class], iframe[height|width|style|src]",
ここまでの設定でsyntaxhlが使えるようになります。
5. SyntaxHighlighterのダウンロード
下記のサイトからSyntaxHighlighterをダウンロードします。
http://alexgorbatchev.com/SyntaxHighlighter/
アーカイブを解凍して、/js/syntax_highlighterにコピーします。
6. テーマのヘッダーファイル修正
利用しているテーマファイルのheader.phpを開いて、必要なものを読み込むようにします。
ここでは、javascriptのソースをハイライトするようにしてます。
<script type="text/javascript" src="/js/syntax_highlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/js/syntax_highlighter/scripts/shBrushJScript.js"></script> <link href="/js/syntax_highlighter/styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="/js/syntax_highlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
以上で、concrete5のTinyMCEでコードのハイライト表示ができるようになります。
記事ブロックで、SyntaxHLのアイコンをクリックしてコードを貼り付けて保存するだけでコードがハイライト表示されると思います。
Related Post:
It is a list of related articles.
Trackback:
It is a comment that has been gotten before.
トラックバックを下記のURLに送ってください。
http://sharedhat.com/blog/1199/trackback/




Reply:
Please give the comment to this article.