Highlight.js is a JavaScript library that applies syntax highlighting (colorized display) to source code on web pages. This article provides a simple explanation of how to use it for beginners.

Contents
  1. Download Highlight.js
  2. Integrate Highlight.js into an HTML File
  3. Markup for Code Blocks
  4. Demo Page Showing Colorful Code Highlighting on a Web Page Using highlight.js
  5. Important Notes
  6. In Conclusion

Download Highlight.js

  • Access the official Highlight.js website (Highlight.js).
  • In the “Download” section, select the programming languages you need. You can also download it without selecting any.
  • Click the “Download” button to download the Highlight.js file for the selected languages.

Integrate Highlight.js into an HTML File

Include the highlight.js and default.css files found in the downloaded package into your HTML file. Place the CSS file in the head section and the JavaScript file near the end of the body tag.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Page Showing Colorful Code Highlighting on a Web Page Using highlight.js</title>

<!-- Include Highlight.js CSS file -->
<link rel="stylesheet" href="path/to/styles/default.css">
</head>
<body>

<h1>Display syntax highlighting for programming code (pre, code tags) on a web page using prism.js</h1>


<pre>
<code class="language-javascript">// Write JavaScript code here
console.log("Hello, world!");
</code>
<code>
body {
  font-size: 16px;
  text-align: left;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.8em;
}
</code>
<code>
echo "Hello, world!";
</code>
</pre>


<!-- Include Highlight.js JavaScript file -->
<script src="path/to/highlight.pack.js"></script>
<script>hljs.highlightAll();</script>
</body>
</html>

Markup for Code Blocks

Wrap the code blocks you want to highlight using Highlight.js with pre and code tags. For example, to highlight JavaScript code, use the following format.

<pre><code>
// Write JavaScript code here
console.log("Hello, world!");
</code></pre>

　
Highlight.js automatically detects many languages, but you can also explicitly specify a particular language (e.g., by adding class=”language-javascript” to the code tag).

Demo Page Showing Colorful Code Highlighting on a Web Page Using highlight.js

By opening the demo page below, you can confirm that syntax highlighting is applied to the specified code blocks.

Demo Page Showing Colorful Code Highlighting on a Web Page Using highlight.js

Important Notes

  • File Paths:
    Make sure to correctly specify the locations of the downloaded highlight.js and CSS files.
  • HTML Escaping:
    When writing code directly in HTML, you need to properly escape special characters.
  • License:
    Highlight.js is released under the BSD license. This license is very permissive and allows use without restrictions in both commercial and non-commercial projects.
    Because Highlight.js can be freely used in commercial and open-source projects, it is widely adopted. However, when using it, be sure to review the full license text and comply with its terms.

In Conclusion

You can now master the basic usage of Highlight.js. Use this tool to achieve beautiful code highlighting on your web pages.

　

※Please use this content at your own responsibility if you reuse it.
　Do not reuse the Google Analytics tag included in the demo page’s head tag.

Code Highlight Highlight.js syntaxhighlight