• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Displaying code on a web page

 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64620
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Without a specific example, I'm not sure how to proceed. I've always used styled <pre> blocks without issue.
 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64620
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64620
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Good show, coming back and providing a link to your findings! Thanks.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic