Syntax Highlighting in Qwik City Blog

Technical Questions
,
1

Hello, I have a basic Qwik City app setup with the visual editor using the CLI. I’m trying to get syntax highlighting on my blog pages for code examples. Does anyone have any solutions for syntax highlighting in a Qwik app? The docs mention rehypeSyntaxHighlight: Lightweight, robust, elegant virtual syntax highlighting using Prism.

2

Here my solution that works using a custom builder component.

This approach uses rehype to parse the content, sanitize it, apply syntax highlighting, and then stringify it back to HTML. The useSignal and useTask$ functions from Qwik ensure that the asynchronous highlighting task is executed and the result is rendered correctly.

I hope this helps anyone looking to add syntax highlighting to their Qwik apps!

import { component$, useSignal, useTask$ } from "@builder.io/qwik";
import rehypeHighlight from "rehype-highlight";
import { unified } from "unified";
import rehypeParse from "rehype-parse";
import rehypeSanitize from "rehype-sanitize";
import rehypeStringify from "rehype-stringify";
type MyProps = { content: string; language: string };

async function highlight(content: string, language: string) {
  const file = await unified()
    .use(rehypeParse, { fragment: true })
    .use(rehypeSanitize)
    .use(rehypeHighlight)
    .use(rehypeStringify)
    .process(`<pre><code class="language-${language}">${content}</code></pre>`);

  return String(file);
}

export default component$((props: MyProps) => {
  const highlightedContent = useSignal("");

  useTask$(async () => {
    const content = await highlight(props.content, props.language);
    highlightedContent.value = content;

    console.log(highlightedContent.value);
  });
  return (
    <div>
      <pre dangerouslySetInnerHTML={highlightedContent.value} />
    </div>
  );
});
3

Hello @iberryboi,

At present, it appears that achieving syntax highlighting directly through the Qwik SDK may not be possible. We appreciate your creative suggestion involving a custom component as a potential solution.

Your input is valuable to us, and if you have any further ideas or questions, please don’t hesitate to share them.

Best regards,