CodeBlock

• Based on TipTap's CodeBlock extension. @tiptap/extension-code-block

• The CodeBlock extension allows you to add code blocks to your editor. It uses Shiki for syntax highlighting.

Usage

import { CodeBlock } from 'reactjs-tiptap-editor'; 

const extensions = [
  ...,
  // Import Extensions Here
  CodeBlock.configure({ defaultTheme: 'dracula' }), 
];

• You can write ```ts, press Enter, and write some code! It loads the language on the fly.

Source

Source • Docs

Contributors

Hung Hoang

Condor Hero

Changelog

v0.0.10 on 8/19/2024

1cde8 - feat: codeblock highlight use shiki