kindeditor4.x統合SyntaxHighlighterコードハイライト

4529 ワード

shell php javascript

kindeditor4.xコードハイライト機能のデフォルトではprettifyプラグインが使用されます.prettifyはGoogleが提供するソースコード構文ハイライトシェーダです.HTMLページのプログラムコードをシェーディングするための簡単な形式を提供しますが、SyntaxHighlighterの応用が非常に広いため、kindeditorのデフォルトのprettifyをSyntaxHighlighterコードハイライトプラグインに置き換えます.
1.最初のステップkindeditorコードを修正preラベルをハイライトしたときのclassクラス名:
/kindeditor 4/plugins/code/codeを開きます.js、このような行を見つけます.

html = '
' + K.escape(code)'
 '; 
  に  します.//html = '
' + K.escape(code) +'
 ';
//SyntaxHighlighterプラグインに  なクラス にコードをハイライト  
html = ' 
' + K.escape(code) +'
 ';
//ここでは、  の き を  し、 の  を  したものです.
  
2.カスタムページのkindeditorで「コードを  」アイコンを  し、ドロップダウン・メニューの      :
 じようにcodeを きます.jsファイルでは、  するオプションが  されます.ここでは、  されたコードを  してください.'',
  
ここで  してください.オプションでは、valueの はSyntaxHighlighterのbrush aliasesに  します.SyntaxHighlighterが  にサポートしているbrush aliasesの は のとおりです.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
  
3.kindeditorセクションの  が  しました. は、コードのハイライト  をサポートするために、ページにSyntaxHighlighterを  します.
ステップ1:SyntaxHighlighterをダウンロードし、    の  バージョンが3.0に  されています.83、  ダウンロードアドレスは:http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current 
  
 2 :ダウンロードが わったら  して、scriptディレクトリにはjsファイルがたくさんあり、 なる  の  をサポートしていることがわかりました.  する  のjsファイルを、プロジェクトの  するディレクトリにコピーします. の3つのjsファイルを  にコピーします.
shAutoloader.js//  の  ロードをサポート
shCore.js 
(shBrushJava.jsなど、  の  に じてコピー)
  
ステップ3:cssスタイルファイルを たちのプロジェクトにコピーします.
shCore.css 
shThemeDefault.css(  なスタイルに じて  するスタイルファイルをコピーすることもできます)
  
ステップ4:  のファイルをページにインポートします.


  
  
ステップ5:SyntaxHighlighter  ロード  を き、    を く
デフォルトでは、ページに  に  な  jsファイルをそれぞれ  できますが、ページに10  の  をサポートする  がある  は、10  のjsファイルを  する  があります.これは、ページのロード  に きな  を えるため、SyntaxHighlighterが  に  したautoloader  ロード  により、  のみが  なjsファイルをロードします.
  コードは のとおりです.<span style="color:#000000;">
SyntaxHighlighter.autoloader(
    </span>'java            /syntax/shBrushJava.js'<span style="color:#000000;">,
    </span>'php            /syntax/shBrushPhp.js'<span style="color:#000000;">,
    </span>'html xml            /syntax/shBrushXml.js'<span style="color:#000000;">,
    </span>'css            /syntax/shBrushCss.js'<span style="color:#000000;">,
    </span>'js jscript javascript            /syntax/shBrushJScript.js'<span style="color:#000000;">,
    </span>'bash shell            /syntax/shBrushBash.js'<span style="color:#000000;">,
    </span>'sql            /syntax/shBrushSql.js'<span style="color:#000000;">
);
SyntaxHighlighter.all();
</span>
  
  
  :
  
SyntaxHighlighter.Autoloader()はdocの み みが  してから  する  があります.jQueryを  する  は$(document)を くことができます.ready()に、これならヘッドに れても   です.しかし、オリジナルjsで、bodyのonloadで、ページの  に、 えば、  に  を して くと、  が えます.
  
4.これで、 たちのページは  にコードをハイライト  できるはずですが、 たちのコードが   ある  、chromeブラウザの の  にスクロールバーが  され、 しさに  に  します.
   :
syntax-highlighter-compressのスタイルファイルshCoreDefaultを きます.css、  を して  します.syntaxhighlighter table {
     margin: 1px 0 !important;}
  
   、ハイライトコードの  のバーのスクロールバーがなくなり、 のスタイルを  する  は、 のスタイルに  するスタイルファイルを  します.
 :  は  ネット  ブログに  した.http://www.duwaiweb.com/blog/20120825_a68714ed-b065-4191-8a60-97a53bf234cd.html 
   :https://www.cnblogs.com/duwaiweb/archive/2012/08/26/2657311.html

zipコマンドでmacOS用アプリケーション(.app)を圧縮する場合は-yオプションをつける

python開発環境構成