AI Assistant: Support Syntax Highlighting for Code

[elias-ba]

Very often, the AI assistant renders code snippets as examples to assist developers in building their workflows. Code without syntax highlighting is ugly, tiring to look at, and causes a lot of discomfort when working. Currently, the assistant uses a very basic code formatting with no highlighting, just to make the code distinguishable from normal text. See how it looks in the image below:

It follows the same styling we have in the Lightning docs panel (next to the job editor). In this issue, we want to do two things:

1. Decide (and agree) on the syntax highlighting theme we want to use to style how we render code in Lightning. If we could extend this decision to our documentation site, job editor, and all other places where we render code snippets, it would be awesome — we need harmonization for our visual identity. If not, at least applying it inside Lightning is already a good start. See @josephjclark's comment.

2. Implement the agreed syntax highlighting theme for the AI assistant's code snippets (and why not for all other places where we render code?).

Choosing a syntax highlighting theme is very difficult because it’s extremely subjective and personal. Maybe we should give users the ability to choose? I’m not sure about that. If I had to recommend one, it would be the GitHub Light/Dark theme (maybe we can make this system-dependent: if the user's system is in dark mode, we load the GitHub Dark theme; if it’s in light mode, we load the GitHub Light theme). But this is just my preference — who knows what @taylordowns2000 will like (I’ve seen him use a shade of purple theme in his VS Code 😆).

I initially drafted a Phoenix JS Hook that implemented syntax highlighting for the AI assistant’s generated code snippets. Here it is, in case it helps.

export const SyntaxHighlighter = {
  mounted() {
    this.highlight();
  },

  updated() {
    const hasCodeBlock = this.el.querySelector('pre code');
    if (hasCodeBlock) {
      this.highlight();
    }
  },

  highlight() {
    const codeBlocks = this.el.querySelectorAll('pre code:not(.hljs)');
    console.log('Found code blocks:', codeBlocks.length);

    codeBlocks.forEach((block) => {
      hljs.highlightElement(block);
    });
  }
};