Prism.js is a lightweight and robust syntax highlighting library that can be used to display code on web pages.
It provides a set of pre-built CSS classes and JavaScript components that can be used to create syntax highlighting for various programming languages.
<section class="main-section" id="topic_4">
<header>Topic 4</header>
<p>Sample Text</p>
<p>Sample Text</p>
<code>sample code</code>
<div class="code-mock"></div>
<ul>
<li>Sample Text</li>
<li>Sample Text</li>
</ul>
</section>
- The above code is displayed with prism.js
- The library has several color themes to please the eye and design requirements. Current theme for this page is
Easy to read formatting helps users focus on the important thing, the code, rather than employ brain power attempting to guess the correct way of interpreting raw, unformatted text. Not to mention having trouble indentifying colors.
Its polished and elegant look enhances the experience of interacting with your website.
div {
background-color: black;
width: 400px;
border-radius: 10px;
}
- Out-of-the-box ready to be used: it is a huge time saver.
- Works for large selection of both popular and rather obscure languages.
Choose from the Website a look for your version.
Download and place both JavaScript and CSS files in your working directory. Don't forget to link them!
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
- This is all the file set up necesary to get going!
- It can also be done through CDN and used alongside Node, Webpack and other extensions and environments!
To watch the magic happen now you only have to add a class indicating the coding language to a code block and it's done!
The library will only work when the class is applied to a code HTML element. This is done due to semantical reasons, as more devs join the team around the world we all try to conform to the same rules. That way we understand each other easily.
<section class="main-section" id="topic_4">
<header>Flagging the correct place to be tweaked</header>
<p>To watch the magic happen now you only have to add a class indicating the coding language to a code block and it's done!</p>
<p>The library will only work when the class is applied to a <em>code</em> HTML element. This is done due to semantical reasons, as more devs join the team around the world we all try to conform to the same rules. That way we understand each other easily.</p>
<pre>
<code class="language-html">
<div class="sample">
Read Here! --> <p>This sample code that you are reading right now it's exactly the same code in which the section you are reading is built,
it's just formatted with Prism.js</p>
</div>
</code>
</pre>
<ul>
<li>Some languages such as HTML require to follow one additional rule, which is "Preformatting" the text, so writing an HTML tag doesn't make the browser <i>make</i> that tag!</li>
<li>Besides that it's all ready to go! You can further style the pre and code elements to resize your codeblocks into something that suits your current needs.</li>
</ul>
</section>
- Some languages such as HTML require to follow one additional rule, which is "Preformatting" the text, so writing an HTML tag doesn't make the browser make that tag!
- Besides that it's all ready to go! You can further style the pre and code elements to resize your codeblocks into something that suits your current needs.
Showing HTML Code inside an HTML file is funnily enough harder than showing any other piece of other coding language, as the browser finds the < and >, treats it as more html elements and renders them.
To circunvent this issue use the < and > to display < and > respectively.
<p>To circunvent this issue use the < and > to display < and > respectively.</p>
- Isn't it hilarious how this inception of rules is used just to show some HTML inside an HTML file? Code is beautiful.
- To do this you can recruit efficiently the help of a LLM (Large Language Model) like Bing to speed up your coding.