6

Octopress (Dark)
a busy cat

Octopress (Light) a busy cat

Github
a busy cat

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

Js Lim
  • 3,625
  • 6
  • 42
  • 80
  • You will need to enable `Pygments` then use (`pygments-style-github`)[http://pypi.python.org/pypi/pygments-style-github] – Rubens Mariuzzo Nov 29 '12 at 01:14
  • 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 – Js Lim Nov 29 '12 at 01:21
  • What does this have to do with the sass (syntactically awesome stylesheets) tag? – KatieK Nov 29 '12 at 17:52
  • @KatieK: since octopress using sass, and solarize is configure via sass as well. so i think it may related to sass. – Js Lim Nov 30 '12 at 13:35

1 Answers1

4

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.

alestanis
  • 21,519
  • 4
  • 48
  • 67
  • 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? – Js Lim Feb 28 '13 at 10:04
  • @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. – alestanis Feb 28 '13 at 13:23
  • @JsLim Found one! I put it in the answer. – alestanis Feb 28 '13 at 13:32
  • I follow your blog, unfortunately it break the whole thing, all displayed in HTML rather than lines of code – Js Lim Mar 12 '13 at 09:41
  • @JsLim It's strange... Do you have any errors in your console or in your browser's developer tools? – alestanis Mar 12 '13 at 12:44
  • 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? – Js Lim Mar 15 '13 at 02:09
  • @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? – alestanis Mar 15 '13 at 11:24
  • sorry for late reply. [here](https://dl.dropbox.com/u/30636914/static/stackoverflow/kramdown-error.png) is the screenshot. – Js Lim Mar 22 '13 at 11:34
  • @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? – alestanis Mar 22 '13 at 13:34
  • No. i explicitly install kramdown `gem install kramdown`. Must it put in Gemfile? – Js Lim Mar 24 '13 at 03:50
  • @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. – alestanis Mar 24 '13 at 09:17
  • 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. – Js Lim Mar 30 '13 at 03:10
  • @JsLim yes, you should read the whole blog page. The triple back quotes don't work with kramdown. – alestanis Mar 30 '13 at 08:46
  • 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? – Js Lim Mar 31 '13 at 04:08
  • Thank you very much for spending so much time to figure out my question. – Js Lim Apr 01 '13 at 03:04