DaveRGP DaveRGP - 3 months ago 5
CSS Question

What have I missed in jekyll and github pages to make syntax highlighting work?

Disclaimer: This is my first ever website project, in order to learn about html, css etc. I probably need a 'for idiots' guide'

I have a jekyll/github pages site here. I have read the jekyll documentation here, which suggests all you need to do is stick the liquid tag in. Which I have, for example here.

Further research has pointed out I need to set up my config file, like this which I have here. I also have a .css I copied from a site called sciviews which is here and I've made a link into the .css to call it here.

However, my page still displays in black on white in code blocks. What have I missed?

EDIT: I believe I've made another error, the source of my syntac .css was (i think) here. Is .scss maybe not compatible with this process as I've implemented it?

Answer

In your html ( inside the head tag ), you are referencing an incorrect path to "syntax.css"

Change:

<link rel="stylesheet" href="/css/syntax.css" type="text/css">

To:

<link rel="stylesheet" href="/Pokemon_FieldStudies/css/syntax.css" type="text/css">

Edit

Following your edit, it seems the code inside syntax.css is a raw scss file. Such files need to be processed before they could be served to the client.

I suggest you read about SCSS and how to compile it ( A simple google search will yield more than enough tutorials ).

In case you're interested in a shortcut, you can use an online compiler such as http://www.sassmeister.com/ but that will require you to define a value for some of the missing variables defined in the scss file.

Comments