Highlighting Adapters

/**
 * Provider component for configuring highlighting adapters
 * @param props - Provider configuration
 * @returns Provider component wrapping children
 */
function CodeHighlightAdapterProvider(props: CodeHighlightAdapterProviderProps): JSX.Element;

interface CodeHighlightAdapterProviderProps {
  /** Highlighting adapter to use */
  adapter: CodeHighlightAdapter;
  /** Child components that will use the adapter */
  children: React.ReactNode;
}

interface CodeHighlightAdapter {
  /** Optional function to load highlighting context (e.g., async library loading) */
  loadContext?: () => Promise<any>;
  /** Function that returns a highlighter function given the loaded context */
  getHighlighter: (ctx: any) => Highlighter;
}

type Highlighter = (input: HighlighterInput) => HighlighterOutput;

interface HighlighterInput {
  /** Current color scheme */
  colorScheme: 'light' | 'dark';
  /** Code to highlight */
  code: string;
  /** Programming language for syntax highlighting */
  language?: string;
}

interface HighlighterOutput {
  /** Highlighted code (html markup) */
  highlightedCode: string;
  /** true if the code is represented with html string, false for plain text string */
  isHighlighted: boolean;
  /** Props to pass down to <code> tag */
  codeElementProps?: Record<string, any>;
}

import { 
  CodeHighlightAdapterProvider, 
  createHighlightJsAdapter,
  CodeHighlight 
} from "@mantine/code-highlight";
import hljs from 'highlight.js';

function App() {
  const adapter = createHighlightJsAdapter(hljs);
  
  return (
    <CodeHighlightAdapterProvider adapter={adapter}>
      <CodeHighlight code="console.log('hello');" language="javascript" />
    </CodeHighlightAdapterProvider>
  );
}

/**
 * Hook to access the current highlighting function from context
 * @returns Current highlighter function or plain text fallback
 */
function useHighlight(): Highlighter;

import { useHighlight } from "@mantine/code-highlight";

function CustomHighlightComponent({ code, language }: { code: string; language?: string }) {
  const highlight = useHighlight();
  
  const result = highlight({
    code,
    language,
    colorScheme: 'light'
  });
  
  if (result.isHighlighted) {
    return <pre dangerouslySetInnerHTML={{ __html: result.highlightedCode }} />;
  }
  
  return <pre>{result.highlightedCode}</pre>;
}

/**
 * Creates an adapter for the highlight.js syntax highlighting library
 * @param hljs - Configured highlight.js instance
 * @returns CodeHighlightAdapter for highlight.js
 */
function createHighlightJsAdapter(hljs: any): CodeHighlightAdapter;

import { CodeHighlightAdapterProvider, createHighlightJsAdapter } from "@mantine/code-highlight";
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // Import a theme

// Configure highlight.js
hljs.configure({
  languages: ['javascript', 'typescript', 'python', 'css', 'html']
});

function App() {
  const hljsAdapter = createHighlightJsAdapter(hljs);
  
  return (
    <CodeHighlightAdapterProvider adapter={hljsAdapter}>
      {/* All CodeHighlight components will use highlight.js */}
      <YourAppComponents />
    </CodeHighlightAdapterProvider>
  );
}

/**
 * Creates an adapter for the Shiki syntax highlighting library
 * @param loadShiki - Function that loads and returns configured Shiki instance
 * @param options - Configuration options for the adapter
 * @returns CodeHighlightAdapter for Shiki
 */
function createShikiAdapter(
  loadShiki: () => Promise<any>,
  options?: CreateShikiAdapterOptions
): CodeHighlightAdapter;

interface CreateShikiAdapterOptions {
  /** Force a specific color scheme instead of following the theme */
  forceColorScheme?: 'dark' | 'light';
}

/**
 * Utility function to strip pre/code wrapper elements from Shiki output
 * @param data - HTML string from Shiki
 * @returns Cleaned HTML string without wrapper elements
 */
function stripShikiCodeBlocks(data: string): string;

import { CodeHighlightAdapterProvider, createShikiAdapter } from "@mantine/code-highlight";
import { createHighlighter } from 'shiki';

async function loadShiki() {
  const highlighter = await createHighlighter({
    themes: ['github-light', 'github-dark'],
    langs: ['javascript', 'typescript', 'python', 'css']
  });
  return highlighter;
}

function App() {
  const shikiAdapter = createShikiAdapter(loadShiki, {
    // Optional: force dark theme regardless of system preference
    forceColorScheme: 'dark'
  });
  
  return (
    <CodeHighlightAdapterProvider adapter={shikiAdapter}>
      <YourAppComponents />
    </CodeHighlightAdapterProvider>
  );
}

// Using stripShikiCodeBlocks utility
import { stripShikiCodeBlocks } from "@mantine/code-highlight";

const rawShikiOutput = '<pre class="shiki"><code>console.log("hello");</code></pre>';
const cleanedOutput = stripShikiCodeBlocks(rawShikiOutput);
// Result: 'console.log("hello");'

/**
 * Default plain text adapter that provides no highlighting
 * Used as fallback when no other adapter is configured
 */
const plainTextAdapter: CodeHighlightAdapter;

import { CodeHighlightAdapterProvider, plainTextAdapter } from "@mantine/code-highlight";

// Explicitly use plain text (no highlighting)
function PlainTextApp() {
  return (
    <CodeHighlightAdapterProvider adapter={plainTextAdapter}>
      <CodeHighlight code="const x = 1;" language="javascript" />
      {/* Code will be displayed without syntax highlighting */}
    </CodeHighlightAdapterProvider>
  );
}

import type { CodeHighlightAdapter } from "@mantine/code-highlight";

// Example: Custom adapter with basic keyword highlighting
const customAdapter: CodeHighlightAdapter = {
  // Optional: Load external dependencies
  loadContext: async () => {
    // Load highlighting libraries, themes, etc.
    return await import('my-highlighter');
  },
  
  // Required: Return highlighter function
  getHighlighter: (ctx) => {
    return ({ code, language, colorScheme }) => {
      if (!ctx || !language) {
        return { highlightedCode: code, isHighlighted: false };
      }
      
      const highlighted = ctx.highlight(code, language, colorScheme);
      return {
        highlightedCode: highlighted,
        isHighlighted: true,
        codeElementProps: { className: `hljs ${language}` }
      };
    };
  }
};