SyntaxHighlighterはCKEditorプラグインに合わせて簡単にコード文法の色付けをします。

インターネットで関連した文章を検索しましたが、大同小異さんはずっとCKeditorの文字エディタを使っています。だから、ネット上で多くのネットユーザーが紹介しているSyntxHighlighterを使って、CKEditorプラグインに協力して実現します。SyntxHighlighterとCKEditorバージョンが違っていますので、途中でいくつかの問題が発生しました。解決すると同時に、個人の理解によって部分的に調整しますので、ここで説明した方法は参考にしてください。一、SyntxHlighterプロファイルSyntxHighlighter（原名：dp.SyntxHighlighter）は、ブラウザ上で各種コードを文法的に着色する独立JavaScriptライブラリである。ダウンロードサイト：http://alexgorbatchev.com/SyntaxHighlighter/私達はダウンロードします。https://www.jb51.net/codes/15916.html本で使用しているバージョンは3.03版です。ダウンロードした後、syntaxhighlighterフォルダの下の「scripts」と「stylies」フォルダ内のファイルが必要です。コード文法の色が鮮やかに表示されているページで「stylas/shCore.css」スタイルのファイルを参照してください。各コード言語はそれぞれのJSファイルを引用しますので、HTTP要求を低減するために、コード言語のJSファイルの内容を全部一つの「scripts/shBrush SeaYee.js」JSファイルに入れて、コードを一行に書いて最適化してください。例えば、

 
<link rel="stylesheet" type="text/css" href="/syntaxhighlighter/styles/shCoreDefault.css" /> 
<script language="javascript" type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script> 
<script language="javascript" type="text/javascript" src="/syntaxhighlighter/scripts/shBrushSeaYee.js"></script> 

二、CKEditorプロファイルCKeditorは、ウェブページ上のオープンソースコードに特化して使用されている所見である、すなわち、得られたテキストエディタである。軽量化を目指しており、複雑なインストール手順は不要です。PHP、JavaScript、ASP、ASP.NET、ColdFsion、Java、およびABAPなどの異なるプログラミング言語と結合することができます。元の名前はFCKEditorで、2009年に3.0に更新され、CKEditorと改名されました。FKKというのは、最初の開発者がFreedicalderia Knabbeenだからです。今はCKと言って、「Conttent and Knowledge」という意味です。公式の説明によると、CKEditorはFKEditorのコードを完全に書き換えたもので、2007年からこの作業を開始しました。新たなユーザーインターフェース、Plug-inをサポートするJavascript API、視覚障害者へのサポートを提供します。ダウンロードサイト：http://ckeditor.com/本明細書で使用されているバージョンは3.5.三、CKEditorコードの文法色が明るい表示のプラグイン開発1、「ckeditor\plugins」ディレクトリの下に「insertcode」ディレクトリを作成し、「insertcode」ディレクトリの下に「plugin.js」を新たに作成します。以下のコードを入力してください。

 
CKEDITOR.plugins.add('insertcode', 
{ 
init: function(editor) 
{ 
//plugin code goes here 
var pluginName = 'Insertcode'; 
CKEDITOR.dialog.add(pluginName, this.path + 'insertcode.js'); 
editor.config.flv_path = editor.config.flv_path || (this.path); 
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName)); 
editor.ui.addButton('Insertcode', 
{ 
label: '    ', 
command: pluginName, 
icon: this.path + 'insertcode.gif' 
}); 
} 
}); 

注：1行目のコードの中に「insertcode」はフォルダ名と同じで、文字サイズを区別してください。LinuxシステムのWebサーバでは、経路は大文字と小文字を区別しているからです。2、「insertcode」目次の下に「insertcode.gif」16*16サイズの写真を入れて、自分で作ったり、インターネットで探したりすることができます。3、「insertcode」ディレクトリの下に「insertcode.js」を新たに作成し、下記のコードを入力します。

 
CKEDITOR.dialog.add('Insertcode', function(editor){ 
var escape = function(value){return value;}; 
return{ 
title: '    ', 
resizable: CKEDITOR.DIALOG_RESIZE_BOTH, 
minWidth: 720, 
minHeight: 520, 
contents: [{ 
id: 'cb', 
name: 'cb', 
label: 'cb', 
title: 'cb', 
elements: [{ 
type: 'select', 
label: 'Language', 
id: 'lang', 
required: true, 
'default': 'csharp', 
items: [['ActionScript3', 'as3'], ['Bash/shell', 'bash'], ['ColdFusion', 'cf'], ['C#', 'csharp'], ['C++', 'cpp'], ['CSS', 'css'], ['Delphi', 'delphi'], ['Diff', 'diff'], ['Groovy', 'groovy'], ['JavaScript', 'js'], ['Java', 'java'], ['JavaFX', 'jfx'], ['Perl', 'perl'], ['PHP', 'php'], ['Plain Text', 'plain'], ['PowerShell', 'ps'], ['Python', 'py'], ['Ruby', 'rails'], ['Scala', 'scala'], ['SQL', 'sql'], ['Visual Basic', 'vb'], ['XML', 'xml']] 
}, { 
type: 'textarea', 
style: 'width:718px;height:450px', 
label: 'Code', 
id: 'code', 
rows: 31, 
'default': '' 
}] 
}], 
onOk: function(){ 
code = this.getValueOf('cb', 'code'); 
lang = this.getValueOf('cb', 'lang'); 
html = '' + escape(code) + ''; 
editor.insertHtml("<pre class=\"brush:" + lang + ";\">" + html + "</pre>"); 
}, 
onLoad: function(){} 
}; 
}); 

、「ckeditor」ディレクトリの下で「config.js」ファイルを見つけます。これはCKEditorのプロファイルです。コードを追加してください。

config.extraPlugins = 'insertcode'; 

注：コードの中で「insertcode」もフォルダ名と同じように、文字サイズを区別して書きます。CKEditorツールバーにボタンを追加するには、この設定ファイルに「Insertcode」を追加します。やはり、大文字と小文字の区別に注意してください。これで大功労ができた。