Skip to content

June 17, 2009

CSS SyntaxHighlighter 2.0: Notes on using with TEXTAREA and PRE

by Joe Kuan

CSS SyntaxHighlighterThe CSS SyntaxHighlighter 2.0 can be used with <pre> or <textarea> tags. However if you have to use with <textarea>, you may have some little surprise that it won’t be <textarea> anymore once the content is highlighted. Because the highlighter will replace the DOM node (same applied to <pre> tag) – according to the source code ) in shCore.js. You will get a new <div> node instead – that’s the only way to have colorful syntax highlight on your page.

So if you use <textarea> with cols and rows attributes, then you are going to lose those properties. Don’t even try to use with onXXXX event handlers defined.

You may find the result of syntax highlighted code not fitted to the box nicely at the top and bottom. In this case, you need to edit shCore.css to set the margin to 0.

.syntaxhighlighter {
    width: 100% !important;
    margin: 1em 0 1em 0 !important;        <------ set to 0
    padding: 1px !important; /* adds a little border on top and bottom */
    position: relative !important;

Here are my other SyntaxHighlighter blogs
CSS SyntaxHighlighter 2.0: short tutorial on how to create your own syntax highlighter
How to use CSS SyntaxHighlighter 2.0 with Ajax/Prototype

At the time of writing, I was using SyntaxHighlighter 2.0.320.

I work for iTrinegy and here are my other Syntax Highlighter 2.0 blogs


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: