personal-jekyll-theme

personal-jekyll-theme copied to clipboard

First of all, I must say this is a really fantastic theme. However, would it be possible to change the markdown conversion for greater customization? One thing I've noticed is when I write keywords using backticks, for instance, apples, the keywords would appear very bright in contrast to the background and with a pink font. I have combed the source code for this theme but have found nothing related to this highlighting or the markdown converter used.

Also, I noticed that when I use bullet lists like:

1. Put some text here
2. and some text here

The jekyll markdown converter, including the GitHub preview, will show the bullet points nicely. But upon committing the markdown post, the design of the page becomes very weird with the fonts all changed in the main page where you can see some of the post preview (not on the post page). This might have to do with the fact that GitHub highlights the said bulleted content in purple (I don't know why) before I commit them. Upon removing the bulleted points, the design returns back to normal.

Lastly, how could I safely transfer the content that I've written in markdown on my editor and transfer it over to GitHub? It works for my earlier post but then when the post becomes more complex in the use of Markdown, it seems there are more issues. Could this be solved by changing the markdown editor? If so, could you show the way? I will be just very happy with using the default GitHub markdown flavor.

Thank you so much! :+1:

I defiantly agree with the back tick issue, the bright contrast is not pleasing to the eye. And i also was not able to find anywhere in the code where this is set. the only thing i can think of is maybe its in this css:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/monokai_sublime.min.css">

But it would be nice to change that color.

thanks.

well, that at least sent me down the right track, but it was actually very easy to do, just add the class to the grayscale.css:

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

you can see an example here: https://dotps1.github.io/sccm/2016/11/12/deploying-dynamic-server-nano-images-with-sccm.html

actually, better yet, following along with how well this theme is made, do it like this:

/_sass/_variables.scss

// Inline code block font color
$codeblock-font-color: #8cc4d8;

// Inline code block background color
$codeblock-background-color: #333333;

/css/grayscale.scss

.highlighter-rouge {
    color: $codeblock-font-color;
    background-color: $codeblock-background-color;
}

That way all of the color values are still supplied in the _variables.scss file.