Question

我创建了我在文本区域或文本框中输入内容的实时预览，预览工作正常， my fiddle link

HTML

pip

的Javascript

<textarea class="form-control" id="desc" rows="10" cols="5"name="desc"></textarea> 
<div class="col-md-6 container" id="live-preview"></div>

问题是当我输入

时

$(document).ready(function () {
    $('#desc').keyup(function(){
        $('#live-preview').html($(this).val());
    });
});

然后它将显示输出

``` </html><p>some text</p></html>```

```<html>some text</html>```标记在实时预览中被视为段落，但<p>不被视为'```'标记。

我想要的是什么： 我想在输入code时将星号转换为*标签或<em>，代码标签也是如此

Answer 1

野外有许多降价模块（谷歌是你最好的朋友）：

以下是使用markdown-it（fiddle）的示例：

$(document).ready(function () {
    var md = window.markdownit(); // get a markdown instance

    $('#desc').keyup(function () {
        var html = md.render($(this).val()); // parse the markdown into html
        $('#live-preview').html(html);
    });
});

尝试此字符串 - `<p></p>` *emphasize* and **bold**

不要忘记添加脚本标记：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/4.4.0/markdown-it.min.js"></script>

Answer 2

使用css将p指向代码。

http://jsfiddle.net/aoj17225/5/

p{
background-color:grey;
padding:10px 3px;  
 }

使用javascript实时预览文本

2 个答案: