sharedhat

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のアイコンをクリックしてコードを貼り付けて保存するだけでコードがハイライト表示されると思います。

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.





個人的なフォトログサイト

Wordpressのフォトログテーマ

Concrete5のアドオンパッケージ

this site is licensed under a Creative Commons License But, a part of contents is excluded.
Powered by WordPress