How to fence code blocks with line numbers correctly and update the code-block CSS

Question

I'm trying to add line numbers to fenced code blocks in markdown with Jekyll. Moreover, I am trying to find ways of updating the code CSS style.

Regarding the first question I am trying to follow the instructions in the following thread. Thus, I am trying to do two things, encapsulate the code using the following commands:

{% highlight python linenos %}
     <code>
 {% endhighlight %}

However, when I do this the code appears right after the line counter:

1
2
3
4
5
import os
import numpy as np
....

And the same behavior is occurring when I am changing in the config.yml the following lines to true:

# Markdown and syntax highlight
markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  syntax_highlighter_opts:
    css_class: 'highlight'
    span:
      line_numbers: false #true
    block:
      line_numbers: false #true
      start_line: 1

How can I solve this issue? And in general, how can I change the CSS for only the code blocks?

EDIT:

The results after the inspection of the code:

EDIT2: I have followed the instructions of @maikhel for changing the codeblock style. I have generated the monokai-sublime scss file using the rougify. Then, I have tried to include this file in the _sass/ folder and import it from the assets/css/main.css. Now my code-block looks as follows:

After some inspection only parts of the file are imported (the ones that make the background black and the font white just for some text):

.highlight {
    color: #ffffff;
    background-color: #272822;
 }

The rest code of the file does not seem to impact anything. So, it seems that there is some code that is overwritten somewhere. Every time that I refresh the page, I can see the sublime style colors but after a while all text in the code block turns (higlight div) into black white as can be seen in the posted picture.

I also tried to follow the suggestion in the comments but I could not locate nowhere the 2 following files: _includes/head.liquid and assets/css/jekyll-pygments-themes-github.css

Answer 1

I had the same problem with you. I think what you really need to do is to check how python language is handled by the template and comment out the relevant part. You can find more details on that in the template.v2.js file.

There you can find couple of information related on how your template treats the code-block section. More specifically you should investigate further how the following function affects your code:

 highlightElement: function(element, async, callback) {
    
    ...
    
    if (async && _self.Worker) {
        var worker = new Worker(_.filename);

        worker.onmessage = function(evt) {
            insertHighlightedCode(evt.data);
        };

        worker.postMessage(JSON.stringify({
            language: env.language,
            code: env.code,
            immediateClose: true
        }));
    }
    else {
        insertHighlightedCode(_.highlight(env.code, env.grammar, env.language));
    }

Please let me know if that works for you!