文章/答案/技术大牛

发布

社区首页 >问答首页 >使用javascript实时预览文本

问使用javascript实时预览文本
EN

Stack Overflow用户

提问于 2015-09-13 09:47:55

回答 2查看 2.7K关注 0票数 1

我在文本区域或文本框中创建一个实时预览，预览效果很好，我的小提琴节。

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>```

then it will show the output

```javascript

<html>some text</html>

在实时预览中，标记被视为段落，但'```'不被视为code标记。

我想要的：，当我键入*时，星号被转换成标记或__，代码标记也是如此

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-09-15 21:29:59

在野外有很多标记模块(google是你最好的朋友)：

下面是一个使用markdown-it (小提琴)的示例：

$(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);
    });
});

试试这个字符串- `` *emphasize* and **bold**

不要忘记添加脚本标记：

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

票数 5

Stack Overflow用户

发布于 2015-09-13 10:11:45

使用css将p作为代码点。

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

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

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32548359

复制

相似问题

问使用javascript实时预览文本
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript实时预览文本EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript实时预览文本
EN