How to change octopress code block color to github like color?

Question

Octopress (Dark)

Octopress (Light)

Github

Octopress default color is not that nice, how to change the color for code block to Github-like?

Muddy

You will need to enable Pygments then use (pygments-style-github)[pypi.python.org/pypi/pygments-style-github] – Maim

does it built-in in octopress? Is pygments.rb same as pygments? pygments: false # default python pygments have been replaced by pygments.rb in _config.yml it mention that by default is replaced by pygments.rb – Muddy

What does this have to do with the sass (syntactically awesome stylesheets) tag? – Lashing

@KatieK: since octopress using sass, and solarize is configure via sass as well. so i think it may related to sass. – Muddy

Answer 1

I had the same problem, but I wanted the Twilight color scheme in my posts.

You can use kramdown and CodeRay instead of rdiscount, which will let you choose the color associated with every code object in your snippets. I wrote a blog post about how to do it:

http://blog.alestanis.com/2013/02/04/octopress-and-the-twilight-color-scheme/

EDIT:

I found a GitHub theme for coderay here.

Nonce

the color scheme is better than the original, but still I prefer the color scheme like github, is there any blog that showing how to transform to github-like color scheme? – Muddy

@JsLim Try looking for github color schemes that work with coderay and then you will just have to replace the file containing all the colors. – Nonce

@JsLim Found one! I put it in the answer. – Nonce

I follow your blog, unfortunately it break the whole thing, all displayed in HTML rather than lines of code – Muddy

@JsLim It's strange... Do you have any errors in your console or in your browser's developer tools? – Nonce

Ya, but there is no error, just the code content become pure incomplete-html. Is there any way to just use pure css without install kramdown or coderay? – Muddy

@JsLim No because there is no way for your CSS to know wich words are special. What kramdown does is that it transforms your code into the same text but with words surrounded in divs with special classes. Then it's pure CSS, but you need to have the parsing and transforming step for it to work. Could you show the html produced by your code? – Nonce

sorry for late reply. here is the screenshot. – Muddy

@JsLim Your kramdown isn't working at all. Did you add it to your Gemfile and did bundle after? You don't have any errors in the console when you generate your blog? – Nonce

No. i explicitly install kramdown gem install kramdown. Must it put in Gemfile? – Muddy

@JsLim Yes, add it to the Gemfile, otherwise bundle has no way of knowing that your blog project actually needs kramdown, even if it's installed in your system. – Nonce

must I use {:lang="ruby"} like this? Previously what I did is use triple back quote ```. Because even I put kramdown into Gemfile also come out the same problem. – Muddy

@JsLim yes, you should read the whole blog page. The triple back quotes don't work with kramdown. – Nonce

If I insist want to use triple back quote, is there any way to do that? Or how to mix both as I don't want to change all the existing posts, I just want to use kramdown for new post? – Muddy

Thank you very much for spending so much time to figure out my question. – Muddy