使用javascript实时预览文本

Live preview of text using javascript

本文关键字：文本 实时 javascript 使用      更新时间：2023-09-26

我创建了一个实时预览，无论我在文本区域或文本框中输入什么，预览工作正常，我的fiddle链接

HTML 

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

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

问题是当我输入

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

则显示输出

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

<p>标签在实时预览中被视为段落，但'```'不被视为code标签。

我想要的:我想当我输入*然后星形转换为<em>标签或<I>，同样的代码标签

市面上有很多降价模块(google是你最好的朋友):

  • markdown-it
  • 标记
  • markdown-js
下面是一个使用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标签:

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

使用CSS将p作为代码。

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

p{
background-color:grey;
padding:10px 3px;  
 }
相关文章：