CODEWITHSUNDEEP
javascript
user3931708
user3931708

Reputation:

Live preview of text using javascript

I create a live preview of what ever I type in text area or text box, the preview is working fine, my fiddle link

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

the problem is when I type

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

then it will show the output

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

the <p> tag is considered as paragraph in live preview but the '```' is not considered as code tag.

What I want: I want when I type * then the star is converted into <em> tag or <I>, same for code tag

Upvotes: 1

Views: 3220

Answers (2)

Ori Drori
Ori Drori

Reputation: 192657

There are many markdown modules out there in the wild (google is your best friend):

Here is an example using 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);
    });
});

Try this string - `<p></p>` *emphasize* and **bold**

Don't forget to add the script tag:

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

Upvotes: 5

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6897

use css to point p as code.

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

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

Upvotes: -2

Related Questions