I’m using Markdown files. Because, Honestly, HTML is way to much work, learn, use, and develop, at the level I am using it. Now, When I embed Python code using Python3 It embeds it properly into the text. But, it no longer color codes it the way GitHub or Jupyter Notebooks will. Since I am trying to make Python code lessons/tutorials to display my understanding to employers I am relying on these color codings to illustrate differences in code. Is there a way for me to correct the colors.
This is the page in question. I am using Minima style.
Here is the GitHub page pointing to this post. I would be satisfied to make the colors appear like that. But something like Jupyter notebooks would be much more satisfactory.
Any assistance is appreciated. Thank you in advance!
The short of it is you need to add CSS to your site to style code blocks. If you inspect the code block in the final HTML you’ll see that it’s wrapping elements in different classes.
What’s missing is the CSS that applies colors to them. Search around for Rouge CSS themes or Pygments CSS themes. They’re interchangeable.
Thank you! I can tell this is exactly what I am trying to add to my code. However, to be honest, I’m completely unaware of Ruby, HTML, and CSS.
I clicked on the first link you provided. It directed me to a page with some CSS code and another link to something called Prism. When I clicked on Prism I was met with a page that had explanations that were difficult for me to follow. Is there any chance you could explain it to me with a little more detail?
I think a lot of my confusion is coming from the fact that I don’t see any code referencing styles in my Github repository. Is there code that I am missing? My page seems to work fine but, to be honest it makes VERY little sense to me.
it is a little complicated cause you are using the minima theme which is a gem based theme - meaning the theme files are more or less hidden from you.
This post has some details on how to do it:
you will need to make 2 new directories in your root:
_sass - make a new file here named custom.scss and paste the code from the link above that had the css for the code highlighting
assets/css - make a file here called styles.scss with the following in it:
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@import "minima-{{ site.minima.skin | default: 'classic' }}";
@import "custom";
seems like someone should add that to the minima theme.
Okay so if I’m understanding correctly. I’m adding 3 folders total. At root level in my git repo. I’m putting a folder titled ‘_sass’ with the file custom.scss with the big code block you posted in the first linked post above.
Then I’m making another folder with a folder in it ‘assets/css’ with the below text in a file named styles.scss
Still not working but every link above is slightly different with conflicting solutions. I added things as stated above. Didn’t break anything but didn’t fix it either.
I don’t know why it is not working, I think you have it set correctly but I have not actually modified a gem based theme like this so maybe there is something I am missing.
The error seems to be saying that the minima-classic sass file does not exist on the back end in GH.
I unchecked the solved check box since it is not solved.
I think this line is the problem @import "minima-{{ site.minima.skin | default: 'classic' }}";
I’m pretty sure the _sass folder is an all or nothing deal. When you add that folder to your repo, it’s going to expect all the Sass partials to exist there. The Minima Sass partials aren’t there so it’s throwing an error.
It would be nice if Jekyll clobbered the local _sass folder with the bundled gem’s _sass folder, but I don’t think it works that way.
You could copy the entire _sass folder from Minima to your local folder, but that defeats the purpose of using an external theme. Instead I’d suggest:
I’d suggest you build locally first before pushing to GitHub it will give you more descriptive errors so you’ll know exactly what the issue is. The mails sent by GitHub Pages aren’t that actionable.
I played around with this a little bit and it does look like the base minima theme has some code highlighting in it - it isn’t working for you because you are not calling it correctly.
you have
```Python3
when it should be:
```python
so no 3 and python is lower case. Then you should see some minimal code styling.
If the styling works as is then you can remove the other stuff you added. If not you still should be able to bring in your own css for the highlighting but I have not gotten that far yet.
the ```python fix helped a lot there are a few colors I would like to change since it’s doing comments and Booleans as the same color. I’m not picky about what the colors are and since they are different from plain text this is sufficient for me to communicate my points. If it’s as easy as adding a few lines to the header though I would like to be able to change that one color. Otherwise it’s not that important and I’m comfortable with this being considered resolved.
Also, I guess it’s pretty close to standard colors. I’ve just gotten used to my high contrast dark IDE’s and with the italics it works fine. Still same as above if I can make the contrasts higher that would be great.
Couple of points that may help clear the confusion…
Since you’re building on GitHub Pages, it is using a particular released version of themes and plugins. The exact details of which can be found here: https://pages.github.com/versions/
From the above, you can deduce that your builds are using Minima 2.5.1. The master branch of a repository cannot be guaranteed to be identical to your version since there’s a chance that something has changed since the version you’re using have been released. Therefore, for documentation regarding your exact version, checkout the version-tags. In your case, it is at https://github.com/jekyll/minima/tree/v2.5.1
To override styles, emulate the directory structure you see in the link above. For example, to make changes to your syntax-highlighting styles, have the following folder contents in your project directory:
.
|__ _sass
|__ minima
|__ _syntax-highlighting.scss
Copy the contents of the same file above from the GitHub repository to your local file. From here on, Jekyll will always use this local file to determine your syntax highlighting styles.
Open your browser’s inspector, locate the class for which you wish to alter color or style and apply the desired styles to same class in the local stylesheet. Once you’re satisfied, commit this new sass file to your remote GitHub repo and it’ll trigger a fresh build.
This looks like it will give me a good deal of customization! I’m going to spend a good amount of time looking at this tomorrow and I’ll comment back if I have any more questions about it!
