2

Markdown でライブ プレビュー モードが機能しない Codemirror に問題があります。私は基本的に、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>私のドキュメントの<form2 つの要素を持つ > を取得しました。

<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: # 見出し 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 に答える