HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、PREソースコードを行頭番号付きでカッコよく表示するソース ビューアです。
入手先: http://3-magi.net/?CMSimple_XH/Syntaxhighlighter_XH
テストバージョン:Syntaxhighlighter_XH-1alpha1
1:ダウンロード
2:解凍し、利用方法を調べる
Syntaxhighlighter_XH-1alpha1/syntaxhighlighter/README.txt
Syntaxhighlighter_XH-1alpha1/syntaxhighlighter/help/help.htm
help.htmを読むと、
Installation
The installation is done as with many other CMSimple_XH plugins. See the CMSimple_XH wiki for further details.
1.Backup the data on your server.
2.Unzip the distribution on your computer.
3.Upload the whole directory syntaxhighlighter/ to your server into the CMSimple_XH plugins directory.
4.Set write permissions for the subdirectories config/, css/ und languages/.
5.Switch to "Syntaxhighlighter" in the back-end to check if all requirements are fulfilled.
For tinyMCE:
1.Copy plugins/syntaxhighlighter/editors/tinymce/syntaxhl/ to plugins/tinymce/tiny_mce/plugins/.
2.Edit your init_*.js: add the "syntaxhl" plugin to "plugins" and add the "syntaxhl" button to "theme_advanced_buttonsN" wherever you prefer.
と、あるので、
Syntaxhighlighter_XH-1alpha1/syntaxhighlighter/ --> /plugins にアップロード
Syntaxhighlighter_XH-1alpha1//syntaxhighlighter/editors/tinymce/syntaxhl/ --> /plugins/tinymce/tiny_mce/plugins/syntaxhl にアップロード
で、 ”Edit your init_*.js” とあり
デフォルトで使用してる init_*.js ファイルは、 /plugins/tinymce/inits/init_full.js ですので これを編集(または、複製を作ってもOK)。
・plugins に syntaxh をつけろ
plugins : "advimage,advlink,autosave,contextmenu,emotions,fullscreen,insertdatetime,lists,media,paste,save,searchreplace,table,wordcount,syntaxhl",
・theme_advanced_buttonsN に syntaxh をつけろ
// Theme options theme_advanced_buttons1 : "save,|,fullscreen,code,formatselect,fontselect,fontsizeselect,styleselect,|,syntaxhl",
と。もうひとつ
fullscreen_settings : { theme_advanced_buttons1 : "save,|,fullscreen,code,|,formatselect,fontselect,fontsizeselect,styleselect,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,outdent,indent,blockquote,|,clearleft,clearright,clearboth,|,syntaxhl",
3:TinyMCE系は、日本語ファイルがダミーであっても必要ですので、コピーを作成
/plugins/tinymce/tiny_mce/plugins/syntaxhl/langs/en_dlg.js --> /plugins/tinymce/tiny_mce/plugins/syntaxhl/langs/ja_dlg.js
/plugins/tinymce/tiny_mce/plugins/syntaxhl/langs/en.js --> /plugins/tinymce/tiny_mce/plugins/syntaxhl/langs/ja.js
で、終了。
設置したものの、1行ずれました
原因は、BootStrap系テーマのCSSがコンフリクトを起してるとのこと
テーマのスタイルシートに下記を追加して正常になりました。使用するテーマによります。
.syntaxhighlighter .container:before, .syntaxhighlighter .container:after { display: block; }