or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

adapters.mdcode-highlighting.mdcode-tabs.mdcustom-controls.mdindex.mdinline-highlighting.md
tile.json

tessl/npm-mantine--code-highlight

React component library for syntax highlighting code blocks and inline code with Mantine theme integration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mantine/code-highlight@8.2.x

To install, run

npx @tessl/cli install tessl/npm-mantine--code-highlight@8.2.0

index.mddocs/

Mantine Code Highlight

Mantine Code Highlight is a React component library for syntax highlighting that provides both block and inline code highlighting with full theme integration. Built for the Mantine ecosystem, it offers flexible highlighting adapters including highlight.js and Shiki, expandable code blocks, copy-to-clipboard functionality, and tabbed interfaces for multiple code files.

Package Information

  • Package Name: @mantine/code-highlight
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @mantine/core @mantine/hooks @mantine/code-highlight

Core Imports

import { 
  CodeHighlight,
  InlineCodeHighlight,
  CodeHighlightTabs,
  CodeHighlightControl,
  CodeHighlightAdapterProvider,
  createHighlightJsAdapter,
  createShikiAdapter,
  stripShikiCodeBlocks,
  plainTextAdapter,
  useHighlight
} from "@mantine/code-highlight";

// Type imports
import type {
  CodeHighlightFactory,
  CodeHighlightProps,
  CodeHighlightStylesNames,
  CodeHighlightCssVariables,
  InlineCodeHighlightFactory,
  InlineCodeHighlightProps,
  InlineCodeHighlightStylesNames,
  InlineCodeHighlightCssVariables,
  CodeHighlightTabsFactory,
  CodeHighlightTabsProps,
  CodeHighlightTabsStylesNames,
  CodeHighlightTabsCode,
  CodeHighlightDefaultLanguage,
  CodeHighlightControlProps
} from "@mantine/code-highlight";

For CommonJS:

const { 
  CodeHighlight,
  InlineCodeHighlight, 
  CodeHighlightTabs
} = require("@mantine/code-highlight");

CSS Imports

// Required CSS imports for styling
import "@mantine/code-highlight/styles.css";

// Alternative layer-based CSS import
import "@mantine/code-highlight/styles.layer.css";

Basic Usage

import { CodeHighlight, InlineCodeHighlight } from "@mantine/code-highlight";

// Block code highlighting
function App() {
  return (
    <CodeHighlight
      code={`function hello() {
  console.log("Hello, world!");
}`}
      language="javascript"
      withCopyButton
    />
  );
}

// Inline code highlighting
function InlineExample() {
  return (
    <p>
      Use <InlineCodeHighlight code="console.log()" language="js" /> to print.
    </p>
  );
}

Architecture

Mantine Code Highlight is built around several key components:

  • Core Components: CodeHighlight, InlineCodeHighlight, and CodeHighlightTabs for different display modes
  • Provider System: CodeHighlightAdapterProvider and useHighlight hook for configuring highlighting engines
  • Adapter System: Pluggable highlighting engines (highlight.js, Shiki, plain text) via adapter pattern
  • Theme Integration: Full integration with Mantine's styling system including CSS variables and theme colors
  • Control System: Extensible control components for copy, expand/collapse, and custom actions

Capabilities

Code Block Highlighting

Primary component for displaying syntax-highlighted code blocks with extensive customization options.

interface CodeHighlightProps extends 
  CodeHighlightSettings,
  BoxProps,
  StylesApiProps<CodeHighlightFactory>,
  ElementProps<'div'> {
  /** Code to highlight */
  code: string;
  /** Language of the code, used for syntax highlighting */
  language?: string;
  
  // Internal props (generally not used directly)
  __withOffset?: boolean;
  __staticSelector?: string;
  __inline?: boolean;
}

function CodeHighlight(props: CodeHighlightProps): JSX.Element;

Code Block Highlighting

Inline Code Highlighting

Component for highlighting short code snippets within text content.

interface InlineCodeHighlightProps {
  code: string;
  language?: string;
  background?: MantineColor;
  radius?: MantineRadius;
  withBorder?: boolean;
}

function InlineCodeHighlight(props: InlineCodeHighlightProps): JSX.Element;

