How to modify the syntax highlighting in this Jekyll template (flexible-jekyll)

Issue

I am writing code tutorials using Github pages + Jekyll, and I would like the code snippets to be displayed in a certain way (black background and monokai boxes would be great).

What I've done so far:

I have been using this template: https://github.com/artemsheludko/flexible-jekyll

I love it so far, it's very nice and easy to modify (I have concretely zero knowledge of html or css, but Jekyll and the template make it particularly easy).

My problem:

The code snippets look like this:

I don't like it too much, and would prefer something like this:

What I tried so far:

I've followed instruction from this answer but with little result (all I got was the box black border disappear).

How to modify this template so I can change the syntax highlighting ?

Solution

This question is not so easy to answer:

Here is a Monokai CSS Theme you could generally use with any Jekyll theme:
https://gist.github.com/brazacz/f9c6bf3bdce1aa16495ce5a70b59dcc5

Unfortunatelly it is not simple to guide you how to modify syntax highlighter in Flexible-jekyll theme so I made a fork of the repo and tweaked the main.css, here you can see the result:
https://brazacz.github.io/flexible-jekyll-monokai/welcome-to-jekyll/

Here you can see my changes vs. original repo:
https://github.com/brazacz/flexible-jekyll-monokai/commit/03ccc3feddcbd7e2564de4a22c4459db8c79ceb3

Here is the source code you can use:
https://github.com/brazacz/flexible-jekyll-monokai

To make your tweaks you can either Fork it or Use as a template.

Answered By - brazacz