CSS issue with syntax highlighting in a fenced code block

[andyprata]

I'm having trouble changing the background color of a fenced code block of python code.

Here's the CSS I'm using (stored in ~/.atom/markdown-themeable-pdf/styles.css):

code {
    background-color: yellow;
}

pre code {
    color: black;
    background-color: blue;
    box-shadow: None;
}

Here's the Markdown:

    ## CSS test
    Some code:
    `hello_world.py`

    Some fenced code:

$ cd ~/
$ python hello_world.py
```

Some fenced python code:
```python
# -*- coding: utf-8 -*-
import numpy as np

# here's an array
test = np.arange(5)

# here's a loop
for i in xrange(test.shape[0]):
  print i
```

And here's the output PDF:
![image](https://user-images.githubusercontent.com/8485285/38293298-4f7e3ccc-382a-11e8-9f16-f87982fa9ddf.png)

I'm relatively new to CSS and want to know if it's possible to change the background color of the python code block rendered in the output PDF.

[cakebake]

Hi! No problem. Did you export your document once as HTML to examine it in the browser with the inspector? Then you know exactly which CSS path you need for your concern.

Of course, if you only work for you, you can make your rules more important with !important.

Here are the CSS files used for highlighting: https://github.com/isagalaev/highlight.js/tree/master/src/styles

I close the issue. If you have any questions, feel free to write.

[andyprata]

Hi @cakebake thanks for the fast response.

I've figured it out now thanks for your help! I didn't realise that I had to go to the Settings of markdown-themeable-pdf and change the output type to HTML. Once I had the file as HTML I was able to inspect the element and find the right CSS block. In the end it was:

code.hljs.github-gist-css.python {
    background-color: yellow !important;
}

Thanks again!

[cakebake]

I think I have to write a better documentation for the v2, which concerns the functions ;)