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

CodeMirror 2可以用来突出代码从DIV或PRE标签（没有编辑器）？

就像CodeMirror 1曾经可以用hightlightText（）函数做的一样？ 例如： http ： //codemirror.net/1/highlight.html ，按下运行后突出显示（下面突出显示的文本）

也可以突出显示来自内联元素的<code> ，如<code> ，并保持内联结果，就像Google的Prettify一样？

Answer 1

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

Answer 2

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

Answer 3

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

 function refreshDisplay(from, to) method 

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

Answer 4

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

---

如果你问一个包的本地方法，答案是否定的，它只适用于textarea 。 但是，如果你打开使用变通办法，这是一个工程（testing）。

我已经在这里使用了jQuery，但是它的使用不是必须的，你可以用纯js代码来实现，尽pipe它会更长，并且不像jQuery代码那么整洁。

现在，让我们来解决这个问题。

假设你有一个带有代码的<pre> ，你想要变成无编辑器语法高亮的codemirror容器：

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

你所做的是，

1. 将<pre>更改为<textarea> ，
2. 将codemirror附加到textarea，
3. 隐藏假的光标并保持隐藏状态
4. 不要让隐藏的codemirror的textarea抓住焦点（当它回来的时候抓回去）。

对于最后一个操作，我使用了Travis Webbbuild议的方法 。 这里是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(); }); 

Answer 5

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

Answer 6

CodeMirror V2包含一个runmode.js。

我写了一个使用runmode与阴沟的例子。

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

Answer 7

下面是使用codemirror runmode和jquery的简单解决scheme：

 <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]); }); }); 

Answer 8

CM2不直接支持您正在寻找的function。 但是，我使用了一个涉及onFocus处理程序的技巧，他们支持禁止用户关注Codemirror元素，因此不允许编辑。 我的解释如下： http : //codemirror.net/manual.html 。 你可能会想用这个技术使用jQuery，但这不是必需的。 你正在谈论的是在一个div中的代码，所以我假设你知道如何将CodeMirror附加到一个div元素。

1. 创build一个隐藏的某种<input id="tricky">文本框。 你可以使用任何技术来“隐藏”它，但是我可以告诉你，将CSS设置为"display:none"将不起作用。 visibility:hidden可能工作，但可能更好的是把div放在页面的某个地方。
2. 在上面的链接中，按照Codemirror2文档设置一个onFocus处理程序，
3. 在您的onFocus事件处理程序中，执行如下操作：

   $("tricky").focus();
   或没有jQuery：
   document.getElementById("tricky").focus();

并且您立即将焦点redirect到不可见的字段，并且没有人可以编辑您显示的代码。 有可能有一些聪明的方法来打败这种方法，但它会适用于99％的情况。 这是一个小小的诡计，但至less你不必嘲笑Codemirror的内部。