59

CodeMirror 2能否用于突出显示DIV或PRE标记中的代码（没有编辑器）？

像 CodeMirror 1 过去可以使用 hightlightText() 函数一样吗？例如这里：http://codemirror.net/1/highlight.html，按下运行高亮后（下面突出显示的文本）

它还可以<code>像 Google 的 Prettify 那样突出显示内联元素中的代码，并保持结果内联吗？

4

7 回答 7

57

一个更好更简单的解决方案是将 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到包含代码的标签中，它将突出显示语法。我还通过使用 class 添加了对内联代码的支持.inline。

jsfiddle 上的示例

于 2011-04-09T13:40:02.133 回答
40

作为一个较晚的更新，CodeMirror 2 最近获得了这种能力。见http://codemirror.net/demo/runmode.html

于 2011-06-15T20:49:04.447 回答
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
  });
于 2011-04-02T20:02:22.220 回答
2

这是使用 codemirror 运行模式和 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]);
    });
});
于 2012-11-11T08:49:30.733 回答
2

其实你不能。Codemirror2 的编写方式是所有实现都隐藏在闭包中。可以使用的公共方法在文档http://codemirror.net/manual.html
中进行了描述 。唯一可用的选项是使用另一个语法荧光笔或深入 CodeMirror2 的代码以去除必要的部分。
如果您会选择最后一个选项，请注意

function refreshDisplay(from, to) method

它遍历线条并突出显示它们。

于 2011-04-05T12:22:34.333 回答
2

CodeMirror V2 包含一个 runmode.js。

我写了一个使用带有排水沟的运行模式的例子。

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

于 2011-12-16T03:10:03.343 回答
2

编辑
刚刚意识到存在一个更简单的方法。阅读下面的方法 2。我保持旧方法及其解释完整，只包括改进的 jQuery 代码。

如果您询问包的本机方法，答案是否定的，它仅适用于textarea. 但是，如果您愿意使用变通办法，这里有一个可行（经过测试）。

我在这里使用了 jQuery，但它的使用不是必须的，您可以使用纯 js 代码实现相同的目的，尽管它会更长并且不如 jQuery 代码那么简洁。

现在，让我们开始解决方法。

假设你有一个<pre>with 代码，你想变成没有编辑器的语法高亮代码镜像容器：

<pre id="mycode">
<?php
  echo 'hi';
  $a = 10;
  if($a == 5) echo 'too small';
?>
</pre>

你所做的是，

  1. 更改<pre>为<textarea>,
  2. 将代码镜像附加到文本区域，
  3. 隐藏假光标并保持隐藏，并且
  4. 不要让隐藏的 codemirror 的 textarea 抓住焦点（并在它发生时将其夺回）。

对于最后一个动作，我使用了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();
    });

});

方法二

我们可以删除使编辑器打勾的元素，而不是与光标和所有这些搏斗。这是代码：

$(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();
});
于 2011-04-08T07:31:26.317 回答