CodeMirror 2 - 仅突出显示（无编辑器）

CodeMirror 2可以用来突出显示DIV或PRE标签中的代码（没有编辑器）吗？像CodeMirror 1曾经能够使用hightlightText（）函数吗？例如：http：//codemirror.net/1/highlight.html，按下运行高亮显示（下面突出显示的文本）它也可以突出内联元素的代码，如<code>，并保持结果内联，就像谷歌的Prettify一样？

已邀请:

8 个回复

磋判粗惊

一个更好，更简单的解决方案是将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的例子

脾萌

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

粟痢凰副

其实你做不到。 Codemirror2的编写方式是所有实现都隐藏在闭包中。可以使用的公共方法在文档http://codemirror.net/manual.html中描述唯一可用的选项是使用其他语法高亮显示器或深入到CodeMirror2的代码中以删除必要的部分。如果您选择最后一个选项，请注意

function refreshDisplay(from, to) method

它循环穿过线条并突出显示它们。

荒劫娇噬

编辑刚刚意识到存在一种更简单的方法。阅读下面的方法2。我保持旧方法及其解释完整，只包括改进的jQuery代码。如果你问的是包的本地方法，答案是否定的，它只适用于textarea。但是，如果您愿意使用变通方法，那么可以使用（测试过的）。我在这里使用过jQuery，但它的使用不是必须的，你可以用纯js代码实现相同，虽然它会更长，而不是像jQuery代码那样整洁。现在，让我们来解决这个问题。假设你有一个带有代码的<pre>，你想要变成无编辑语法高亮的codemirror容器：

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

你做的是，将<pre>改为<textarea>，将codemirror附加到textarea，隐藏假光标并将其隐藏起来不要让隐藏的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();
});

邵酮

您应该使用独立的代码语法高亮显示器：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
  });

物崎巩

CodeMirror V2包含runmode.js。我用runmode和gutter写了一个例子。校验： http://jsfiddle.net/lyhcode/37vHL/2/

抬澈帅沮

下面是使用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]);
    });
});

逝媳蘑贩茄

CM2不直接支持您正在寻找的功能。但是，我使用了一个涉及onFocus处理程序的技巧，它们支持禁止用户专注于Codemirror元素，因此不允许编辑。我之前的解释预先假定您已经在这里查看过：http：//codemirror.net/manual.html。您可能希望将jQuery用于此技术，但这不是必需的。您正在谈论在div中使用代码，因此我假设您知道如何将Codemirror连接到div元素。创建一个隐藏的某种<input id="tricky">文本字段。你可以使用任何技术“隐藏”你想要的东西，但我可以告诉你，将CSS设置为"display:none"是行不通的。 visibility:hidden可能会起作用，但最好只将div放在页面某处。根据上面链接中的Codemirror2文档设置一个onFocus处理程序，在onFocus事件处理程序中，执行以下操作： $("tricky").focus(); 或者没有jQuery： document.getElementById("tricky").focus(); 并立即将焦点重定向到不可见的字段，没有人可以编辑您显示的代码。可能有一些聪明的方法来击败这种方法，但它对99％的情况都有效。这有点棘手，但至少你不必涉及Codemirror的内部。

要回复问题请先登录或注册

CodeMirror 2 - 仅突出显示（无编辑器）

8 个回复

发起人

codemirror

问题状态

CodeMirror 2 - 仅突出显示（无编辑器）

与内容相关的链接

8 个回复

发起人

codemirror

问题状态