[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

TextField - Show Line Numbers and Syntax highlighting

Posted on 2004-11-10
14
Medium Priority
?
417 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:Wayne Barron
  • 9
  • 3
  • 2
14 Comments
 
LVL 5

Expert Comment

by:eyeh8u
ID: 12552764
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
 
LVL 7

Accepted Solution

by:
Garve earned 300 total points
ID: 12552799
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
 
LVL 5

Expert Comment

by:eyeh8u
ID: 12552882
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:Garve
ID: 12553220
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12557099
[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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12558473
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12559069
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12559155
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12560776
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
 
LVL 7

Expert Comment

by:Garve
ID: 12563453
Thanks Carrzkiss - I'd be interested in seeing your final solution.

cheers

Garve
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12565312
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12568101
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12568961
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 12579218
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question