• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Displaying code on a web page

 
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Good show, coming back and providing a link to your findings! Thanks.
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic