0

By configure I mean font size, font family, syntax highlight style, line numbers and so on. I have followed some tutorials but they don't worked for me.

What I did:

  • added markdown: kramdown and highlighter: rouge to _config.yml;
  • added a css theme from pygments directly in head / imported it in the main.scss file.

I tried this and the syntax highlight worked but in a limited way, cause I can't add the line numbers with lineos. I noticed that the {% highlight lang_name %} tag doesn't works, just the triple tildes.

Any help will be welcome

tomrlh
  • 1,006
  • 1
  • 18
  • 39

2 Answers2

0

Pygments has been deprecated. For highlight tag, you may consider use rouge or maybe markdown code blocks with highlight.js.

David Zhang
  • 468
  • 7
  • 10
0

I think the answer depends to some extent on the theme that you are using. If you want to change only a few small things, the best way is to use the Inspect Element feature that comes with your browser.

  1. Start up your website using bundle exec Jekyll serve and navigate to a page with syntax highlighted code.
  2. Right click on a code block and select "Inspect Element". Something should open up on the side or below. It will look like this:

Chrome inspect element

  1. Now play around with the color/font size as you see fit.

  2. Then just copy the contents into the main.css file.

A tricky part may be finding the main.css or main.scss file for your theme. Try to grep for it the theme's directory (which you see using bundle show theme-name). For Minimal Mistakes, it is \assets\css\main.scss since this theme uses scss.

Srikiran
  • 309
  • 1
  • 3
  • 9