@tiptap/extension-code-block-lowlight

Basic Code Block with Syntax Highlighting

This code sample demonstrates how to set up a Tiptap editor with the CodeBlockLowlight extension to enable syntax highlighting for JavaScript code blocks.

const { Editor } = require('@tiptap/core');
const CodeBlockLowlight = require('@tiptap/extension-code-block-lowlight');
const lowlight = require('lowlight');

const editor = new Editor({
  extensions: [
    CodeBlockLowlight.configure({ lowlight })
  ],
  content: '<pre><code class="language-js">console.log("Hello, world!")</code></pre>'
});

Custom Language Support

This code sample shows how to register a custom language (XML in this case) with Lowlight and use it in the Tiptap editor for syntax highlighting.

const { Editor } = require('@tiptap/core');
const CodeBlockLowlight = require('@tiptap/extension-code-block-lowlight');
const lowlight = require('lowlight');
const xml = require('highlight.js/lib/languages/xml');

lowlight.registerLanguage('xml', xml);

const editor = new Editor({
  extensions: [
    CodeBlockLowlight.configure({ lowlight })
  ],
  content: '<pre><code class="language-xml"><note><to>Tove</to></note></code></pre>'
});

Dynamic Language Switching

This code sample demonstrates how to dynamically change the language of a code block in the Tiptap editor using the CodeBlockLowlight extension.

const { Editor } = require('@tiptap/core');
const CodeBlockLowlight = require('@tiptap/extension-code-block-lowlight');
const lowlight = require('lowlight');

const editor = new Editor({
  extensions: [
    CodeBlockLowlight.configure({ lowlight })
  ],
  content: '<pre><code class="language-js">console.log("Hello, world!")</code></pre>'
});

// Dynamically change the language of a code block
editor.commands.setCodeBlockLanguage('language-python');