Changing the coloring of inline code span?


#1

Is there a way to change the highlighting of inline code (not code blocks) that are found in each post content?

Currently I have tried to change the syntax highlighting CSS and JS (Which don’t work). I’m hosting my jekyll page on Github Pages, but my inline-code appearance is in no way appearing like that found on GitHub. GitHub pages uses Kramdown, but I have no idea if it’s Kramdown which is making the inline-code look in this color.

Is there a way to change the inline code highlighting to something found on GitHub or Stack overflow, or even on this website?


#2

its just css - can’t you use the chrome inspector to check the css to see what classes/tags do what?

For instance on here your inline code above is styled by the code tag (not via a class):
<code>inline code highlighting</code>


#3

What controls the coloring in blocks? I’m suspecting it is Kramdown on github pages, but is there a way to disable the code highlighting for inline code spans?

Also, I have inspected all the css documents on my site but there’s nothing that gives the color that is present. By default, GitHub pages uses rouge to highlight, but I can’t know how it chooses what color to highlight what. Is there a way to this?


#4

all kramdown would be doing is converting plain text into html tags along with classes. The CSS is what is setting the color.

In chrome, right click on the inline block and select Inspect and it will open a new panel where you can see what does what, here is a screen shot of this page when I Inspect the inline block above:

on the right you can see the css that is changing the background color to a shade of gray, and that css is on the tag code (more or less- there are other things going on).


#5

Is there a link to see your site?


#6

@rydar, that was very helpful and I just realized how I could do this. It turns out the CSS comes from a bootstrap CSS on maxcdn, but after changing the CSS color on a local file and overlaying on top of the original CSS, I couldn’t seem to change the color or the font family.

My site could be found here: https://kwotsin.github.io/tech/2017/02/11/transfer-learning.html

and the source code where I changed the CSS can be found here:

and

I have also tried creating a custom css file and put it after the bootstrap css later on:

https://raw.githubusercontent.com/kwotsin/kwotsin.github.io/master/css/custom.css


#7

your custom css should work, but when I try to use your link though it does not work because the mime type is wrong:

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://raw.githubusercontent.com/kwotsin/kwotsin.github.io/master/css/custom.css".

can you just use it as a regular css file in your repo rather than linking to the raw gh data? or paste to the end of that other BS css?


#8

so, this is pretty easy to do, took me a little bit to figure it out. i am actually using the same Jekyll theme as the original poster. Just add this to the grayscale.css file:

.highlighter-rouge {
    color: #337ab7;
    background-color: #333333;
}

you can see an example here: https://dotps1.github.io/powershell,/dsc/2017/04/21/dsc-pull-server-creating-excessive-edb-logs.html