DEV Community

Discussion on: CSS help needed to improve documentation

Collapse
 
sym profile image
Ryan Carter

Usually I would do this with a JavaScript library. It isn't the simplest thing to style. These have line numbers, many theme options, and good control over how it displays code. I'd recommend something like Ace. You can also build a copy to clipboard link in jQuery to use with something simpler like Google's Code Prettify. Let me know if you need a hand with it I'd love to help you get it working.

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

Ah thanks. If you could help that would be great :-)

Oh and I'm using Jekyll with Rouge if that's of any value. I just moved from Github Pages to Netlify, as I needed the newest Rouge version for XQuery Syntax highlighting :-)

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

I've tried setting

kramdown:
syntax_highlighter_opts:
block:
line_numbers: true

But that's not nice out of the box and I couldn't clear the table margin-top margin-bottom somehow. Plus I'd like the style of 1., 2. with dots...

Collapse
 
sym profile image
Ryan Carter

Are you using a js library now? If not, you could just add it to your site. I can put together a jsfiddle with all the code and where to paste it if that would help.