Javascript CodeMirror Syntax Highlighter Example to Highlight Source Code in Browser Full Example

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeMirror Dynamic Syntax Highlighting</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- CodeMirror CSS (core + themes) -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/theme/dracula.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/theme/monokai.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/theme/eclipse.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/theme/material.min.css" rel="stylesheet">
    
    <!-- CodeMirror JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/python/python.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/css/css.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/xml/xml.js"></script>

    <style>
        .CodeMirror {
            height: 800px;
            border: 1px solid #ddd;
            margin-top: 20px;
        }
    </style>
</head>

<body>

<div class="container mt-4">
    <h1 class="mb-4">CodeMirror Dynamic Syntax Highlighting</h1>

    <div class="form-group mb-3">
        <label for="languageSelect">Select Language:</label>
        <select class="form-select" id="languageSelect">
            <option value="javascript">JavaScript</option>
            <option value="python">Python</option>
            <option value="css">CSS</option>
            <option value="xml">HTML/XML</option>
        </select>
    </div>

    <div class="form-group mb-3">
        <label for="themeSelect">Select Theme:</label>
        <select class="form-select" id="themeSelect">
            <option value="default">Default</option>
            <option value="dracula">Dracula</option>
            <option value="monokai">Monokai</option>
            <option value="eclipse">Eclipse</option>
            <option value="material">Material</option>
        </select>
    </div>

    <div class="editorContainer">
        <!-- CodeMirror editor will be injected here -->
    </div>
</div>

<script>
    var editorContainer = document.querySelector('.editorContainer');

    // Initialize CodeMirror editor
    var editor = CodeMirror(editorContainer, {
        lineNumbers: true,
        mode: 'javascript', // default mode
        theme: 'default', // default theme
        value: '// Paste your code here...'
    });

    // Change CodeMirror language mode based on dropdown
    document.getElementById('languageSelect').addEventListener('change', function () {
        var selectedLanguage = this.value;
        editor.setOption('mode', selectedLanguage);
    });

    // Change CodeMirror theme based on dropdown
    document.getElementById('themeSelect').addEventListener('change', function () {
        var selectedTheme = this.value;
        editor.setOption('theme', selectedTheme);
    });
</script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>CodeMirror Dynamic Syntax Highlighting</title>

<style>

.CodeMirror {

height: 800px;

border: 1px solid #ddd;

margin-top: 20px;

}

</style>

</head>

<body>

<h1 class="mb-4">CodeMirror Dynamic Syntax Highlighting</h1>

<label for="languageSelect">Select Language:</label>

<option value="javascript">JavaScript</option>

<option value="python">Python</option>

</select>

</div>

<label for="themeSelect">Select Theme:</label>

<option value="default">Default</option>

<option value="dracula">Dracula</option>

<option value="monokai">Monokai</option>

<option value="eclipse">Eclipse</option>

<option value="material">Material</option>

</select>

</div>

</div>

var editorContainer = document.querySelector('.editorContainer');

// Initialize CodeMirror editor

var editor = CodeMirror(editorContainer, {

lineNumbers: true,

mode: 'javascript', // default mode

theme: 'default', // default theme

value: '// Paste your code here...'

});

// Change CodeMirror language mode based on dropdown

document.getElementById('languageSelect').addEventListener('change', function () {

var selectedLanguage = this.value;

editor.setOption('mode', selectedLanguage);

});

// Change CodeMirror theme based on dropdown

document.getElementById('themeSelect').addEventListener('change', function () {

var selectedTheme = this.value;

editor.setOption('theme', selectedTheme);

});

</script>

</body>

</html>

Javascript CodeMirror Syntax Highlighter Example to Highlight Source Code in Browser Full Example

Comments

Leave a Reply Cancel reply

Archives