Typix LogoTypix
Extensions

Code Highlight (Prism)

Syntax highlighting for code blocks using Prism.js

The Code Highlight Prism extension adds syntax highlighting to code blocks using Prism.js.

Demo

Loading preview...
import {  EditorContent,  EditorRoot,  createEditorConfig,  defaultExtensionNodes,} from "@typix-editor/react";import { CodeHighlightPrismExtension } from "@typix-editor/extension-code-highlight-prism";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({  extensionNodes: defaultExtensionNodes,  theme,});export default function CodeHighlightPrismExample() {  return (    <EditorRoot config={config}>      <EditorContent placeholder="Insert a code block..." />      <CodeHighlightPrismExtension />    </EditorRoot>  );}

Installation

pnpm add @typix-editor/extension-code-highlight-prism
npm install @typix-editor/extension-code-highlight-prism
yarn add @typix-editor/extension-code-highlight-prism

Setup

import { CodeHighlightPrismExtension } from '@typix-editor/extension-code-highlight-prism';

function MyEditor() {
  return (
    <EditorRoot>
      <EditorContent />
      <CodeHighlightPrismExtension />
    </EditorRoot>
  );
}

CodeNode and CodeHighlightNode are included in defaultExtensionNodes.

Exports

ExportTypeDescription
CodeHighlightPrismExtensionComponentPrism-based syntax highlighter

See also

Auto Link

Automatically detect and convert URLs into link nodes

Code Highlight (Shiki)

Syntax highlighting for code blocks using Shiki

On this page

DemoInstallationSetupExportsSee also