Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Automatically Line Number a Code Snippet

Posted on 2014-10-08
13
Medium Priority
?
261 Views
Last Modified: 2014-10-09
Given this small bit of HTML, what can I do to get the browser to render the <pre> section with line numbers?  I would also like a "Select All" functionality for the lines (but not the numbers) just below the <pre> block.  What I'm looking for is something like the way E-E handles code snippets.

<html>
<p>
Here is a code snippet
</p>
<pre>
<?php
error_reporting(E_ALL);
echo "Hello World."
</pre>
<p>
This is the end of the HTML
</p>
</html>

Open in new window

Thanks and regards, ~Ray
0
Comment
Question by:Ray Paseur
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +1
13 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 1000 total points
ID: 40369219
Without using a plugin

http://jsfiddle.net/qwfceypr/3/

HTML
<pre>
Code line 1
    Code line 2
    Code line 3
</pre>
<div class="code">
    <ol></ol>
</div>

Open in new window


CSS
ol li {
    content: counter(listing)". ";
    font-family:monospace
}

Open in new window


jQuery
var code = [];

lines = $("pre").text().split("\n")
lines.forEach(function (line) {
    code.push('<li>' + line + '</li>');
});
$("pre").hide()
$(".code ol").append(code)

Open in new window


edited
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40369234
Clever, but that is not what EE is doing.  

What looks like a text area is actually a div with child pre ans code tags.  The content is in a pre tag with a left margin of 55px.  the line numbers are in a pre that is absolutely positioned, the matching to have the line numbers with the number of lines in the text would be part of server side generation.

The select is simple scripting, targeting the pre with the text by is or element index, and applying a select method.

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 40369249
Yeah but EE has a 1000 lines of code to do the same thing ;o)
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 82

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 40369268
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40369284
Yeah but EE has a 1000 lines of code to do the same thing

That is because SLO has either never heard of KISS or rejects the concept.  I think it is part of the JAVA programmer mindset that you need to keep things complex and obfuscated so you are the only one who can maintain it; job security.

I never said what they were doing was not crappy, I just describe the junk they were pushing out... but I need to be careful about what I say because the last time I criticized the level of their technical quality, I was censored, sanctioned and turfed out of the TA program I helped start, because the SLO drones were offended.

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 40369325
Forgot to account for html tags
http://jsfiddle.net/qwfceypr/7/
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40369334
Not complex enough for SLO to use.  You need at least 3 jquery libraries, 40 classes, and (at a minimum) 250 more lines of code.  Plus nothing is worth doing on the server that does not require 200 lines of code and use 15 methods and 6+ accesses to the DB.

However it does support what I have said in the past about the code being put on on EE is an embarrassment to those of us answering webdev questions.  Some of the users think we help write that junk.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40369340
BTW validation of this page = 17 errors including duplicate id  :^(

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 40369350
Even if you don't want to do it client side the same logic and code can be applied in PHP.
0
 
LVL 111

Author Comment

by:Ray Paseur
ID: 40370831
@Cd&  Also, E-E seems to have lost the line numbers in the Articles, even if they are still available in the Questions.  That said, I'm OK with solutions that are conceptually similar (and simpler) than whatever E-E is using.  Thanks to all, ~Ray
0
 
LVL 111

Author Closing Comment

by:Ray Paseur
ID: 40370834
Thanks, colleagues.  This will get me moving forward!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40371809
I interpreted the question to be asking how they were doing it, so you could move in a similar fashion.  

I was not suggesting that you do anything like EE does it.  From a technical standpoint it is one of the worse coded large sites on the internet.  It is slower than the majority of sites; severely bloated because of the excessive client side scripting, and excessive structure bound css; and I have yet to see a single EE page that actually validates.

If someone asking a question posted a link to a page that was coded like an EE page I suspect most of us would insist that the clean up the code as a start.

The code box is actually a good example of re-inventing the wheel with a ton of code. They could do it without all the nested element crap with the proper tag (textbox) set readonly and the positioned line number div.

the css for selected text is

::selection {
    color: white;
    background: navy;
}

And the link just needs to fire an event that does something like:
document.getElementById("myText").select();

You don't need the css if you want it to look default.

It makes sense to me that the whole thing including the line numbers gets done on the server, because you have to go there to process the input and update the database anyway, so why not save the the line count in the same table/row as the code text and then when you generate the display of the Q the line count is a no brainer that reduces client side bloat.

Cd&
0
 
LVL 111

Author Comment

by:Ray Paseur
ID: 40371904
@Cd&, yes, I take your point.  We've discussed the HTML document validity and lack thereof with the folks in SLO.  I'm hoping they "get it" and will move in the direction that we all know they should.

In my instance, all I really need is the numbered effect and I'm using flat-file HTML pages, so I will be fine tweaking the examples here.  Your suggestions are helpful, too.  I know a lot about PHP, but I'm a relative novice when it comes to document markup.  I may wimp out and switch all of this over to a Wordpress blog, anyway!

best regards, ~Ray
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

705 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