2 Replies - 2441 Views - Last Post: 06 September 2012 - 05:50 PM

#1 jjh08  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 190
  • Joined: 13-July 12

HTML5 code element with line numbers and text coloring?

Posted 06 September 2012 - 04:27 PM

Hello everyone, I am adding code snippets to a website and (as many of you know) when using the "[code]"/"[pre]" tag elements, the HTML will display the code in monospaced text. I would like to ask is there a way to show line numbers and possibly add coloring to the code text similar to how we use code tags here on DIC. Does anyone know how to do this in HTML5/CSS3 because I'm stumped at the moment. Thanks in advance.
Is This A Good Question/Topic? 0
  • +

Replies To: HTML5 code element with line numbers and text coloring?

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: HTML5 code element with line numbers and text coloring?

Posted 06 September 2012 - 04:59 PM

Hey.

There is an excellent Javascript library, called SyntaxHighlighter, that can take care of all that for you. It's used all over the place, including here on DIC.

I'd recommend you try to use that instead of building this yourself. It's not a simple task. - Unless, of course, you want to build it yourself :)
Was This Post Helpful? 1
  • +
  • -

#3 jjh08  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 190
  • Joined: 13-July 12

Re: HTML5 code element with line numbers and text coloring?

Posted 06 September 2012 - 05:50 PM

View PostAtli, on 06 September 2012 - 04:59 PM, said:

Hey.

There is an excellent Javascript library, called SyntaxHighlighter, that can take care of all that for you. It's used all over the place, including here on DIC.

I'd recommend you try to use that instead of building this yourself. It's not a simple task. - Unless, of course, you want to build it yourself :)


Thank you so much. This is exactly what I was looking for. So the colored text is called syntax highlighting, I didn't know that. I'm new to web development so I definitely don't want to build this myself right now. LOL :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1