|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Code Block in Blazor RichTextEditor Component | Syncfusion |
| 4 | +description: Checkout and learn here all about Code Block in Syncfusion Blazor RichTextEditor component and much more. |
| 5 | +platform: Blazor |
| 6 | +control: RichTextEditor |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Code Block in Blazor Rich Text Editor Component |
| 11 | + |
| 12 | +The Code Block feature in the Rich Text Editor, enabling users to insert and format code snippets effectively. It covers configuring supported languages, integrating syntax highlighters, editing tips, and enabling tab-based indentation, making it ideal for technical documentation, tutorials, and code-heavy content. While live code block highlighting is not supported during editing, syntax highlighting can be applied when content is displayed on the frontend. |
| 13 | + |
| 14 | +## Inserting a code block |
| 15 | + |
| 16 | +The Code Block feature allows users to embed formatted code snippets within the Rich Text Editor. To insert a code block: |
| 17 | + |
| 18 | +- **Using the Toolbar**: Click the **CodeBlock** button in the editor’s toolbar, typically represented by a code icon. |
| 19 | +- **Using the Shortcut**: Press `Ctrl+Shift+B` (or `Cmd+Shift+B` on macOS) to insert a code block at the cursor’s position. |
| 20 | +- A dropdown menu appears, allowing selection of the programming language for the code block, such as **JavaScript**, **Python**, **HTML**, or others configured in the system. |
| 21 | + |
| 22 | +The code block is rendered with a monospaced font and preserved indentation for readability. Language selection applies syntax-specific formatting and prepares the block for syntax highlighting when displayed on the frontend. |
| 23 | + |
| 24 | +## Configuring code block languages |
| 25 | + |
| 26 | +The Code Block feature supports customizable programming languages via the `RichTextEditorCodeBlockSettings` property, specifically the `Languages` and `DefaultLanguage` options. The `Languages` property accepts an array of objects defining available languages, while `DefaultLanguage` sets the default language for new code blocks. This allows developers to customize the editor for project-specific languages. |
| 27 | + |
| 28 | +Below is an example of how to configure the `RichTextEditorCodeBlockSettings` using the Rich Text Editor: |
| 29 | + |
| 30 | +```cshtml |
| 31 | +
|
| 32 | +@using Syncfusion.Blazor.RichTextEditor |
| 33 | +<SfRichTextEditor ID="code-block"> |
| 34 | + <RichTextEditorCodeBlockSettings Languages="languages" DefaultLanguage="plaintext"></RichTextEditorCodeBlockSettings> |
| 35 | + <RichTextEditorToolbarSettings Items="Tools"></RichTextEditorToolbarSettings> |
| 36 | +</SfRichTextEditor> |
| 37 | +@code { |
| 38 | + private List<CodeBlockLanguageModel> languages = new List<CodeBlockLanguageModel> |
| 39 | + { |
| 40 | + new CodeBlockLanguageModel { Label = "HTML", Language = "html" }, |
| 41 | + new CodeBlockLanguageModel { Label = "JavaScript", Language = "javascript" }, |
| 42 | + new CodeBlockLanguageModel { Label = "CSS", Language = "css" }, |
| 43 | + new CodeBlockLanguageModel { Label = "Plain Text", Language = "plaintext" } |
| 44 | + }; |
| 45 | + private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() |
| 46 | + { |
| 47 | + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, |
| 48 | + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, |
| 49 | + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, |
| 50 | + new ToolbarItemModel() { Command = ToolbarCommand.CodeBlock }, |
| 51 | + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, |
| 52 | + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, |
| 53 | + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, |
| 54 | + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, |
| 55 | + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, |
| 56 | + new ToolbarItemModel() { Command = ToolbarCommand.InlineCode }, |
| 57 | + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, |
| 58 | + new ToolbarItemModel() { Command = ToolbarCommand.Image }, |
| 59 | + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, |
| 60 | + new ToolbarItemModel() { Command = ToolbarCommand.Blockquote }, |
| 61 | + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, |
| 62 | + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, |
| 63 | + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, |
| 64 | + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, |
| 65 | + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, |
| 66 | + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, |
| 67 | + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, |
| 68 | + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, |
| 69 | + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, |
| 70 | + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, |
| 71 | + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, |
| 72 | + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, |
| 73 | + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, |
| 74 | + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, |
| 75 | + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, |
| 76 | + new ToolbarItemModel() { Command = ToolbarCommand.LowerCase }, |
| 77 | + new ToolbarItemModel() { Command = ToolbarCommand.UpperCase }, |
| 78 | + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, |
| 79 | + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, |
| 80 | + }; |
| 81 | +} |
| 82 | +
|
| 83 | +``` |
| 84 | + |
| 85 | +In this example: |
| 86 | + |
| 87 | +* The **Languages** array defines four supported languages: JavaScript, Python, HTML, and CSS. |
| 88 | +* The **DefaultLanguage** is set to **javascript**, so new code blocks default to JavaScript. |
| 89 | +* Each language object specifies a **Language** (for internal use, e.g., syntax highlighting) and a **Label** (displayed in the dropdown). |
| 90 | + |
| 91 | +## Integrating syntax highlighters |
| 92 | + |
| 93 | +To enhance code block readability, integrate a third-party syntax highlighter like [Prism.js](https://prismjs.com/) or [Highlight.js](https://highlightjs.org/), which supports numerous languages and customizable themes. Although live code block highlighting (real-time syntax highlighting during editing) is not possible in the Rich Text Editor, The highlighter can apply color-coded formatting to code blocks when the content is displayed on the frontend, such as in blog posts, website content, or preview mode. This ensures a polished presentation for end users. |
| 94 | + |
| 95 | +## Tips for editing around code blocks |
| 96 | + |
| 97 | +Editing content around code blocks requires care to preserve code integrity and maintain clean formatting. Follow these tips for a smooth editing experience: |
| 98 | +* **Inserting Text Before a Code Block**: Place the cursor at the start of the code block’s first line and press `Enter` to create an empty line above. Press Enter again to start a new paragraph for text. |
| 99 | +* **Inserting Text After a Code Block**: Place the cursor at the end of the code block’s last line and press `Enter` three times to exit the code block and create a new paragraph below. |
| 100 | +* **Preserving Formatting When Pasting**: Paste code into a code block using `Ctrl+Shift+V` (or `Cmd+Shift+V` on macOS) to avoid external formatting (e.g., fonts or colors) and maintain the monospaced style. |
| 101 | +* **Changing Languages**: When switching the language of a code block via the dropdown, verify that the code aligns with the new language for accurate syntax highlighting in the rendered output. |
| 102 | +* **Previewing Content**: Since live syntax highlighting is not available during editing, use the editor’s preview mode to verify how code blocks render with syntax highlighting before publishing. |
| 103 | + |
| 104 | +## Enabling tab-based line indentation in code blocks |
| 105 | + |
| 106 | +The Code Block feature supports tab-based indentation to align code properly, crucial for languages like Python where indentation is syntactically significant. The Rich Text Editor does not provide a specific property to configure the indentation character, but indentation can be enabled using the editor’s default behavior for the Tab key, toolbar commands, or custom event handling. |
| 107 | + |
| 108 | +To enable tab-based indentation: |
| 109 | + |
| 110 | +* **Using the Tab Key**: Pressing `Tab` within a code block typically inserts a tab character (\t) or spaces (usually four, depending on the editor’s default configuration). Use `Shift+Tab` to outdent selected lines. |
| 111 | +* **Toolbar Commands**: Include the `Indent` and `Outdent` buttons in the toolbar to increase or decrease indentation. |
0 commit comments