### Author:  [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)
#### Post date: [January 3, 2020, 8:18pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/2 "2020-01-03T20:18:41Z")
Have a search through the old posts on this site. This question comes up often.
- [Code highlighter on website](https://talk.jekyllrb.com/t/code-highlighter-on-website/3622/2)
- [Rouge: code snippet highlighting not working](https://talk.jekyllrb.com/t/rouge-code-snippet-highlighting-not-working/121/2)
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.
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 6, 2020, 1:06am UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/3 "2020-01-06T01:06:20Z")
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.
---
### Author:  [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [January 6, 2020, 4:22am UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/4 "2020-01-06T04:22:55Z")
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:
```auto
---
# 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.
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 6, 2020, 2:51pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/5 "2020-01-06T14:51:11Z")
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
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 6, 2020, 3:03pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/6 "2020-01-06T15:03:46Z")
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.
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 6, 2020, 3:37pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/7 "2020-01-06T15:37:31Z")
Just received this e-mail
The page build failed for the `gh-pages` branch with the following error:
Your SCSS file `assets/css/styles.scss` has an error on line 1: File to import not found or unreadable: minima-classic. Load paths: \_sass /hoosegow/.bundle/ruby/2.5.0/gems/minima-2.5.1/\_sass. For more information, see [https://help.github.com/en/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#invalid-sass-or-scss](https://help.github.com/en/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#invalid-sass-or-scss).
---
### Author:  [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [January 6, 2020, 4:53pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/8 "2020-01-06T16:53:59Z")
link to repo?
make sure the 3 dashes are at the tippy top of the page, my post above has spaces at the top but that was not intentional and may cause a problem.
sounds like what you did is correct.
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 6, 2020, 4:57pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/9 "2020-01-06T16:57:14Z")
> **[Zethtren/HoustonBovaCV](https://github.com/Zethtren/HoustonBovaCV)**
>
> Contribute to Zethtren/HoustonBovaCV development by creating an account on GitHub.
---
### Author:  [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [January 6, 2020, 5:33pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/10 "2020-01-06T17:33:19Z")
hmm, I did find an error, but it doesn’t match the message.
You named the custom file `customs.scss` but are referencing it as custom. Rename the file in \_sass to be custom.scss and see if that works.
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 6, 2020, 5:44pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/11 "2020-01-06T17:44:26Z")
Updated. I received the same e-mail once I commited. It also did not appear to correct the issue.
---
### Author:  [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [January 6, 2020, 8:40pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/12 "2020-01-06T20:40:54Z")
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.
Maybe @ashmaroli or @mmistakes can help.
---
### Author:  [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)
#### Post date: [January 6, 2020, 9:01pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/13 "2020-01-06T21:01:17Z")
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](https://github.com/jekyll/minima/tree/master/_sass) 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:
1. Remove the `_sass` folder and files from your repo.
2. Update `/assets/css/styles.scss` to this:
```auto
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@import "minima-{{ site.minima.skin | default: 'classic' }}";
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #000000; font-weight: bold } /* Keyword */
.highlight .o { color: #000000; font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
```
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 6, 2020, 9:06pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/14 "2020-01-06T21:06:59Z")
I received a new copy of the e-mail once again. Nothing on page seems to have changed.
---
### Author:  [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)
#### Post date: [January 6, 2020, 11:05pm UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/15 "2020-01-06T23:05:04Z")
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.
[https://help.github.com/en/github/working-with-github-pages/testing-your-github-pages-site-locally-with-jekyll](https://help.github.com/en/github/working-with-github-pages/testing-your-github-pages-site-locally-with-jekyll)
---
### Author:  [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [January 7, 2020, 12:55am UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/16 "2020-01-07T00:55:38Z")
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
````auto
```Python3
````
when it should be:
````auto
```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.
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 7, 2020, 2:48am UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/17 "2020-01-07T02:48:10Z")
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.
Thank you so much for all the support!
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 7, 2020, 2:56am UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/18 "2020-01-07T02:56:19Z")
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.
Thanks again!! You’ve been very supporting!!
---
### Author:  [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)
#### Post date: [January 7, 2020, 3:19am UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/19 "2020-01-07T03:19:43Z")
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/](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](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:
```auto
.
|__ _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.
---
### Author:  [@Zethtren](https://talk.jekyllrb.com/u/Zethtren)
#### Post date: [January 7, 2020, 3:24am UTC](https://talk.jekyllrb.com/t/embedding-code-in-markdowns/3773/20 "2020-01-07T03:24:48Z")
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!