Skip to content

add code highlight to RichTextEditor#663

Merged
AnnMarieW merged 4 commits intosnehilvj:masterfrom
AnnMarieW:add-codehighlight-to-rte
Nov 6, 2025
Merged

add code highlight to RichTextEditor#663
AnnMarieW merged 4 commits intosnehilvj:masterfrom
AnnMarieW:add-codehighlight-to-rte

Conversation

@AnnMarieW
Copy link
Copy Markdown
Collaborator

@AnnMarieW AnnMarieW commented Oct 24, 2025

This PR adds code highlighting support to RichTextEditor, consistent with the Mantine example

Notes

  • by default, the extension "CodeBlockLowlight" is enabled.

  • To keep the bundle size low only a few languages are included ( ts, js, python, css, text)

  • When users customize the extensions prop, they must explicitly include "CodeBlockLowlight" to keep code highlighting support.

examples:

     # by default all extensions are included
    dmc.RichTextEditor()

    # This has customized extensions and only StarterKit is enabled.  No code highlighting
   dmc.RichTextEditor(
       extensions=["StarterKit"]
    )

    #  This customized extension has code highlighting 
     dmc.RichTextEditor(
       extensions=["StarterKit", "CodeBlockLowlight"]
    )

Example App

from dash import Dash
import dash_mantine_components as dmc
app = Dash()

component= dmc.RichTextEditor(
    html="",
    extensions=["StarterKit", "CodeBlockLowlight"],
    toolbar={
        "controlsGroups": [
            [
                "Bold",
                "Italic",
                "Underline",
                "Strikethrough",
                "CodeBlock"
            ],
        ],
    },   
)

app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)
image

Comment thread src/ts/components/extensions/richtexteditor/fragments/RichTextEditor.tsx Outdated
Comment thread src/ts/components/extensions/richtexteditor/fragments/RichTextEditor.tsx Outdated
Comment thread src/ts/components/extensions/richtexteditor/fragments/RichTextEditor.tsx Outdated
@AnnMarieW AnnMarieW merged commit efb2f49 into snehilvj:master Nov 6, 2025
1 check passed
@AnnMarieW AnnMarieW deleted the add-codehighlight-to-rte branch November 6, 2025 14:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants