简体   繁体   中英

Preview HTML or Any code using javascript

I want to preview the html code, i have a code which only preview the text i type if i try to type the code then it will take it as html not as code, i want to warp the code in pre tag.

This my js preview code.

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

    });

The above javascript will only preview the plain text if i try to put code like <html><p>text</p></html> then it will show the output as text, but i wan the whole <html><p>text</p></html> in my preview panel.

Also: when i store the data in mysql as it is and access on the index page then the i have will face the same problem, if i access it like echo html_entity_decode($desp); then it will show the all the text text as it is, but i want that only the text in <pre><code></code></pre> will effect and the <b></b> or <i></i> will work as html.

Plus: I notice one thing here on stack overflow that when we insert code in our question then it warp it within single quote or something like that and when it is submitted then it will show as code, so how it is work, mean how to do like that.

So just set text instead of html :

 $('#desc').keyup(function(){ $('#live-preview').text($(this).val()); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="desc"></textarea> <pre id="live-preview"></pre> 

I notice one thing here on stack overflow that when we insert code in our question ...

There is a markdown plugin used to convert markdown text into HTML.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM