Предварительный просмотр в Codemirror не требует форматирования

У меня проблема с 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>

Примечание: у меня есть файлы Codemirror в папке с именем 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 поста здесь, но они не совсем соответствовали, и код не работал для меня. Предварительный просмотр отображается и обновляется, но проблема в том, что я получаю только одну строку текста без форматирования.

Так, например, следующая уценка: # Заголовок 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)

Он не превращает подчеркивание или звездочки в текст, выделенный жирным шрифтом или курсивом, и полностью игнорирует разрывы строк.

Любые идеи относительно того, что идет не так? Я не мог даже изменить демо, чтобы заставить его работать. Мне должно быть не хватает некоторых знаний.

Источник

1 ответ

Решение

Браузеры не отображают уценку, они отображают HTML. Вам нужно будет добавить шаг, где вы конвертируете их уценку в HTML, используя, например, https://github.com/chjj/marked.

Источник
Другие вопросы по тегам