CodeMirror 2 - 仅高亮显示（无编辑器）

Question

能否使用CodeMirror 2来突出显示来自 DIV 或 PRE 标签的代码（不使用编辑器）？

就像 CodeMirror 1 过去可以使用 highlightText() 函数一样？ 例如这里：http://codemirror.net/1/highlight.html，在按下 "run highlight" 后突出显示（下面的突出显示文本）

此外，它能否从内联元素，如 <code>，突出显示代码，并保持结果内联，就像谷歌的 Prettify 所做的那样？

- Alex

---

哇，你的声望值已经达到了70％ - 你是慷慨还是绝望？;) - 我会给你一个+1来帮助你回升！ - UpTheCreek

你有特别的限制不能使用独立的高亮显示器吗？ - bpierre

不，我只是喜欢codeMirror :) 目前我在使用highlight.js，它很棒，但我想看看codeMirror的表现。另外，codeMirror可以突出显示混合的php / html / js / css代码，这是它的优点... - Alex

从她设置赏金的方式来看，显然Alex完全不在乎声誉。我有点喜欢这一点，但仍希望她能保留一些声誉。她的声誉比此处设定的赏金要少（显然是因为在此之后失去了另一个赏金问题的分数）。现在，如果由于声誉不足而取消了这个赏金，我会很高兴。无论如何，我很想看看系统如何处理这个问题。 - Majid Fouladpour

@bpierre CodeMirror是一种使用JS编写的工具，既可以在浏览器上工作，也可以在服务器(Node)上运行。它非常灵活，允许嵌套模式（代码内部的代码）。这是两个重要的原因。 - Alba Mendez

Answer 1

一个更好、更简单的解决方案是将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
    });

});

只需将包含代码的标签添加类.code，它就会被语法高亮显示。我还添加了对行内代码的支持，通过使用类.inline。

在jsfiddle上的示例

- Sindre Sorhus

---

哇，你在我添加这个选项到我的答案之前只回答了9分钟，并且使用了内联模式。+1！ :-) - bpierre

@Felix 谢谢，应该注意到那个 ;) - Sindre Sorhus

不错:D，但我有一个问题：因为我不想在文本区域中显示它，所以来自div的代码将被转义。但是codemirror显示转义字符，而不是解码它们 :( - Alex

在你的例子中尝试添加一些转义的 HTML，例如 <div> fuu </div>。 - Alex

我已经更新了 jsfiddle 的示例，并支持转义代码。 - Sindre Sorhus

Answer 2

作为一个有点晚的更新，CodeMirror 2 最近获得了这个功能。请参见 http://codemirror.net/demo/runmode.html。

- Marijn

Answer 3

你应该使用独立的代码语法高亮工具：SyntaxHighlighter 3 非常好用。

如果你真的想使用 CodeMirror，那么有一个 readOnly 选项：

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

- bpierre

Answer 4

实际上你不能。Codemirror2的实现方式是所有实现都隐藏在闭包中。可以使用的公共方法在文档http://codemirror.net/manual.html中有描述。
唯一可用的选项是使用其他语法高亮工具或深入CodeMirror2的代码中剥离必要的部分。
如果您选择了最后一种选项，请注意

function refreshDisplay(from, to) method

它循环遍历每一行并将其突出显示。

- Eldar Djafarov

Answer 5

编辑
刚刚意识到有一个更简单的方法存在。请参阅下面的方法2。我保留旧方法及其解释，并包含改进后的jQuery代码。

---

如果您询问有关包的本地方法，答案是“不行，它只适用于”。但是，如果您愿意使用解决方法，这里有一个经过测试的解决方法。</br><div class="h-2"></div>我在这里使用了jQuery，但不一定需要使用它，您可以使用纯JS代码实现相同的效果，尽管代码会更长，而且不如jQuery代码整洁。</br><div class="h-2"></div>现在，让我们来看看解决方法。</br><div class="h-2"></div>假设您有一个包含代码的<pre>，您想将其转换为无编辑器的语法突出显示的codemirror容器：</br><div class="h-2"></div><pre class="guess-PHP"><code><pre id="mycode"> <?php echo 'hi'; $a = 10; if($a == 5) echo 'too small'; ?> </pre> </code></pre></br><div class="h-2"></div>你所要做的是： <ol> <li>将 <code><pre></code> 改为 <code><textarea></code>，</li> <li>将 CodeMirror 附加到文本区域中，</li> <li>隐藏伪光标并让其保持隐藏状态，以及</li> <li>不允许隐藏的 CodeMirror 文本区域获得焦点（并在它获得焦点时夺回焦点）。</li> </ol> 对于最后一个操作，我使用了<a href="https://dev59.com/6G035IYBdhLWcg3wQtyn#5589790">Travis Webb建议的方法</a>。下面是执行这四个操作的 jQuery 代码：</br><div class="h-2"></div><pre class="guess-JavaScript"><code>$(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(); }); }); </code></pre> <hr/> 第二种方法：</br><div class="h-2"></div>不必费力地与光标等进行斗争，我们可以移除使编辑器运行的元素。以下是代码：</br><div class="h-2"></div><pre class="guess-JavaScript"><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(); }); </code></pre>

- Majid Fouladpour

Answer 6

以下是翻译内容：

这里有一个更简单的解决方案，使用 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]);
    });
});

- desheikh

Answer 7

CodeMirror V2包含一个runmode.js。

我写了一个使用带有gutter的runmode的示例。

请查看： http://jsfiddle.net/lyhcode/37vHL/2/

- lyhcode