Exaple of pre tag.

That covers the basics, but let us walk through more details in this guide – Read on!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

CREATING CODE SNIPPETS

All right, let us now get into how to properly create the code snippets and place them into an HTML page.

1) PREFORMAT TAG

 
Hello world, my name is John Doe.
 
var foo = "bar"; var hello = "world"; console.log(foo); console.log(hello);
 
 
Hello world, my name is John Doe.
 
var foo = "bar"; var hello = "world"; console.log(foo); console.log(hello);
 
As you may have noticed already – Browsers will ignore line breaks and multiple white spaces in most “normal” HTML tags. That is not what we want, and so, we have to use the preformat tag for code snippets to retain their formatting.
 
2) CODE TAG
 
var foo = "bar"; var hello = "world"; console.log(foo); console.log(hello);
 
 
var foo = "bar"; var hello = "world"; console.log(foo); console.log(hello);
 
Moving forward, this one is kind of optional but highly recommended. The tag is used to demarcate blocks of code snippets, and we can use it in combination with the tag.
 
The importance of the tag actually lies in search engine optimization (SEO). Yes, just this simple tag will help search engines to better understand the contents of your page. Process the code sections differently, and probably gain some brownie points to rank better.
 
3) HTML ENTITIES
 
<strong> HELLO WORLD! </strong>
 
 
 HELLO WORLD! 
 
Here comes the most troublesome part. Remember that HTML has reserved some characters as tags and syntax? For example, if we place as-it-is into a section, it will be mistaken as a tag instead. So to display the reserved characters, we have to convert them into their equivalent HTML entities.
 
 
Just do a search online for HTML entity converter, there are tons of free online converters.
 
In PHP, just use the htmlentities() function.
 
Python – Check this out.
 
Javascript – Check out this library.
 
 
4) CODE HIGHLIGHTERS
 
      
<strong>HELLO WORLD!</strong>
 
 
DOWNLOAD & NOTES
 
Here is the download link to the example code, so you don’t have to copy-paste everything.
 
SUPPORT
 
600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a "paid scripts and courses" business, so every little bit of support helps.
 
EXAMPLE CODE DOWNLOAD
 
Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 
EXTRA BITS & LINKS
 
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
 
LINKS & REFERENCES
 
 
: The Preformatted Text element – MDN
 
: The Inline Code element – MDN
 
Entity – MDN
 
HTML Entity List – Freeformatter
 
htmlentities Manual – PHP
 
 
INFOGRAPHIC CHEAT SHEET
 
 
THE END
 
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
 
Leave a Comment Cancel Reply
 
Search
 
Breakthrough Javascript
 
 
Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript - Check out Breakthrough Javascript!
 
Socials
 
About Me
 
 
W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.
 
Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.
 
Источник
 
How to show HTML code on a web page?
 
In this tutorial you will learn how we can show our HTML, C#, Java, C language etc. code on webpage.
 
I tried to find the solution of this problem, but I didn’t found any helpful solution on the internet. Here you will get your problem solution in easy way.
 
If you found any difficulty and mistakes in this tutorial please let me know by posting comment in comment box or send me message in contact us form.
 
Types of tag to display code on webpage.
 
The tag that is use to show the coding of html, java c etc on page are given below.
 
Introduction of  
..
 
  tag
 
The  
 
..
 
  tag is use to display or show the all language coding as same on HTML webpage. We will use HTML  
 
..
 
  tag to display or show the coding on our HTML webpage. With the help of  
 
..
 
  tag we can do it.
 
In HTML  
 
..
 
  tag we write or paste our HTML, C#, Java, C etc. code. It will show or display same code as you written or pasted in  
 
..
 
  tag.
 
You can see the output below.
 
    
Campuslife
   
 
Step 1.
 
Open your Notepad or Adobe Dreamweaver or any other HTML editor. I am using Adobe Dreamweaver. I am suggesting to you use Notepad for better practice.
 
To open the Notepad press window + r and type notepad, then press enter. Or you can find in start menu.
 
Start Menu → All programs → Accessories → Notepad.
 
Step 2.
 
Let’s start working with  
 
..
 
  tag.
 
In  
 
..
 
  tag we show the HTML angle brackets ( ) tags with help of & lt ; ( less then angle bracket) and & gt ; (> greater then angle bracket).
 
Let suppose you want to display a tag in  
 
..
 
  tag then we will use above angle brackets.
 
Output:
 
I hope now you have understood the concept of  
 
..
 
  tag. Now our beginning level has been finished.
 
Now we will work on our different language coding like html, c#, java, etc. which we want to show on webpage.
 
Step 3.
 
First create  
 
..
 
  tag and copy the below html code and paste it in between  
 
..
 
  tag.
 
You will see the HTML angle brackets I replaced with & lt ; and & gt ; angle brackets because we want to display or show it on webpage.
 
Example:
 
&lt;html&gt; &lt;head&gt; &lt;title&gt;Welcome to campuslife.&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Campuslife Wesbite&lt;/h1&gt; &lt;h2&gt;My first page.&lt;/h2&gt; &lt;p&gt; Campuslife is a free learning source website for users. &lt;p&gt; &lt;/body&gt; &lt;/html&gt; 
 
Step 4.
 
Now we will apply the css to above HTML code. First create the class of your  
 
..
 
  tag like below.
 
I have created mycode class for my  
 
..
 
  tag.
 
Now apply the CSS to your  
 
..
 
  tag for better presentation. First create CSS  
  
  tag in between  ..  tag like below.
 
     
 
Now copy the below CSS code and paste it in between  
  
  tag.
 
Step 5. Final Step
 
Now save your file with any name with .html extension. Like mypage.html. After saving the file open the file by double click on it. It will be open in browser. Now you will see your coding on webpage same as in editor it is.
 
Output:
 
    
Campuslife Wesbite
 
My first page.
 
Campuslife is a free learning source website for users. 
 
 
Источник