Textarea that can do syntax highlighting on the fly

Question

I am storing a number of HTML blocks inside a CMS for reasons of easier maintenance  They are represented by  lt textarea gt s   Does anybody know a JavaScript Widget of some sort that can do syntax highlighting for HTML within a textarea or similar  while still staying a plain text editor  no WYSIWYG or advanced functions

User · Answer

Why are you representing them as textareas? This is my favorite:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

But if you are using a CMS, there's probably a better plugin. For example, wordpress has an evolved version:

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

User · Answer

You can t actually render markup inside a textarea  But  you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there  JavaScript takes care of syncing the content and scroll position   x000D   x000D  var  container       container    var  backdrop       backdrop    var  highlights       highlights    var  textarea      textarea    var  toggle      button      var ua   window navigator userAgent toLowerCase    var isIE     ua match  msie trident  7 edge    var isWinPhone   ua indexOf  windows phone       -1  var isIOS    isWinPhone  amp  amp    ua match  ipad iphone ipod     function applyHighlights text      text   text      replace   n  g    n n        replace   A-Z     b g    lt mark gt   amp  lt  mark gt        if  isIE           IE wraps whitespace differently in a div vs textarea  this fixes it     text   text replace    g     lt wbr gt            return text     function handleInput       var text    textarea val      var highlightedText   applyHighlights text      highlights html highlightedText      function handleScroll       var scrollTop    textarea scrollTop       backdrop scrollTop scrollTop      var scrollLeft    textarea scrollLeft       backdrop scrollLeft scrollLeft      function fixIOS        highlights css        padding-left      3px        padding-right      3px           function bindEvents        textarea on        input   handleInput       scroll   handleScroll          if  isIOS      fixIOS       bindEvents    handleInput    x000D   import url https   fonts googleapis com css family Open Sans         before     after     box-sizing  border-box     body     margin  30px    background-color   fff    caret-color   000      container   backdrop  textarea     width  460px    height  180px      highlights  textarea     padding  10px    font  20px 28px  Open Sans   sans-serif    letter-spacing  1px      container     display  block    margin  0 auto    transform  translateZ 0     -webkit-text-size-adjust  none      backdrop     position  absolute    z-index  1    border  2px solid  685972    background-color   fff    overflow  auto    pointer-events  none    transition  transform 1s      highlights     white-space  pre-wrap    word-wrap  break-word    color   000     textarea     display  block    position  absolute    z-index  2    margin  0    border  2px solid  74637f    border-radius  0    color  transparent    background-color  transparent    overflow  auto    resize  none    transition  transform 1s     mark     border-radius  3px    color  red    background-color  transparent    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div class  container  gt     lt div class  backdrop  gt       lt div class  highlights  gt  lt  div gt     lt  div gt     lt textarea gt All capitalized Words will be highlighted  Try Typing to see how it Works lt  textarea gt   lt  div gt  x000D   x000D   x000D   Original Pen  https   codepen io lonekorean pen gaLEMR

User · Answer

You can Highlight text in a  lt textarea gt   using a  lt div gt  carefully placed behind it   check out Highlight Text Inside a Textarea

User · Answer

CodePress does this  as does EditArea  Both are open source

User · Answer

Update  Bespin is now ACE  which is mentioned by the highest rated answer here  Use ACE instead   Gotta go with Bespin by Mozilla  It s built using HTML5 features  so it s quick and fast  but doesn t support legacy browsers though   but definitely amazing to use and beats everything I ve come across - probably beacause it s Mozilla backing it  and they develop Firefox so yeah    There s also a jQuery Plugin which contains a extension for it to make it a bit easier to use with jQuery

User · Answer

I would recommend EditArea for live editing of a syntax hightlighted textarea

User · Answer

Here is the response I ve done to a similar question  Online Code Editor  on programmers   First  you can take a look to this article  Wikipedia - Comparison of JavaScript-based source code editors   For more  here is some tools that seem to fit with your request    EditArea - Demo as FileEditor who is a Yii Extension -  Apache Software License  BSD  LGPL      Here is EditArea  a free javascript editor for source code  It allow to write well formated source code with line numerotation  tab support  search  amp  replace  with regexp  and live syntax highlighting  customizable    CodePress - Demo of Joomla  CodePress Plugin -  LGPL  - It doesn t work in Chrome and it looks like development has ceased      CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it s being typed in the browser   CodeMirror - One of the many demo -  MIT-style license   optional commercial support      CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content - computer programs  HTML markup  and similar  If a mode has been written for the language you are editing  the code will be coloured  and the editor will optionally help you with indentation  Ace Ajax org Cloud9 Editor - Demo -  Mozilla tri-license  MPL GPL LGPL       Ace is a standalone code editor written in JavaScript  Our goal is to create a web based code editor that matches and extends the features  usability and performance of existing native editors such as TextMate  Vim or Eclipse  It can be easily embedded in any web page and JavaScript application  Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter  Bespin  Project

User · Answer

It s not possible to achieve the required level of control over presentation in a regular textarea  If you re OK with that  try CodeMirror or Ace  or Monaco  used in MS VSCode   From the duplicate thread - an obligatory wikipedia link  Comparison of JavaScript-based source code editors

User · Answer

The only editor I know of that has syntax highlighting and a fallback to a textarea is Mozilla Bespin  Google around for embedding Bespin to see how to embed the editor  The only site I know of that uses this right now is the very alpha Mozilla Jetpack Gallery  in the submit a Jetpack page  and you may want to see how they include it   There s also a blog post on embedding and reusing the Bespin editor that may help you

[javascript] Textarea that can do syntax highlighting on the fly?

Examples related to javascript

Examples related to html

Examples related to richtextbox

Examples related to widget

Examples related to highlighting