© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•6mo ago•
5 replies
Dorian

Highlight code block in Rich Editor

Hi,

I installed Filament 4, and I'm using the rich editor (I was using the awcodes package in v3).

However, it doesn't seem to be possible to use highlighting with code blocks. So I created a plugin.

1) I installed the lowlight, @tiptap/extension-code-block-lowlight, and highlight.js packages.

2) I created a js extension.

import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import { all, createLowlight } from 'lowlight'

const lowlight = createLowlight(all)

export default CodeBlockLowlight
    .configure({
        lowlight,
        defaultLanguage: 'php'
    })
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import { all, createLowlight } from 'lowlight'

const lowlight = createLowlight(all)

export default CodeBlockLowlight
    .configure({
        lowlight,
        defaultLanguage: 'php'
    })


3) I compiled the js with esbuild and saved it in my FIlament Provider.

4) I created a PHP plugin.

<?php

namespace App\Filament\Plugins\RichEditor;

use Filament\Actions\Action;
use Filament\Forms\Components\RichEditor\Plugins\Contracts\RichContentPlugin;
use Filament\Forms\Components\RichEditor\RichEditorTool;
use Filament\Support\Facades\FilamentAsset;
use Tiptap\Core\Extension;

class CodeBlockLowlight implements RichContentPlugin
{
    public static function make(): static
    {
        return app(static::class);
    }

    /**
     * @return array<Extension>
     */
    public function getTipTapPhpExtensions(): array
    {
        return [];
    }

    /**
     * @return array<string>
     */
    public function getTipTapJsExtensions(): array
    {
        return [
            FilamentAsset::getScriptSrc('rich-content-plugins/code-block-lowlight'),
        ];
    }

    /**
     * @return array<RichEditorTool>
     */
    public function getEditorTools(): array
    {
        return [];
    }

    /**
     * @return array<Action>
     */
    public function getEditorActions(): array
    {
        return [];
    }
}
<?php

namespace App\Filament\Plugins\RichEditor;

use Filament\Actions\Action;
use Filament\Forms\Components\RichEditor\Plugins\Contracts\RichContentPlugin;
use Filament\Forms\Components\RichEditor\RichEditorTool;
use Filament\Support\Facades\FilamentAsset;
use Tiptap\Core\Extension;

class CodeBlockLowlight implements RichContentPlugin
{
    public static function make(): static
    {
        return app(static::class);
    }

    /**
     * @return array<Extension>
     */
    public function getTipTapPhpExtensions(): array
    {
        return [];
    }

    /**
     * @return array<string>
     */
    public function getTipTapJsExtensions(): array
    {
        return [
            FilamentAsset::getScriptSrc('rich-content-plugins/code-block-lowlight'),
        ];
    }

    /**
     * @return array<RichEditorTool>
     */
    public function getEditorTools(): array
    {
        return [];
    }

    /**
     * @return array<Action>
     */
    public function getEditorActions(): array
    {
        return [];
    }
}


5) I am receiving the error (see screenshot):
Uncaught (in promise) RangeError: Adding different instances of a keyed plugin (codeBlockVSCodeHandler$)
Uncaught (in promise) RangeError: Adding different instances of a keyed plugin (codeBlockVSCodeHandler$)


Did anyone manage to get it working? I didn't see this topic in the issues or roadmap on GitHub.
image.png
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Rich Editor
FilamentFFilament / ❓┊help
2y ago
rich editor custom block rendering form elements
FilamentFFilament / ❓┊help
5mo ago
iframe in rich editor
FilamentFFilament / ❓┊help
5mo ago