To add highlighted code in a blog post, you can use syntax highlighting tools such as Prism.js or highlight.js. Here are the steps to do so using Prism.js:
- First, you need to include the Prism.js library in your HTML code. You can either download the library and host
it on your server or include it using a Content Delivery Network (CDN). Here's an example of how to include
Prism.js using a CDN:
In this example, we are using the Prism.js library to highlight CSS code.<head><script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js'/><link href='https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-a11y-dark.min.css' rel='stylesheet'/></head> -
Next, you need to enclose your code block in a
<pre>tag and add a<code>tag inside it. You should also add a class attribute to the<code>tag to specify the language you want to highlight. For example:<pre><code class="language-css">// Your CSS code here</code></pre>