2

我遇到了 Codemirror 的问题，其中实时预览模式不适用于 Markdown。我基本上只是想达到与 SO 相同的效果。就目前而言，实时预览适用于 HTML，但不适用于 Markdown。我已经关注了几个演示并尝试了一些没有运气的事情，我在这里作为最后的手段。以下是相关代码：

在我正在加载的文档的开头：

<script src="editor/lib/codemirror.js"></script>
<link rel="stylesheet" href="editor/lib/codemirror.css">
<script src="editor/lib/util/overlay.js"></script>
<script src="editor/mode/markdown/markdown.js"></script>

注意：我在一个名为editor. 这是与我所做的正常设置的唯一真正偏差。

然后在<body>我的文档中，我有一个<form> 有 2 个元素：

<textarea id="content" name="content"></textarea> 和 <iframe id="preview"></iframe>

然后在我的页面底部运行以下 JavaScript（顺便说一下，我也在使用 jQuery 1.8.2）：

// Initialize the editor when document finishes loading
    jQuery(document).ready(function() {
        var delay;
    var editor = CodeMirror.fromTextArea(document.getElementById("content"), {
        lineNumbers: false,
        mode: 'markdown',
        matchBrackets: false,
        theme: "ambiance",
        onChange: function() {
          clearTimeout(delay);
          delay = setTimeout(updatePreview, 300);
        }
        });




    // Initialize the live-preview mode
    function updatePreview() {
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
        }
        setTimeout(updatePreview, 300);
    });

我无法弄清楚我做错了什么。我尝试将覆盖模式与 XML 一起加载，但无济于事。我在这里找到了 2 个帖子，但它们并不完全相关，而且代码对我不起作用。实时预览正在显示和更新，但问题是我只得到一个没有格式的文本字符串。

因此，例如，以下 Markdown：# Heading 1

A paragraph with __bold__ *text*.

And [a link](http://example.com)

将完全按照我在此处键入的内容在实时预览 iframe 中输出：

# Heading 1 A paragraph with __bold__ *text*.And [a link](http://example.com)

它不会将下划线或星号变为粗体或斜体文本，并且完全忽略换行符。

关于出了什么问题的任何想法？我什至无法修改演示以使其正常工作。我一定是缺少一些知识。

4

1 回答 1

5

浏览器不显示降价，它们显示 HTML。您必须添加一个步骤，使用例如https://github.com/chjj/marked将它们转换为 HTML 。

于 2012-11-09T07:28:07.483 回答