Textarea that can do syntax highlighting on the fly?

javascript

syntax-highlighting

code-editor

textarea

byNikita Barsukov·Sep 30, 2024

Your rescue for real-time syntax highlighting is the CodeMirror library. Here's a simple code snippet with setup:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/xml/xml.js"></script> <!-- For HTML, but you can party with other languages too -->

<div id="code-editor"></div>
<script>
  CodeMirror(document.getElementById('code-editor'), {
    mode: 'xml', // Change like chameleon to match your coding language: 'javascript', 'css', etc.
    lineNumbers: true, // Who call line 5? You now know!
    theme: 'default' // Try different dress for your editor
  });
</script>

Just switch mode according to your need, e.g., 'javascript', 'python', etc. Don't forget to try different themes for a stylish look.

Exploring other options

When CodeMirror makes you feel like you're dating the wrong person, try Ace or Monaco:

Ace Editor: Like a Swiss Army Knife, it's not a simple editor but a truly multi-functional toolkit.
Monaco Editor: Born at Microsoft, it comes with a real VS Code vibe bringing next-level capabilities.

All these options are as expandable as elastic bands, with an ocean of plugins just waiting for you to dive in.

CMS compatibility and integration

You need functionality without the frills when working with a CMS. Luckily, editors like CodeMirror can blend in seamlessly, go unnoticed, and yet make editing feel like a breeze.

And word of advice, don't pick a fight with Chrome. Some discontinued projects like CodePress might leave you in the lurch.

Switching `<textarea>` for `<div>`

If <textarea> isn't playing nice, try the 'switch partners' dance move. Sub out <textarea> with a <div> set with contenteditable="true":

<div contenteditable="true" id="editor"></div>

Guide JavaScript to perform step-by-step parsing or illuminate selected text sections to create your custom Symphony of Syntax.

Open-source options and extensibility

Open-source libraries are the new-age knobs and dials of the tech world. With these, you can tune your solution to hit just the right note:

Need a feature-studded robust solution? CodeMirror and Monaco are born showstoppers!
Want to keep it clean and lean? Try EditArea.

Remember to make an informed choice - check Wikipedia's “Comparison of JavaScript-based source code editors".

Walking on the wire between simplicity and features

Most mentioned solutions let you experience syntax highlighting minus the distractive WYSIWYG or redundant features. However, if you want to channel the power of Thor's hammer, you can snap in plugins anytime.

explain-codes / Javascript / Textarea that can do syntax highlighting on the fly?

Linked

Formatting code in Notepad++



Can Vim highlight matching HTML tags like Notepad++?



Is it possible to auto-format your code in Dreamweaver?



How do I reformat HTML code using Sublime Text 2?



How can one close HTML tags in Vim quickly?

