Codehighlighting to the ai responses e.g. by using shiki? (Vaadin 25.1)

General
1

How is it possible to add code highlighting to the ai responses in the message list e.g. by using shiki? (Vaadin 25.1)

2

The MessageList supports mark down formatted text. So that is one approach.

3

Yes, I am aware of MD. I already activated it.
But I cannot manage to let shiki do the formating of code blocks to get an enhanced rendering.

4

Vaadin Markdown (also used internally by MessageList) does not (yet at least) provide an API for defining plugins for the renderer. However, the component internally uses the “marked” library, which means you can register “marked” plugins globally. The following worked for me:

  1. Add “shiki” as a dependency to “package.json”.

  2. Add <script src="./marked-plugins.js" type="module"></script> to “index.html”.

  3. Create a “marked-plugins.js” file in the “frontend” directory, with the following content:

import { marked } from "marked";
import { createHighlighter } from "shiki";

const highlighter = await createHighlighter({
  langs: ["js", "ts", "java", "html", "css", "json", "xml", "bash", "sql", "md"],
  themes: ["min-light"],
});

marked.use({
  renderer: {
    code({ text, lang }) {
      return highlighter.codeToHtml(text, {
        lang: lang || "text",
        theme: "min-light",
      });
    },
  },
});

Screenshot 2026-03-31 at 9.48.00
Screenshot 2026-03-31 at 9.48.00944Ă—404 34.2 KB

1 Like
5

Thank you very much! That works fine!
I had to add marked to “package.json, too”
I believe “marked”: “16.4.2” i the correct version to use with Vaadin 25.1.0?

6

Glad to hear it works. I wonder why “marked” isn’t added automatically by Vaadin… anyway version “16.4.2” is fine since the dependency is “^16.0.0”

1 Like