Syntax Highlighter

In this example, we will use the @nlux/highlighter package to add syntax highlighting to code generated by OpenAI and rendered in the conversational UI.

Open Sandbox

import { AiChat, useAsStreamAdapter } from '@nlux/react';
import '@nlux/themes/nova.css';
import { send } from './send';

// Importing the syntax highlighter and its dark theme
import {highlighter} from '@nlux/highlighter';
import '@nlux/highlighter/dark-theme.css';

export default () => {
  const adapter = useAsStreamAdapter(send, []);
  return (
    <AiChat
      messageOptions={{ syntaxHighlighter: highlighter }}
      adapter={ adapter }
      displayOptions={{ colorScheme: 'dark' }}
    />
  );
};