Syntaxhighlighter_XH

Syntaxhighlighter_XH

 

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

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

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

---

 

１：ダウンロード

　

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

２：解凍し、利用方法を調べる
　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",

 

　

　３：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

で、終了。

---

 

設置したものの、１行ずれました

 原因は、BootStrap系テーマのCSSがコンフリクトを起してるとのこと

テーマのスタイルシートに下記を追加して正常になりました。使用するテーマによります。

.syntaxhighlighter .container:before, .syntaxhighlighter .container:after {
    display: block;
}

---