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 <script type="module" src="/quarkus-roq/static/bundle/main-WNANSZE4.js"></script> <link rel="stylesheet" href="/quarkus-roq/static/bundle/main-5ULVHYIU.css" /> 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';

hljs.highlightAll();

Step 3: Style Your Syntax Highlighting

To style the code blocks, import the Highlight.js default theme into your SCSS file. Add this to your src/main/resources/web/app/main.scss:

@import 'highlight.js/scss/default.scss';

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!