CODEWITHSUNDEEP
cssmarkdownjekyll
Sebastian Dziadzio
Sebastian Dziadzio

Reputation: 530

How to change CSS in Jekyll for code snippets in specific language

I use Jekyll for my blog and I'd like to change the background colour for Python code snippets:

```python
def foo():
    pass
```

I found that the background can be changed in _sass/_code.css:

pre {
    padding: 1.125em;
    background-color: $pre-background-color;
}

However, this affects all kinds of snippets. Is there a way to use a different setting for a specific language?

Upvotes: 0

Views: 197

Answers (1)

marcanuy
marcanuy

Reputation: 23982

Each language will have its own class, in this case language-python.

To customize python source code you can set the css with that class for each token of the highlighter, for example to customize the function token and Punctuation:

.language-python .nf{
    background-color:red;
    color:green;
}
.language-python .p{
    background-color:blue;
    color:white;
}

That code will give us:

enter image description here

You can see all Rouge tokens at https://github.com/jneen/rouge/wiki/List-of-tokens .

Upvotes: 2

Related Questions