TextField - Show Line Numbers and Syntax highlighting

Hello All;

  ( If this is the worng category to post this in, please let me know )

   I do not know if it is possible or not, And have searched the Internet half of the evening and have not come up with anything.

  This is what I am needing:
I am developing a " .asp " site. And need to have a TextField on the site
That has the following:

Line Numbers ( like what most Editors have )
Syntax Highlighting ( Like most Editors Have )

It must be a regular TextField and not a Java  Program!

  Is this possible?
  If so, I will award the person that can make a working (No Bugs)
Copy of it. 500-points.
If a link is given to a downloadable one. I will award 75-Points.

 And of course, if multiple people assist in the post, to develop one.
Then I will split the Points from:
Most Resource - Highest Points
Down to:
Lowest Resources Given - Lowest Points awarded.

  Thank you all;
  Carrzkiss
LVL 31
Wayne BarronAuthor, Web DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

eyeh8uCommented:
Short answer is no. There is no HTML native way of having a syntax highlighted display of code in a page. You would have to use an ActiveX control (IE only) or a Java applet (Cross platform).

It would be possible to do a read-only display of the information in a scrolling DIV, but you would have to write your own parser/syntax highlighter in VBscript to generate the formatted HTML to display.

So if you want it read-only, then yes you can do it, but, it's a big job and would depend on the language you were intending to render. If you want it editable, then no.
0
GarveCommented:
As eyeh8u says,it's not going to be possible just using HTML. However the following link is a PHP code editor with line numbers and highlighting which they say is written in javascript. It should be possible to create something similar for ASP.

Go to http://helene.muze.nl/ and view the demo.

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
eyeh8uCommented:
Very interesting project.

It appears to be using a set of <div> tags to create some HTML areas, as I suggested for a read only area, however, when you click on some text in the div, a textarea is rendered (notice it has no highlighting in it) over the area of the syntax highlighted div with the content of that line in it, you then edit it and click away and the main syntax area is re-written. Very nice.

To make that work for ASP highlighting, or another language, I suspect you would just need to edit keywords.js
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

GarveCommented:
With an ASP version of this, all I need now is an online image editor and I won't need a computer of my own - I can just do all my work in internet cafes around the world!
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
[Garve];
  Thank you very, very much.
That is what I was needing, and works great in my project.
As I am just going to replace different field with this one.
I forsee a great user-interface to begin.

Take Care and Thank You once again Friend.

Carrzkiss
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
If anyone takes a look at the "Helene Editor" as suggested by: [Garve];
This is a nice script, but a pain in the butt to configure.

I am trying to get it to work in a "Table Cell"
But it is not taking it, it seems to only want to work as a stand alone.
The Editor itself seems to set itself Full Screen. Putting the Table
in the Center of it.

I know that it uses the " editor.css" and that is where it is getting
It's positioning. But not know that much about how this type of
css works. It is proven to be a tough curve.

Any idea's on this? Or how to implement it?
I will post an aditional question and award someone 100-Points.
If they can get this to work in a Table Cell

Thank you
Carrzkiss
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
For anyone that is intersted.
I have done this, but still working on it.

HTML Code:
=================================
<table id="inputLine width="41%" border="1" height="85%" width="423">
    <tr>
      <td height="34"></td>
    </tr>
    <tr>
      <td>
<div id='codeframe'>
<div id="linenumbers" style="top: 43px; width: 35px; height: 217px; left: 303px"></div>
          <div id="content" style="width: 415px; height: 39px; left: 303px; top: 43px">
            <ol id="lines"><li>&nbsp;
</li></ol>
</div>
          <div id="inputLine" style="width: 176px; height: 20px; left: 303px; top: 41px">
            <textarea id="inputLineEntry" wrap="off"><% =IsCause %></textarea>
</div></div>
      </td>
    </tr>
  </table>

=================================
In the " editor.css " file
The

#linenumbers {
  position: absolute;  <-- this line has to be taken out.
The position needs to be reset in order to fit like it suppose to;



#Content {
  width: auto;
Changed to:
  width: 423px;
But this does not set it to the size of the Table Cell.

=============
Just trying different things out, and thought I would share with everyone, that would like to assist me on this.

Carrzkiss
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Forgot a few tags in the above code. here it is updated with all tags
For the <body>

<body onLoad="init();">
<div align="center">
  <table id="inputLine width="41%" border="1" height="85%" width="423">
    <tr>
      <td height="34"></td>
    </tr>
    <tr>
      <td>
<div id='codeframe'>
<div id="linenumbers" style="top: 43px; width: 35px; height: 217px; left: 303px"></div>
          <div id="content" style="width: 415px; height: 39px; left: 303px; top: 43px">
            <ol id="lines"><li>&nbsp;
</li></ol>
</div>
          <div id="inputLine" style="width: 176px; height: 20px; left: 303px; top: 41px">
            <textarea id="inputLineEntry" wrap="off"><% =IsCause %></textarea>
</div></div>
      </td>
    </tr>
  </table>
</div>

Wayne
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Never mind people.
I figure it out. I must make a call using the <iframe>
In order to bring it into my project.

   OK. Thanks for the link again [Garve]; It is very much appreciated.

Carrzkiss
0
GarveCommented:
Thanks Carrzkiss - I'd be interested in seeing your final solution.

cheers

Garve
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Actually, in order to make this project work correctly for what I need, I have to bring it OUT of the IFrame, and put it in a Table.Cell.
I thought that using the IFrame would work, but unfortunantly, it does not.
It does need to be put in the Table.Cell to make it more flexible.

  The developer of the code told me that
[Quote]At the moment it will only work from the IFrame, as it takes up the whole page[/Quote]

So that is a delima within' itself.
But I have ask help from some CSS Experts in EE to assist me in putting this project in a Table.Cell.
We will see here in a few days on rather or not, it can be accomplished? And if so, then I will post back here. Or you all can go into the post here:
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21204259.html
And assist if you have any idea's.

Carrzkiss
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I think that I might have it :-)
Working, working, working.
Learning about CSS in the process. Man what a cool extension css is :-)

Will post my results once completed and test.

Carrzkiss
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I have it completed.
The developer ask if I would wait until he has an opertunity to see it
Before I release it to this post.
I will keep you all informed when it is released.

p.s.
  It works GREAT!!!!!!
  Took about 4hrs of hard-coding a new CSS file.
But I have it working. Was not as hard as I thought it would be.
CSS is a pretty cool language.

p.s.
  The post above, I have [Deleted] it.
As I do not need any help on it. So this will be the place where all
Updates will be posted.

Take Care All;
Carrzkiss
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Hello everyone here, that are still monitoring this post.

Here it is:
http://www.ericcarr-tribute.com/Files/Helene-Updated-Table-Support.zip

I am still having problems implementing it into my ASP site.
It is proven to be a pain in the butt.
The Demo in the above zip file, is a working Demo, with no known problems, except the snap on the "scroll" when you hit the [Enter] key.
To go from line to line. The "Line Numbers" become invisible.
Until you move the Bottom-ScrollBar.
Other then that, it would great.

Enjoy, and let me know your thoughts on it.

The Developer is plaining on adding my updates to the site.
As this code has not been updated in so long, I am the first person to
Update it.

 Good Luck All;

Carrzkiss
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.