How to use prism syntax highlighter?
Prism Javascript Syntax Highlighter
To render custom code snippets with syntax highlighting using prism.js, you need to include the Prism library via a CDN and configure it properly through autoloading specific plugins (like for JavaScript)
how can we use prism javascript to render the code on an html page?
Prism.js is a lightweight (8KB compressed), extensible syntax highlighter that helps make your code readable and appealing to your visitors. It can be used with HTML documents through JavaScript, but it's not embedded as part of HTML like CSS or JavaScript; instead, you need to include the Prism library in your project.
Here’s how you can use Prism.js to render custom snippets on an HTML page:
Step 1: Include Prism.js
You need to add Prism.js and its syntax highlighting stylesheets to your HTML file. You can do this by either including a CDN or downloading the files yourself.
Via CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prism Example</title>
<!-- Include Prism CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css"
rel="stylesheet" />
</head>
<body>
<!-- Your HTML content goes here -->
<!-- Include Prism JS (without highlighting) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>
<!-- Include specific syntax highlighting plugins you need, e.g., for JavaScript -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/plugins/autoloader/prism-autoloader.min.js"></scrsrc="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/plugins/autoloader/prism-autoloader.mn.js"></script>
<!-- Add custom code with Prism -->
<div class="highlight">
<pre><code class="language-javascript">
function exampleFunction() {
console.log("Hello, World!");
}
exampleFunction();
</code></pre>
</div>
<!-- Autoloading and initializing the prism for JavaScript syntax -->
<script>
Prism.plugins.autoloader.add('javascript',
'https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js');
Prism.highlightAll();
</script>
</body>
</html>
Step 2: Highlight Your Custom Code
Prism requires you to wrap your custom code snippets in a highlight element. This allows the library to
automatically highlight the code with appropriate syntax.
The above example uses a <pre><code> block within a .highlight div for each snippet of JavaScript
code, but it does not automatically highlight those snippets by default because Prism.js needs some
configuration and autoloading.
Step 3: Autoloading Specific Syntax Highlighting Plugins
Prism has plugins that can be used to handle specific syntax highlighting requirements. In the example above, we've added a line for JavaScript-specific highlighting:
Prism.plugins.autoloader.add('javascript',
'https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js');
This tells Prism to look for and load prism-javascript.min.js when it encounters a <code> tag with
the language-javascript class.
Step 4: Highlight All Elements Automatically
Finally, you need to call Prism.highlightAll() to apply syntax highlighting automatically to all code
blocks on your page:
<script>
Prism.plugins.autoloader.add('javascript',
'https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js');
Prism.highlightAll();
</script>
Summary
To render custom code snippets with syntax highlighting using Prism.js, you need to include the Prism
library via a CDN and configure it properly through autoloading specific plugins (like for JavaScript)
and calling Prism.highlightAll().
By following these steps, you can ensure that your HTML page renders code snippets beautifully with appropriate syntax highlighting.