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 {useMemo} from 'react';
import {AiChat} from '@nlux/react';
import {highlighter} from '@nlux/highlighter';
import '@nlux/themes/nova.css';
import '@nlux/highlighter/dark-theme.css';
import {streamAdapter} from './adapter';

export default () => {
  const adapter = useMemo(() => streamAdapter, []);
  return (
    <AiChat
      adapter={adapter}
      syntaxHighlighter={highlighter}
      layoutOptions={{
        height: 490,
        maxWidth: 600
      }}
    />
  );
};