DEV Community

loading...

CSS help needed to improve documentation

johanneslichtenberger profile image Johannes Lichtenberger ・1 min read

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

Discussion

pic
Editor guide
Collapse
rncrtr 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 Author

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 Author

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
rncrtr 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.