DEV Community

Johannes Lichtenberger
Johannes Lichtenberger

Posted on

CSS help needed to improve documentation

Hi all,

I'm sadly no front-end developer or web designer, thus some help would be super great :-)

Do you know how I can add line numbers for the code examples in [1]? Maybe a small link to copy the example to the clipboard would also be great.

The main stylesheet is this:

https://github.com/sirixdb/sirixdb.github.io/blob/master/css/style.css

Have a great weekend
Johannes

[1] https://sirix.io/transactional-cursor-api.html

Top comments (4)

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.