blocks|key|946140|text|您应该使用独立的代码语法突出显示工具：SyntaxHighlighter+3运行得非常好。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|946141|如果你真的想要CodeMirror，有一个readOnly选项：|style|CODE|946142|var+myCodeMirror+=+CodeMirror(function(elt)+{
++++myElement.parentNode.replaceChild(myElement,+elt);+//+myElement+is+your+<pre>+or+<div>
++},+{
++++value:+myElement.value,
++++readOnly:+true
++});|code-block|syntax|javascript|946143|entityMap|0|LINK|mutability|MUTABLE|url|http://alexgorbatchev.com/SyntaxHighlighter/|1|http://codemirror.net/manual.html#option_readOnly^0|J|J|0|0|L|8|L|8|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]]|9|@$A|13|B|14|1|15]]|C|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

You should use a standalone code syntax highlighter: <a href="http://alexgorbatchev.com/SyntaxHighlighter/" rel="nofollow">SyntaxHighlighter 3</a> works really fine.

If you really want CodeMirror, there is a <a href="http://codemirror.net/manual.html#option_readOnly" rel="nofollow"><code>readOnly</code></a> option:

<pre><code>var myCodeMirror = CodeMirror(function(elt) {
 myElement.parentNode.replaceChild(myElement, elt); // myElement is your &lt;pre&gt; or &lt;div&gt;
 }, {
 value: myElement.value,
 readOnly: true
 });
</code></pre>

blocks|key|946177|text|实际上你不能。Codemirror2的编写方式是所有的实现都隐藏在闭包中。documentation+http://codemirror.net/manual.html中介绍了可以使用的公共方法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|946178|唯一可用的选择是使用其他语法高亮工具或潜入CodeMirror2的代码中，以剥离必要的部分。|946179|如果您要选择最后一个选项，请注意|946180|function+refreshDisplay(from,+to)+method|code-block|syntax|javascript|946181|它循环遍历各行并突出显示它们。|946182|entityMap|0|LINK|mutability|MUTABLE|url|http://codemirror.net/manual.html^0|1F|X|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

Actually you can't. Codemirror2 is written in the way that all implementation is hidden in closures. Public methods which can be used are described in documentation <a href="http://codemirror.net/manual.html" rel="nofollow">http://codemirror.net/manual.html</a> 
The only available options are to use anothe syntax highlighters or dive into the code of CodeMirror2 to strip necessary parts out. 
If you will chose last option, please give attention to 

<pre><code>function refreshDisplay(from, to) method
</code></pre>

it loops through lines and highlights them.

blocks|key|730186|text|一种更好、更简单的解决方案是将CodeMirror实例的readOnly属性设置为true，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|730187|$('.code').each(function()+{

++++var+$this+=+$(this),
++++++++$code+=+$this.html();

++++$this.empty();

++++var+myCodeMirror+=+CodeMirror(this,+{
++++++++value:+$code,
++++++++mode:+'javascript',
++++++++lineNumbers:+!$this.is('.inline'),
++++++++readOnly:+true
++++});

});|code-block|syntax|javascript|730188|只需将类.code添加到包含代码的标记中，它的语法就会突出显示。我还通过使用类.inline添加了对内联代码的支持。|offset|length|style|CODE|730189|​|730190|Example+on+jsfiddle|730191|730192|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mofle/tZVsS/^0|0|0|4|5|13|7|0|0|0|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@$I|12|J|13|K|L]|$I|14|J|15|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@$I|18|J|19|1|1A]]|A|$]]|$1|Q|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

A much nicer and easier solution is to just set the readOnly property of the CodeMirror instance to true, like this:

<pre><code>$('.code').each(function() {

 var $this = $(this),
 $code = $this.html();

 $this.empty();

 var myCodeMirror = CodeMirror(this, {
 value: $code,
 mode: 'javascript',
 lineNumbers: !$this.is('.inline'),
 readOnly: true
 });

});
</code></pre>

Just add the class <code>.code</code> to the tag containing the code and it will be syntax highlighted. I've also added support for inline code, by using the class <code>.inline</code>.

<a href="http://jsfiddle.net/mofle/tZVsS/" rel="noreferrer"><h2>Example on jsfiddle</h2></a>

blocks|key|730233|text|作为一个比较晚的更新，CodeMirror+2最近获得了这一功能。请参阅http://codemirror.net/demo/runmode.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|730234|entityMap|0|LINK|mutability|MUTABLE|url|http://codemirror.net/demo/runmode.html^0|10|13|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

As a somewhat late update, CodeMirror 2 recently gained this ability. See <a href="http://codemirror.net/demo/runmode.html" rel="noreferrer">http://codemirror.net/demo/runmode.html</a>

blocks|key|730277|text|CodeMirror+V2包含runmode.js。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|730278|我已经写了一个使用runmode和gutter的例子。|730279|查看：http://jsfiddle.net/lyhcode/37vHL/2/|offset|length|730280|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/lyhcode/37vHL/2/^0|0|0|3|10|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

CodeMirror V2 contains a runmode.js.

I've wrote an example using runmode with gutter.

check:
<a href="http://jsfiddle.net/lyhcode/37vHL/2/" rel="nofollow">http://jsfiddle.net/lyhcode/37vHL/2/</a>

blocks|key|946401|text|下面是一个使用codemirror+runmode和jquery的更简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|946402|<pre+class='code'>{:message+=>+'sample+code'}</pre>

$(document).ready(function()+{
++++$('.code').each(function(index,+e)+{
++++++++$(e).addClass('cm-s-default');+//+apply+a+theme+class
++++++++CodeMirror.runMode($(e).text(),+"javascript",+$(e)[0]);
++++});
});|code-block|syntax|javascript|946403|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Heres an simpler solution using codemirror runmode and jquery:

<pre><code>&lt;pre class='code'&gt;{:message =&gt; 'sample code'}&lt;/pre&gt;

$(document).ready(function() {
 $('.code').each(function(index, e) {
 $(e).addClass('cm-s-default'); // apply a theme class
 CodeMirror.runMode($(e).text(), "javascript", $(e)[0]);
 });
});
</code></pre>

Can <a href="http://codemirror.net/">CodeMirror 2</a> be used to highlight code from a <code>DIV</code> or <code>PRE</code> tag (without the editor)?

Like CodeMirror 1 used to be able to do with the hightlightText() function?
For example here: <a href="http://codemirror.net/1/highlight.html">http://codemirror.net/1/highlight.html</a>, after you press run highlight (the highlighted text below)

Also can it highlight code from a inline element, like <code>&lt;code&gt;</code>, and keep the results inline, like Google's Prettify does?

CodeMirror 2 - Highlight only (no editor)

是否可以使用突出显示DIV或PRE标记中的代码(不使用编辑器)？就像CodeMirror 1过去可以使用hightlightText()函数一样吗？例如：，在您按下run highlight (下面突出显示的文本)之后此外，它还可以突出显示来自内联元素的代码，如<code>，并保持结果的内联，就像谷歌的Prettify...

问CodeMirror 2-仅突出显示(无编辑器)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CodeMirror 2-仅突出显示(无编辑器)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CodeMirror 2-仅突出显示(无编辑器)
EN