File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
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
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: 61769
    
  67

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: 61769
    
  67

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: 61769
    
  67

Good show, coming back and providing a link to your findings! Thanks.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Displaying code on a web page