- How to show HTML code on a web page?
- Types of tag to display code on webpage.
- Introduction of .. tag
- You can see the output below.
- Campuslife
- Step 1.
- Step 2.
- Output:
- Step 3.
- Example:
- Step 4.
- Step 5. Final Step
- Output:
- Campuslife Wesbite
- My first page.
- How to display code snippets/examples on a webpage
- Highlighting code with Prism plugin
- Highlighting code with Highlight.js
- Related Articles
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:
<html> <head> <title>Welcome to campuslife.</title> </head> <body> <h1>Campuslife Wesbite</h1> <h2>My first page.</h2> <p> Campuslife is a free learning source website for users. <p> </body> </html>
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.
How to display code snippets/examples on a webpage
As a computer programmer who loves writing, you are likely to find yourself writing web page content or blog posts containing code examples with illustrations on how to solve various problems.
In this case, you want to do it in such a way that the programmers reading can easily understand and even copy-paste the code. Programmers are used to coding and seeing code mostly in text editors and IDEs. Thus the easiest way to capture their attention and get them interested in reading the code on your pages/posts is to display it in the format they are used to.
In this article we explore in a comprehensive way how to display sample code snippets within a webpage/blog post like shown below:
Sample Page Heading
Sample Page paragragh
In order to display code on HTML pages, we need to use two tags: and
Simply enclose your code within opening and closing tags and then wrap it inside the tags to ensure it appears in the browser in the same format(spacing and line-breaks) as it would on text editors.
The above code will be displayed on a web page as below:
However, one thing you will note is that when trying to display HTML code on a web page, the code ends up being rendered as an HTML element. For example the HTML code below for showing a table:
Highlighting code with Prism plugin
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It is one of the most used and popular plugins for highlighting code on web pages/blog posts. It is used in most of the websites that you visit almost on a daily basis.
To start using it, head to the plugin Download page, customize it to your preference by ticking your theme of choice(eg. dark mode, default, twilight, etc), tick all the programming languages that you would want to include, and highlight in your web pages, and tick on the extra plugins you would want to include. Once you are done with customization just click on “Download JS” button to download the Js file and “Download CSS” button to download the CSS file.
You will need to include the prism.css and prism.js files you downloaded on your page. Example:
Now the next step is to specify with a class attribute in the code tag which language your code is. You simply do this by using language-xxxx or lang-xxxx where xxxx denotes the language eg. language-html, language-css, language-js, language-php, etc.
Sample Page paragragh</p> </body> </html>
The above code is displayed as below on a web page:
Sample Page Heading
Sample Page paragragh
Let’s also add line numbers and use a different language(CSS):
The above code will be displayed as below:
Highlighting code with Highlight.js
Highlight.js is a popular code highlighting plugin supporting 191 languages and having 97 styles. It has automatic language detection, works with any markup, and is compatible with any js framework.
To start using it, go to the Download page, customize it by making sure that all the languages you would want to highlight are ticked. Then click on the “Download” button. This downloads a zip file named highlight.zip.
How to use Highlight.js
Uncompress the zip file, copy the highlight.pack.js file from the highlight folder and your preferred theme of the CSS file from the highlight/styles/ folder then paste them to the desired location in your project.
You will need to include the highlight.pack.js file and your choice CSS file you downloaded into your page then call initHighlightingOnLoad function. Example:
The implementation of highlight.js is similar to that of prism.js in a number of ways such as specifying which language the code is in using language-xxxx or lang-xxxx where xxxx denotes the language eg. language-html, language-css, language-js, language-php, etc. But unlike in prism, we can add the name of the language in the class and omit the language/lang part eg class=»html».
Sample Page paragragh</p> </body> </html>
The above HTML code is shown as below using the dark.css highlight.js plugin theme.
Now you are good to go! It’s my hope that this article has helped you enough to start to add your sample codes to web pages and blog posts. Follow us on Social Media to stay updated when we add new content.
Related Articles
