How do I display the code as plain text

Question

this is my code :

<!DOCTYPE html>
<html>
    <head>
        <p id="x"></p>
        <p id="y"></p>
        <style>
        </style>
    </head>
    <body>
        <button id="btn">Click Me!</button>
        <script src="jquery/jquery1.12.js"></script>
        <script>
            var txt = '<!DOCTYPE html>\
                       <html>\
                       <head>\ 
                       </head>\
                       <body>\
                       <script>\
                       alert("ok");\
                       </script>\
                       </body>\
                       </html>';

           $(document).ready(function(){
               $("#btn").click(function(){
                   $("#x").text(txt);
               })
           })
        </script>
    </body>
</html>

How do I display the code as plain text.i want each line variable x go to new line for example :

output as :

<!DOCTYPE html>
<html>
<head>
up to the end

any help,tankyou.

score 1 · Answer 1 · answered Jun 11 '16 at 08:35

1

In you #x element, you should use a pre element instead of p.

Plus you should move it from the head to the body

Check out this JSBin: http://jsbin.com/qicabanoze/edit?html,js,output

answered Jun 11 '16 at 08:35

Gilad Artzi

3,034
1
15
23

It's ES6 template literal – Gilad Artzi Jun 11 '16 at 10:08

score 1 · Answer 2 · answered Jun 11 '16 at 08:36

1

To prevent the code from executing and not displaying you'll need to convert the text to character entities. > becomes &gt, < becomes &lt, etc.

You can also use the <pre> and <code> tags to display formatted code.

answered Jun 11 '16 at 08:36

Kaushal Shah

156
1
7

Ami Hollander · Answer 3 · 2016-06-11T08:41:22.890

0

You should replace the symbols '<' '>' to < and > and it will work.

You can use <code> or <pre>, but for the last one you will need to change the text style (default font).

edited Jun 11 '16 at 08:41

answered Jun 11 '16 at 08:34

Ami Hollander

2,435
3
29
47

Tankyou when use tag code,all tags are in one line i want each line be in new line. – Ehsan Jun 11 '16 at 08:56
Please check this link: http://stackoverflow.com/questions/1011641/how-can-i-use-css-to-preserve-line-breaks-in-an-html-code-block – Ami Hollander Jun 11 '16 at 10:21

How do I display the code as plain text

3 Answers3