How to add syntax highlighting to your Roq site

Adding syntax highlighting to your Roq project has never been easier. Here’s a quick guide to help you integrate Highlight.js in your project with the help of the Quarkus web-bundler extension.

Step 1: Add Highlight.js Dependency

Next, add Highlight.js to your pom.xml like this:

<dependency>
    <groupId>org.mvnpm</groupId>
    <artifactId>highlight.js</artifactId>
    <version>11.10.0</version>
    <scope>provided</scope>
</dependency>

This will make the Highlight.js library available to your project.

Step 2: Initialize Highlight.js

Roq is pre-configured with the Quarkus Web-Bundler to automatically bundle you Javascripts and Styles located in src/main/resource/web/app.

The Roq default theme includes the {#bundle /} tag, if you are using your own templates, make sure it is present.

Now, let’s configure Highlight.js. In your src/main/resources/web/app/main.js, import the library and activate it:

import hljs from 'highlight.js';
import 'highlight.js/scss/default.scss';

hljs.highlightAll();

And that's it! Now your code blocks will be beautifully highlighted, adding a more polished and professional look to your content.

This process is quick and effective, making it easy to provide clear, readable syntax highlighting for your users. Happy coding!