CODEWITHSUNDEEP
html
paloturk
paloturk

Reputation: 203

How to print code on HTML

I want to display code characters on an HTML page. But no matter what I try it always renders HTML characters. pre or code doesn't work. How can I do this?

Upvotes: 20

Views: 65205

Answers (9)

Md Masud
Md Masud

Reputation: 2711

So I am displaying vue code in html content block with this. wrap the the code I want o display twice. for example:

<pre>
<xmp>  
<template> <h1>{{ title }}</h1></template>
<script>

export default {
  name: 'App',
  data(){
    return {
      title: 'My First Vue app :) '
     }
    }
 }
</script>
<xmp>
</pre>

The example here

Upvotes: 0

Poorna Senani Gamage
Poorna Senani Gamage

Reputation: 1268

To display HTML tags within a browser, you can surround the output with <xmp><p>HTML<p></xmp> tags

This is the easy way to fix this problem. but this tag already deprecated.

for more details : xmp

You can use htmlentities.But you can't use this inside the JavaScript file. because JavaScript runs in the user's browser. PHP runs on the server.

<code>
    <?php print htmlentities('<p>HTML</p>');?>
</code>

Upvotes: 0

nisargdave1993
nisargdave1993

Reputation: 113

try wrapping HTML content in <textarea></textarea> For ex: <pre> <textarea> <html> </html> </textarea> </pre> Works in awesome way. You don't have to use obsolete <XMP> example tag. <textarea> tag will wrap the content in text area. Try out !

Upvotes: -3

Ashish Pathak
Ashish Pathak

Reputation: 824

Download tinymce From

https://www.tinymce.com/download/

<html>
    <head>
    <script src='tinymce/js/tinymce.min.js'></script>
    <script>
    tinymce.init({
        selector: '#myTextarea',
        height: 300,
        width:800,
        theme: 'modern',
        plugins: [
          'advlist autolink lists link image charmap print preview hr anchor pagebreak',
          'searchreplace wordcount visualblocks visualchars code fullscreen',
          'insertdatetime media nonbreaking save table contextmenu directionality',
          'emoticons template paste textcolor colorpicker textpattern imagetools'
        ],
        toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        toolbar2: 'print preview media | forecolor backcolor emoticons',
        image_advtab: true
    });
    </script>
    </head>
    <body>

    <textarea  name="myTextarea" id="myTextarea" rows="4" cols="50">Hello Ashish</textarea>
    <input type='submit' value='save'/>
    </body>
    </html>

Upvotes: -2

weeger
weeger

Reputation: 429

Since tag is now depreciated : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp

You can use PHP to convert HTML tags :

<code> <?php print htmlentities('<p>Blah</p>'); ?> </code>

Upvotes: 3

No Refunds No Returns
No Refunds No Returns

Reputation: 8356

Look for an HTML encode function in your language.

string s = HtmlEncode(myInput);
response.write(s)

or similar

Upvotes: 2

nickf
nickf

Reputation: 546433

The <xmp> tag doesn't require the contents to be escaped.

eg:

<xmp>
    <p>Blah &nbsp;</p>
</xmp>

...will look like this on your screen:

    <p>Blah &nbsp;</p>

Upvotes: 46

Prody
Prody

Reputation: 5298

By escaping them.
&amp; will print &
&lt; will print >

You didn't mention what you're using to generate the html, if you're manually editing, some editors have options to escape a selection. If you're using a language, look for some function that escapes html special characters. (google for how to escape html in language-name-here)

Upvotes: 4

Gumbo
Gumbo

Reputation: 655707

You need to use character references instead of the plain characters themselves:

<code>&lt;HTML&gt;</code>

The elements code and pre are just to mark the content as code or preformated.

Upvotes: 10

Related Questions