kindeditor+syntaxhighlighter文章内の挿入コードをハイライト表示
まず、ページに必要なFEファイルを導入する必要があります.
2つのjsファイルと1つのcssファイルは参照する必要があるファイルです.
shCore.jsはsyntaxhighlighterプラグインの基礎コードです.
shAutoloader.jsの役割はsyntaxhighlighterプラグインのコードがハイライト表示されたときに必要なファイルを自動的にロードすることです.しかし、ディレクトリが正しくないとロードに失敗します.解決策は次のとおりです.autoloader.apply()でjsファイルの場所を指定します.
次にkindeditorのplugins/code/codeを修正する.js:
ここでの変更はkindeditorのデフォルトで使用されるprettryプラグインcssクラスをsyntaxhighlighterプラグインcssクラス:brush:、構成パラメータtoolbar:右上のツールバー、auto-links:自動変更リンクを与える役割です.
フォームを記入するときにコードスタイルを持つには、フォームのkindeditorを作成するときにKindEditorを呼び出す必要があります.ready()のときに構成するcssPath項目のcssファイルに加える.ke-contentスタイル、次の例を示します.
ここではコード構文をハイライトするのではなく、コード部分を識別するだけです.
はい、これから文法のハイライトは基本的な使用を満たして、効果は悪くなくて、kindeditorがyiiのフレームワークに統合するならば、次の文章は詳しく紹介します.
2つのjsファイルと1つのcssファイルは参照する必要があるファイルです.
shCore.jsはsyntaxhighlighterプラグインの基礎コードです.
shAutoloader.jsの役割はsyntaxhighlighterプラグインのコードがハイライト表示されたときに必要なファイルを自動的にロードすることです.しかし、ディレクトリが正しくないとロードに失敗します.解決策は次のとおりです.autoloader.apply()でjsファイルの場所を指定します.
<?php
//syntaxhighlighter js/css====================begin
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . "/js/syntaxhighlighter/styles/shCoreDefault.css");
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shCore.js');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shAutoloader.js');
?>
<script>
$(document).ready(function() {
function path()
{
var args = arguments, result = [];
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', '<?php echo Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/'; ?>'));
return result;
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
});
</script>
<?php // syntaxhighlighter js/css====================end ?>
次にkindeditorのplugins/code/codeを修正する.js:
ここでの変更はkindeditorのデフォルトで使用されるprettryプラグインcssクラスをsyntaxhighlighterプラグインcssクラス:brush:、構成パラメータtoolbar:右上のツールバー、auto-links:自動変更リンクを与える役割です.
cls = 'brush:' + type + '; toolbar: false; auto-links: FALSE;';
var html = '<pre class="' + cls + '">
' + K.escape(code) + '</pre>';html = ['<div style="padding:10px 20px;">',
'<div class="ke-dialog-row">',
'<select class="ke-code-type">',
'<option value="">[ ]</option>',
'<option value="java">Java</option>',
'<option value="cpp">C/C++/Objective-C</option>',
'<option value="c#">C#</option>',
'<option value="js">JavaScript</option>',
'<option value="php">PHP</option>',
'<option value="perl">Perl</option>',
'<option value="python">Python</option>',
'<option value="ruby">Ruby</option>',
'<option value="html">HTML</option>',
'<option value="xml">XML</option>',
'<option value="css">CSS</option>',
'<option value="vb">ASP/Basic</option>',
'<option value="pascal">Delphi/Pascal</option>',
'<option value="scala">Scala</option>',
'<option value="groovy">Groovy</option>',
'<option value="lua">Lua</option>',
'<option value="sql">SQL</option>',
'<option value="cpp">Google Go</option>',
'<option value="as3">Flash/ActionScript/Flex</option>',
'<option value="xml">WPF/SliverLight</option>',
'<option value="shell">Shell/ </option>',
'</select>',
'</div>',
'<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
'</div>'].join(''),フォームを記入するときにコードスタイルを持つには、フォームのkindeditorを作成するときにKindEditorを呼び出す必要があります.ready()のときに構成するcssPath項目のcssファイルに加える.ke-contentスタイル、次の例を示します.
ここではコード構文をハイライトするのではなく、コード部分を識別するだけです.
/**code**/
.ke-content {
font-size: 10pt;
}
.ke-content pre {
font-size:9pt;
font-family:Courier New,Arial;
border:1px solid #ddd;
border-left:5px solid #6CE26C;
background:#f6f6f6;
padding:5px;
}
.ke-content code {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
border: 1px solid #DDD;
background-color: #F6F6F6;
border-radius: 3px;
}
.ke-content pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
.ke-content pre code {
background-color: transparent;
border: none;
}
.ke-content p {
margin: 0 0 15px 0;
margin-bottom:15pt;
line-height:1.5;
letter-spacing: 1px;
}
.ke-content div.ref {border:1px solid #ddd;margin:0 0 10px 0;padding:2px;font-size:9pt;background:#ffe;}
.ke-content div.ref h4 {margin:0;padding:1px 3px;background:#CC9966;color:#fff;font-size:9pt;font-weight:normal;}
.ke-content div.ref .ref_body {margin:0;padding:2px;line-height:20px;color:#666;font-size:9pt;}
.ke-content blockquote {margin:15px 10px;border:2px solid #eee;padding:5px 5px 5px 35px;background:#f4f5f7 url('../img/blockquote.gif') no-repeat left top;color:#060;font-size:9pt;}
はい、これから文法のハイライトは基本的な使用を満たして、効果は悪くなくて、kindeditorがyiiのフレームワークに統合するならば、次の文章は詳しく紹介します.