wood burning stoves*
The moose likes HTML, CSS and JavaScript and the fly likes Displaying code on a web page Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Displaying code on a web page" Watch "Displaying code on a web page" New topic
Author

Displaying code on a web page

Joe Lemmer
Ranch Hand

Joined: Oct 24, 2008
Posts: 171
Hi there,

I wonder if anyone can help me please.

I am trying to get some code to display properly on a web page (ie with proper indentation etc).

If I give the code segment a CSS class with a monospaced font like courier, then it looks like code, but the indentation displays wrongly (especially if I have two closing curly brackets. I can't seem to get the second last one to indent four spaces.

I've also tried using pre tags which do the job, but for some reason, it's leaving a gap under each pre block so the page looks funny. I've tried styling the pre tags using CSS and set their margin and padding to zero, but it doesn't seem to have any effect.

Also, does anybody know what the widget is that the Java Ranch uses to display it's code. I think I've seen it on a few websites now and it looks really good.

Cheers

Joe


OCPJP 85%
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Without a specific example, I'm not sure how to proceed. I've always used styled <pre> blocks without issue.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Joe Lemmer
Ranch Hand

Joined: Oct 24, 2008
Posts: 171
Oh, I'm really sorry Bear. I'm being stupid again. The reason I've got an annoying space after the code is that I've put a br tag after it. Doh...

Do you have any idea of the widget used to display the code on JavaRanch though, or others like it?

Thanks

Joe
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Actually, I haven't looked into that. But from its behavior I suspect it is a JavaScript do-dad that converts a textarea into the code display. Searching through the page source may give you the clues as to its use.
Joe Lemmer
Ranch Hand

Joined: Oct 24, 2008
Posts: 171
Thank you Bear. I followed your advice and had a look at the source code. In case anybody is interested the widget is called the SyntaxHighlighter, is written in Javascript and can be downloaded for free and configured in loads of different ways.

Link for SyntaxHighlighter
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Good show, coming back and providing a link to your findings! Thanks.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Displaying code on a web page
 
Similar Threads
frameworks supporting css?
Applet Help - Driving Me Nuts
Verifying Spring Message Tag Replacement
XML in java docs
Program Help