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

可用于突出显示

DIV

或

PRE

标记中的代码（不带编辑器）

就像CodeMirror 1曾经能够处理hightlightText（）函数一样？ 例如：按下run highlight（下面突出显示的文本）后

---

它还可以突出显示内联元素中的代码，如

，并保持结果内联，如Google的Prettify所做的那样？
您应该使用独立的代码语法高亮显示：效果非常好

如果您确实想要CodeMirror，有一个选项：

var mycodemiror=code镜像（函数（elt）{
myElement.parentNode.replaceChild（myElement，elt）；//myElement是您的或
function refreshDisplay(from, to) method

}, {
值：myElement.value，
只读：正确
});
实际上你不能。Codemirror2的编写方式是所有实现都隐藏在闭包中。文档中描述了可使用的公共方法

唯一可用的选项是使用语法高亮标记或深入CodeMirror2的代码以去除必要的部分。

如果您选择最后一个选项，请注意

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

它在各行之间循环并高亮显示。
编辑

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


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

我在这里使用了jQuery，但它的使用不是必须的，您可以使用纯js代码实现同样的效果，尽管它会更长，也不像jQuery代码那样整洁

现在，让我们开始解决问题

假设您有一个包含代码的
，希望将其转换为无编辑器语法高亮显示的codemirror容器：

$(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();
});



你所做的是

将
更改为

$('.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
    });

});

将codemirror连接到文本区域
隐藏假光标并将其隐藏，然后
不要让隐藏的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]);
    });
});

$（文档）.ready（函数（）{
//（1）将pre替换为textarea
$（'#mycode'）。替换为（'+$（'#mycode'）。html（）+''；
//（2）安装后视镜
var editor=CodeMirror.fromTextArea（$（“#代码”）{
行号：对，
模式：“应用程序/x-httpd-php”
});
//（3）隐藏假光标
$（'pre.CodeMirror cursor'）.hide（）；
//[4]文本区域，用于抓取并保持焦点
$（'body'）。追加（''）；
//（4）抓住焦点
$（“#棘手”）.focus（）；
//[4]如果焦点丢失（可能到codemirror）
$（“#棘手”）.blur（函数（）{
//（4）重新声明焦点
$（“#棘手”）.focus（）；
//（3）隐藏假光标
$（'pre.CodeMirror cursor'）.hide（）；
});
});


方法二

我们可以删除使编辑器滴答作响的元素，而不是与光标和其他所有东西搏斗。代码如下：

$（文档）.ready（函数（）{
$（'#mycode'）。替换为（'+$（'#mycode'）。html（）+''；
var editor=CodeMirror.fromTextArea（document.getElementById（“代码”）{
行号：对，
模式：“应用程序/x-httpd-php”
});
$（'pre.codemirrour cursor'）.remove（）；
$（'div.codemirr'）.find（'textarea'）.blur（）.parent（）.remove（）；
$（'div.CodeMirror'）.find（'pre:first'）.remove（）；
$（'textarea#code'）。删除（）；
});
一个更好、更简单的解决方案是将CodeMirror实例的readOnly属性设置为true，如下所示：

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

作为一个稍晚的更新，CodeMirror 2最近获得了这个能力。请参见
CodeMirror V2包含一个runmode.js

我已经编写了一个使用运行模式的示例

检查：
这里有一个使用codemirror运行模式和jquery的更简单的解决方案：

{:message=>'sample code'}
$（文档）.ready（函数（）{
$（'.code'）。每个（函数（索引，e）{
$（e）.addClass（'cm-s-default'）；//应用主题类
运行模式（$（e）.text（），“javascript”，$（e）[0]）；
});
});
Wow 70%的销售代表-你是慷慨还是绝望我会给你一个+1来帮你备份！不使用独立的荧光灯有什么特别的限制吗？没有，我只是喜欢codeMirror:）现在我正在使用highlight.js，这很好，但我也想看看codeMirror的行为。此外，CM还具有突出显示混合php/html/js/css代码的优势……从她设置奖金的方式来看，显然Alex不可能不关心声誉。我有点喜欢，但还是希望她留下一些。她比这里设定的赏金有更少的代表性（显然是因为在这个问题开始后，她在另一个赏金问题上失去了分数）。现在，如果因为销售代表数量不足，这笔奖金被取消，我会很高兴的。无论如何，我很好奇系统是如何处理这个问题的。@bpierre CodeMirror是JS；既可以在浏览器上工作，也可以在服务器（节点）上工作。它非常灵活，允许嵌套模式（代码内部的代码）。两大原因。哇，在我把这个选项添加到我的答案之前9分钟，你就回答了，而且是用内联模式+1! :-)@费利克斯：谢谢，我应该看到的；）很好：D但是我有一个问题：因为我不想在textareas上使用这个，来自divs的代码将被转义。但是codemirror显示转义字符，它不会对它们进行解码：（在您的示例中，尝试添加一些转义html，如
div fuu/div
，我已经更新了JSFIDLE示例，支持转义代码。
<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]);
    });
});