As developers and technical content creators, we know that clear and readable code is essential to making our blog posts engaging and easy to follow. In Odoo, we can achieve beautiful syntax highlighting in our blog posts using the highlight.js library. This guide will walk you through integrating highlight.js with Odoo to bring color-coded clarity to your code snippets.
Why Use Highlight.js for Syntax Highlighting?
Syntax highlighting makes code easier to read by coloring keywords, functions, strings, and other elements. Highlight.js is a lightweight JavaScript library with support for many languages and styles, making it ideal for technical content. Using this library will enhance readability for your audience, whether they’re reading your blog to learn about code, debugging tips, or industry best practices.
Step 1: Install Highlight.js in Your Odoo Website Theme
First, we need to make the highlight.js library available in our Odoo theme. This can be done by linking the highlight.js files directly into the theme’s HTML or JavaScript files.
You have two options for installation:
- Use a CDN
Adding highlight.js via a CDN is quick and efficient. Add the following lines to your blog post template in Odoo, ideally within the <head> section for the CSS and just before the closing </body> tag for the JavaScript.<!-- Highlight.js CSS and JavaScript from CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
You can find other theme options on the highlight.js demo page, which lets you select the look that best suits your site’s design. - Download and Host Locally
If you prefer to host the files locally, download the highlight.js files and place them in your Odoo theme’s static assets folder. Then, include links to these local files in your theme’s HTML.
Step 2: Initialize Highlight.js in the Blog Template
After including highlight.js, we need to initialize it so it will detect and highlight code blocks in your blog content. To do this, add the following JavaScript snippet to your blog template:
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
});
});
</script>
This script will automatically apply syntax highlighting to any code blocks wrapped in <pre><code> tags once the page has loaded. It finds all code blocks and applies highlight.js styling to each.
Step 3: Format Code Blocks in Your Blog Editor
To ensure that highlight.js applies the correct styling, you need to structure your code snippets properly in the blog editor. Wrap each snippet in <pre><code> tags, and specify the language class when possible. Here’s an example for a Python code snippet:
<pre><code class="language-python">
def greet(name):
print(f"Hello, {name}")
</code></pre>
Adding the class="language-..." attribute allows highlight.js to detect the programming language, which enhances accuracy in syntax coloring.
Optional: Add Highlight.js to All Blog Posts Automatically
To avoid needing to manually add the script to each blog post, consider adding it directly to the main blog template file for Odoo. Here’s a quick way to set this up in Odoo’s QWeb templating:
- Open Your Blog Template File
Find the main template file for your blog layout. This is usually located in addons/website_blog/static/src/xml/ if you’re working in a custom theme. - Add the Highlight.js Code
Place the <link>, <script>, and initialization code in this template file, so it will be automatically applied to all blog posts.<template id="highlight_js_integration" inherit_id="website_blog.post_content"> <xpath expr="//head" position="inside"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> </xpath> <xpath expr="//body" position="inside"> <script> document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('pre code').forEach((block) => { hljs.highlightElement(block); }); }); </script> </xpath> </template>
Choosing a Highlight.js Theme
With highlight.js, you have a variety of themes to match your website’s style. You can experiment with themes by trying different CDN links from the highlight.js styles and finding one that enhances your site’s visual appeal.
Wrapping Up
By following these steps, you’ve now integrated highlight.js into your Odoo blog! This addition improves the readability of code snippets, making your blog a better resource for developers and technical readers. Enjoy sharing beautifully styled code that’s easy to read and learn from!
Happy coding and blogging!