← All posts
Ivan Homola Friday, October 21, 2022

How to display code snippets in HTML?

Share

AUTHOR

Ivan Homola, Author

Indie maker with a passion for SEO working on web projects. Ex-mobile dev-agency owner. Now, helping early stage founders turn their side projects into businesses.

See all articles

You want your code snippets to look 'pretty,' but do you know how to display them properly in HTML and make them awesome?

Do you want to display formatted code on your custom or WordPress blogs but don't know the best resources, plugins, or libraries to do it?

In this tutorial, I will share with you the possible easiest ways to display code snippets in HTML, along with examples.

Why do you need to display code snippets in HTML?

Showcasing code in HTML can be beneficial if you want to share your programming knowledge with your audience in the shape of code snippets.

Let's say you have a blog and you're writing a technical guide with some code examples.

You want to demonstrate parts of this code in your article with the proper format and styling. In that case, you will need a way to present them.

Using <pre> and <code> tags in HTML

Normally, when you try to indent the text inside HTML tags. It ignores the line breaks and renders single lines.

But, in <pre> (preformatted) tag, spaces and line breaks aren't ignored.

Just look into the simple text example below:

HTML pre tag example code snippet

HTML pre tag rendered

You can easily print the code with the same approach. Just place it inside <pre> tag, and that's it.

code inside HTML pre tag

code rendered insire HTML pre tag

There is another tag combined with <pre> tag, which gives more semantic meaning to search engines. The HTML code tag.

<code> tag is used for the piece of computer code. Usually, you include this tag inside of the <pre> tag to tell a browser, and Google that’s a block of code you want to display, not to render.

Here is an example:

HTML code tag inside of pre tag

Encode Reserved tags into HTML entities

What if you want to display the HTML code block using the <pre> tag?

Looking at the example below, you will see that the entered HTML code has been rendered but not displayed because of reserved characters.

code in HTML code tag

code rendered in HTML code tag

To fix this issue, you will need to use HTML entities. Like this:

using HTML entities to display HTML code inside of HTML code tag

displaying HTML code inside of HTML code tag

Now, don't get yourself confused.

There are tools available to convert HTML tags into HTML entities to make your life easier.

For example, you can use Text HTML entities Convertor or HTML Encode.

Syntax highlighting of code blocks

We don't usually color the code snippets through custom CSS styling. However, there are plenty of lightweight libraries available to do this job.

Check these 3 Popular JavaScript Libraries for Syntax Highlighting:

  • PrismJS
  • HighlightJS
  • Rainbow

And if you're using WordPress, you can use the plugin Prismatic by Jeff Starr.

Using PrismJS to style your code block in 3 easy steps

  1. Download the JavaScript and CSS files of Prismjs or use CDN
  2. Now, link the CSS files inside the head section and the JavaScript file at the bottom
  3. Use the pre-defined class names in <code> tag

Prismjs code sample

Prismjs example code snippet

You can use PrismJS for different languages like CSS, JavaScript, Go, PHP, etc.

Colors schemes vary on the style or theme you choose, like:

  • language-css
  • language-js
  • language-HTML
  • language-python

There are endless customizations that you can do to highlight your code blocks.

You can see the complete list of languages and plugins that PrismJS supports.

Some useful List of plugins are:

  • Line Numbers
  • Line Highlight
  • Show Language
  • Command Line
  • Highlight Keywords
  • and much more

PrismJS Plugin Examples:

By default, plugins are not included in downloaded files.

Before downloading the files, you must enable or select your desired plugins and languages.

Adding line numbers to code block:

add line numbers into code snippet using Prismjs

example Prismjs output with line numbers

Or copy to clipboard option:

adding copy to clipboard option into code snippet using Prismjs

example Prismjs output with line numbers and copy to clipboard option

Conclusion:

So far, you've learned about sharing code snippets on a website by displaying them through preformatted <pre> and computer code <code> tags.

You have also learned about JS libraries and the WordPress plugin to integrate into your blog or website.

But now, what if you want to share useful code snippets with the team or friends in a more modern and smarter way?

Here comes the new code snippets manager by Codiga. It allows you to add, manage, and share code snippets within your chosen IDE. We provide plugins for VS Code, IntelliJ/Jetbrains and Google Chrome.

FAQs:

What is a code snippet?

In simple words, a code snippet is a block of code you can utilize in various programming projects. Code snippets are useful for reducing the time it takes to create software by allowing developers to reuse code.

Is it good approach to use <code> tag inside <pre> tag?

Yes, if you want to display the computer/programming code, then using <code> inside <pre> tag is recommended.

How to organize code snippets efficiently?

You can use smart code snippets to organize your code blocks; the best part is you can instantly share them with your team or the world!

Is there a way to embed code snippets into the website without javascript?

Yes, there is a way to display code snippets on the website without using the JavaScript library. You can use the <pre> and <code> tags to insert preformatted text or source code and style them accordingly.

Do you recommend to use 3rd party libraries for Syntax Highlighting?

Yes, using a 3rd party solution for syntax highlighting on your websites is beneficial. I prefer Prism, a feature-rich Syntax Highlighting JS library.

Schedule a demo

Code analyzed in seconds with Codiga Automated Code Reviews.

Write code faster with the Codiga Coding Assistant.

Let's talk!