Inline Code Highlighting

Tabbed Code Interface

Component for displaying multiple code files in a tabbed interface.

interface CodeHighlightTabsCode {
  language?: string;
  code: string;
  fileName?: string;
  icon?: React.ReactNode;
}

interface CodeHighlightTabsProps {
  code: CodeHighlightTabsCode[];
  getFileIcon?: (fileName: string) => React.ReactNode;
  defaultActiveTab?: number;
  activeTab?: number;
  onTabChange?: (tab: number) => void;
  // Inherits all CodeHighlightSettings properties
}

function CodeHighlightTabs(props: CodeHighlightTabsProps): JSX.Element;

Tabbed Code Interface

Highlighting Adapters

System for configuring and switching between different syntax highlighting engines.

interface CodeHighlightAdapter {
  loadContext?: () => Promise<any>;
  getHighlighter: (ctx: any) => Highlighter;
}

function CodeHighlightAdapterProvider(props: {
  adapter: CodeHighlightAdapter;
  children: React.ReactNode;
}): JSX.Element;

function useHighlight(): Highlighter;

function createHighlightJsAdapter(hljs: any): CodeHighlightAdapter;

function createShikiAdapter(
  loadShiki: () => Promise<any>,
  options?: { forceColorScheme?: 'dark' | 'light' }
): CodeHighlightAdapter;

Highlighting Adapters

Custom Controls

System for adding custom controls to code highlight components.

interface CodeHighlightControlProps {
  children?: React.ReactNode;
  tooltipLabel?: string;
}

function CodeHighlightControl(props: CodeHighlightControlProps): JSX.Element;

Custom Controls

Common Types

type MantineColor = string;
type MantineRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string;

interface CodeHighlightSettings {
  copyLabel?: string;
  copiedLabel?: string;
  defaultExpanded?: boolean;
  expanded?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
  maxCollapsedHeight?: number | string;
  withCopyButton?: boolean;
  withExpandButton?: boolean;
  expandCodeLabel?: string;
  collapseCodeLabel?: string;
  background?: MantineColor;
  radius?: MantineRadius;
  withBorder?: boolean;
  controls?: React.ReactNode[];
  codeColorScheme?: 'dark' | 'light';
}

type Highlighter = (input: {
  colorScheme: 'light' | 'dark';
  code: string;
  language?: string;
}) => {
  highlightedCode: string;
  isHighlighted: boolean;
  codeElementProps?: Record<string, any>;
};

// Factory Types
type CodeHighlightFactory = Factory<{
  props: CodeHighlightProps;
  ref: HTMLDivElement;
  stylesNames: CodeHighlightStylesNames;
  vars: CodeHighlightCssVariables;
  staticComponents: {
    Control: typeof CodeHighlightControl;
  };
}>;

type InlineCodeHighlightFactory = Factory<{
  props: InlineCodeHighlightProps;
  ref: HTMLElement;
  stylesNames: InlineCodeHighlightStylesNames;
  vars: InlineCodeHighlightCssVariables;
}>;

type CodeHighlightTabsFactory = Factory<{
  props: CodeHighlightTabsProps;
  ref: HTMLDivElement;
  stylesNames: CodeHighlightTabsStylesNames;
}>;

// Styles Names Types
type CodeHighlightStylesNames =
  | 'codeHighlight'
  | 'pre'
  | 'code'
  | 'control'
  | 'controlTooltip'
  | 'controls'
  | 'scrollarea'
  | 'showCodeButton';

type InlineCodeHighlightStylesNames = 'inlineCodeHighlight';

type CodeHighlightTabsStylesNames =
  | 'root'
  | 'files'
  | 'file'
  | 'fileIcon'
  | 'filesScrollarea'
  | CodeHighlightStylesNames;

// CSS Variables Types
type CodeHighlightCssVariables = {
  codeHighlight: '--ch-max-height' | '--ch-background' | '--ch-radius';
};

type InlineCodeHighlightCssVariables = {
  inlineCodeHighlight: '--ch-background' | '--ch-radius';
};

// Default Language Type
type CodeHighlightDefaultLanguage = 'tsx' | 'scss' | 'html' | 'bash' | 'json';