javascript CodeMirror 2 - 仅突出显示（无编辑器）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5521137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CodeMirror 2 - Highlight only (no editor)
提问by Alex
Can CodeMirror 2be used to highlight code from a DIVor PREtag (without the editor)?
可以CodeMirror 2可用于高亮度代码从一个DIV或PRE标签（不包括编辑器）？
Like CodeMirror 1 used to be able to do with the hightlightText() function? For example here: http://codemirror.net/1/highlight.html, after you press run highlight (the highlighted text below)
像 CodeMirror 1 曾经能够使用 hightlightText() 函数一样吗？例如这里：http://codemirror.net/1/highlight.html，按下 run highlight （下面突出显示的文本）
Also can it highlight code from a inline element, like <code>, and keep the results inline, like Google's Prettify does?
它还可以突出显示来自内联元素的代码，例如<code>，并保持结果内联，就像 Google 的 Prettify 那样？
采纳答案by Sindre Sorhus
A much nicer and easier solution is to just set the readOnly property of the CodeMirror instance to true, like this:
一个更好更简单的解决方案是将 CodeMirror 实例的 readOnly 属性设置为 true，如下所示：
$('.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
});
});
Just add the class .codeto the tag containing the code and it will be syntax highlighted. I've also added support for inline code, by using the class .inline.
只需将类添加.code到包含代码的标签中，它就会被语法高亮显示。我还通过使用类添加了对内联代码的支持.inline。
Example on jsfiddle
jsfiddle 示例
回答by Marijn
As a somewhat late update, CodeMirror 2 recently gained this ability. See http://codemirror.net/demo/runmode.html
作为较晚的更新，CodeMirror 2 最近获得了这种能力。见http://codemirror.net/demo/runmode.html
回答by lyhcode
CodeMirror V2 contains a runmode.js.
CodeMirror V2 包含一个 runmode.js。
I've wrote an example using runmode with gutter.
我写了一个使用运行模式和装订线的例子。
回答by desheikh
Heres an simpler solution using codemirror runmode and jquery:
这是一个使用 codemirror runmode 和 jquery 的更简单的解决方案：
<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]);
});
});
回答by bpierre
You should use a standalone code syntax highlighter: SyntaxHighlighter 3works really fine.
您应该使用独立的代码语法高亮器：SyntaxHighlighter 3工作得非常好。
If you really want CodeMirror, there is a readOnlyoption:
如果你真的想要 CodeMirror，有一个readOnly选项：
var myCodeMirror = CodeMirror(function(elt) {
myElement.parentNode.replaceChild(myElement, elt); // myElement is your <pre> or <div>
}, {
value: myElement.value,
readOnly: true
});
回答by Eldar Djafarov
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 http://codemirror.net/manual.html
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
其实你不能。Codemirror2 的编写方式是所有实现都隐藏在闭包中。可以使用的公共方法在文档http://codemirror.net/manual.html 中进行了描述，
唯一可用的选项是使用另一种语法突出显示或深入研究 CodeMirror2 的代码以去除必要的部分。
如果您选择最后一个选项，请注意
function refreshDisplay(from, to) method
it loops through lines and highlights them.
它遍历线条并突出显示它们。
回答by Majid Fouladpour
Edit
Just realized a simpler method exists. Read method 2 below. I'm keeping the old method and its explanations intact and just include the improved jQuery code.
编辑
刚刚意识到存在一个更简单的方法。阅读下面的方法2。我保持旧方法及其解释不变，只包含改进的 jQuery 代码。
If you are asking about a native method of the package, the answer is no, it only works with textarea. But if you are open to using workarounds, here is one that works (tested).
如果您询问包的本机方法，答案是否定的，它仅适用于textarea. 但是，如果您愿意使用变通方法，这里有一个可行的（经过测试）。
I have used jQuery here, but its use is not a must and you can achieve the same with pure js code, though it would be longer and not as neat as jQuery code.
我在这里使用了 jQuery，但它的使用不是必须的，您可以使用纯 js 代码实现相同的效果，尽管它会更长且不如 jQuery 代码简洁。
Now, let's get to the workaround.
现在，让我们来看看解决方法。
Suppose you have a <pre>with code inside, that you want to turn into editor-less syntax-highlighted codemirror container:
假设您有一个<pre>with 代码，您想将其转换为无编辑器语法突出显示的 codemirror 容器：
<pre id="mycode">
<?php
echo 'hi';
$a = 10;
if($a == 5) echo 'too small';
?>
</pre>
What you do is,
你要做的是，
- change the
<pre>to<textarea>, - attach codemirror to the textarea,
- hide the fake cursor and keep it hidden, and
- do not allow the hidden codemirror's textarea grab the focus (and snatch it back when it does).
- 更改
<pre>为<textarea>， - 将代码镜像附加到文本区域，
- 隐藏假光标并保持隐藏状态，以及
- 不允许隐藏代码镜像的文本区域获取焦点（并在它发生时将其夺回）。
For the last action I have used the method suggested by Travis Webb. Here is the jQuery code that does these four things:
对于最后一个操作，我使用了Travis Webb 建议的方法。这是执行这四件事的 jQuery 代码：
$(document).ready(function() {
// (1) replace pre with textarea
$('#mycode').replaceWith('<textarea id="code">' + $('#mycode').html() + '</textarea>');
// (2) attach codemirror
var editor = CodeMirror.fromTextArea($("#code"), {
lineNumbers: true,
mode: "application/x-httpd-php"
});
// (3) hide the fake cursor
$('pre.CodeMirror-cursor').hide();
// [4] textarea to grab and keep the focus
$('body').append('<textarea id="tricky" style="height: 1px; position: fixed; width: 1px; top: 0; margin-top: -100px;" wrap="off"></textarea>');
// (4) grab focus
$('#tricky').focus();
// [4] if focus is lost (probably to codemirror)
$('#tricky').blur(function() {
// (4) re-claim focus
$('#tricky').focus();
// (3) keep the fake cursor hidden
$('pre.CodeMirror-cursor').hide();
});
});
Method Two
方法二
Instead of wrestling with cursor and all that, we can remove the elements that make the editor tick. Here is the code:
我们可以删除使编辑器打勾的元素，而不是与光标和所有这些搏斗。这是代码：
$(document).ready(function() {
$('#mycode').replaceWith('<textarea id="code">' + $('#mycode').html() + '</textarea>');
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "application/x-httpd-php"
});
$('pre.CodeMirror-cursor').remove();
$('div.CodeMirror').find('textarea').blur().parent().remove();
$('div.CodeMirror').find('pre:first').remove();
$('textarea#code').remove();
});
