New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Implementing a Code Syntax Highlight in HTML mode


Product RadEditor for ASP.NET AJAX


If you are curious to learn how to implement a code syntax highlighting in HTML mode of RadEditor, check out the Solution section below:


The solution is based on a custom third-party syntax editor, which replaces the source mode textarea of RadEditor when switching to HTML mode inside the OnClientModeChange event. Once you get back to Design mode, the content is taken from the custom editor and set into the content area of RadEditor.

<!DOCTYPE html>
<html lang="en">

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>RadEditor Page</title>
    <link href="codemirror-5.65.3/lib/codemirror.css" rel="stylesheet" />
    <script src="codemirror-5.65.3/lib/codemirror.js"></script>
    <script src="codemirror-5.65.3/mode/xml/xml.js"></script>
    <script src="codemirror-5.65.3/mode/javascript/javascript.js"></script>
    <script src="codemirror-5.65.3/mode/css/css.js"></script>
    <script src="codemirror-5.65.3/mode/htmlmixed/htmlmixed.js"></script>

        div.CodeMirror {
            height: 248px;

        <h1>RadEditor Page</h1>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" />
                function OnClientModeChange(editor, args) {
                    var mode = editor.get_mode();
                    var myTextarea = editor.get_textArea();

                    switch (mode) {
                        case 1:
                            var codemirrorDiv = $telerik.$("");
                        case 2:
                            var editor = CodeMirror.fromTextArea(myTextarea, {
                                lineNumbers: false

            <telerik:RadEditor runat="server" Skin="Default" OnClientModeChange="OnClientModeChange">

                              <!-- HTML comment -->
                                    h1 {
                                        font-family: Arial;
                                        color: burlywood;

                                    div {
                                        background: green;

                                    body {
                                        max-width: 500px;
                                <h1>HTML Content Example</h1>
                                <p>Line 1</p>


You can download the source code of the sample website from here.

See Also

In this article