Syntaxhighlighter_XH

 

HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、PREソースコードを行頭番号付きでカッコよく表示するソース ビューアです。

入手先: http://3-magi.net/?CMSimple_XH/Syntaxhighlighter_XH

テストバージョン:Syntaxhighlighter_XH-1alpha1


 

1:ダウンロード

 

  2つあるDOWNLOAD より、 上側を クリック。・・下のは、バージョンアップのチェック用ファイルです

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;
}