-1

私のhtmlコード

    <div style="padding-top:20px;" class="control-group">
                <div class="controls">
                    <div id="wmd-button-bar"></div>
                    <textarea class="wmd-input" id="wmd-input"></textarea>
                </div>
        </div>
        <div style="padding-top:20px;" class="control-group">
                <div class="controls">
                    <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
                </div>
        </div>

私のJavaScriptコード:

(function () {
    var converter1 = Markdown.getSanitizingConverter();

    converter1.hooks.chain("preBlockGamut", function (text, rbg) {
        return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {
            return "<blockquote>" + rbg(inner) + "</blockquote>\n";
        });
    });

    var editor1 = new Markdown.Editor(converter1);

    editor1.run();

})();

vmd-preview の私の CSS コード:

.wmd-preview 
{
    border:2px solid #979797;
}

.wmd-preview 
{
    background-color:#E0EAF1;
    border-bottom:1px solid #b3cee1;
    border-right:1px solid #b3cee1;
    padding:3px 4px 3px 4px;
    margin:2px 2px 2px 0;
    text-decoration:none;
    font-size:90%;
    line-height:2.4;
    white-space:nowrap;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height:21px;
    word-wrap:break-word;
}

.wmd-preview
{
    clear:both;
    padding:3px;
    border:2px dotted #ccc;
    font-size:107%;
    line-height:130%;
    width:660px;
}

.wmd-preview p
{
    word-wrap:break-word;
}

.wmd-preview li
{
    word-wrap:break-word;
}

.wmd-preview li pre
{
    word-wrap:normal;
}

.wmd-preview img
{   
    max-width:640px;
}

行を変更せずにエディターに書き込み続けるのはなぜですか? プレビューの幅が広がり、自動ラップできません。

PS: 私のブラウザは google chrome です

4

1 に答える 1

0

上記のコメントから拡張すると、ここでの問題は、内部テキストが壊れないように設定されていることです。その要素から削除するだけwhite-space:nowrap;で、最初の問題は解決されます。

このデモを表示します。

ID とクラスの名前付けとスタイル設定に関しては、正常にレンダリングされる可能性がありますが、両方にまったく同じ文字列を使用しないことが一般的にベスト プラクティスです。これは、後でコード内で名前の競合が発生する可能性があるためですが、いつかコードを編集する必要があるかもしれない他の人にとって読みやすくなります。

上記の例のデモでは、ID とハイフンでつながれたクラス名にハンガリー語表記(または小文字のキャメルケース) を使用しました。自分に合ったスタイルを選択でき、多くのスタイルがあります。他のいくつかの命名規則を調べて、試してみてください。あなたは本当にうれしく思います！

于 2013-09-30T09:15:27.980 に答える