Home > html, python > HTML: add syntax-highlight to textarea

HTML: add syntax-highlight to textarea

You have an HTML form with a textarea where you want to accept some source code. You want to turn this simple textarea into a fancy input area that adds syntax highlighting.

I tried EditArea, and it suits my needs. See this SO page for more alternatives.


EditArea is a free javascript editor for source code. This editor is designed to edit souce code files in a textarea. The main goal is to allow text formatting, search and replace and real-time syntax highlight (for not too heavy text).” (source)

For Python support, I had to add these lines to the HTML source:

<script language="javascript" type="text/javascript" src="../editarea/edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript">
    id : "src_input"       // textarea id
    ,syntax: "css"          // syntax to be uses for highgliting
    ,start_highlight: true      // to display with highlight mode on start-up
    ,syntax: "python"
    ,replace_tab_by_spaces: 4

Related work

  • Ace (it seems a more professional solution)
  1. November 7, 2015 at 04:58

    I tried the installation method and it worked. but the frame width is smaller and the height is higher than the space i provided. how can i fixed it..?

  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: