Code blocks look horrible

[rastersize]

[codeofthewoosters]

Nice work on this theme by the way.

I'd like some idea of how to go about fixing the code blocks. I am thinking that I'd like to use the {% blockquote %} syntax and the GitHub flavoured ( ''' ruby ) style syntax. At the moment I can't get see where I would update the sass to get this to update, especially as I'm new to sass and octopress.

I'd greatly appreciate some help.

[rastersize]

Hi, sorry for the late reply. Didn’t get any e-mail notification for your comment for some reason so only saw it just now.

Octopress seem to support all the types of code block syntax you want, and more. Have a look at the “Sharing Code Snippets” page in their documentation. The resulting HTML should be quite similar.

To fix the look of the code blocks I think you could start by looking at the following files, ordered by relevance.

• sass/partials/_syntax.scss – Most of the code block related stuff. Start here (and the following file).
• sass/base/_solarized.scss – The code block style/colors. (The variable names are horribly named though, not my fault :P).
• sass/base/_typography.scss – Which font to use ($mono).

If you fix it I would greatly appreciate a pull request (or a patch), it would be very nice to be able to publish posts with code in them :)

[codeofthewoosters]

Thanks rastersize, I'll have a go and will submit if I manage anything worthwhile. I did notice last night that if I used the GitHub markdown (e.g. ''' ruby) syntax for code blocks in markdown and made changes to the sass folder in the octopress root directory (in sass/custom/colors.scss), then I got them looking ok, but now I see that it would be better to do this at the theme level. Will dive in again and get back to you.

[jbrooksuk]

Any news on getting the code blocks actually fixed?

[rastersize]

I haven’t done anything yet. @codeofthewoosters how is it going for you?

[codeofthewoosters]

@rastersize, @jbrooksuk - apologies for not getting back to you guys sooner.

I ended up using the Github Flavoured Markdown semantics to include code snippets and it seems to be working fine for me. So for example instead of using:

{% codeblock %}
code snippet
{% endcodeblock %}

...i use this instead (just swap out the language keyword for your language of choice):

``` csharp
var integer = 1;
```

although having checked you can get the same thing using

{% codeblock lang:csharp %}
code snippet
{% endcodeblock %}

Then in order to tweak the colors, I edited the following file:

sass/custom/colors.scss

by uncommenting the following section...

/* To use the light Solarized highlighting theme uncomment the following line */
$solarized: light;

/* If you want to tweak the Solarized colors you can do that here */
$base03:          #002b36; //darkest blue
$base02:          #073642; //dark blue
$base01:          #586e75; //darkest gray
$base00:          #657b83; //dark gray
$base0:           #839496; //medium gray
$base1:           #93a1a1; //medium light gray
$base2:           #eee8d5; //cream
$base3:           #fdf6e3; //white
$solar-yellow:    #b58900;
$solar-orange:    #cb4b16;
$solar-red:       #dc322f;
$solar-magenta:   #d33682;
$solar-violet:    #6c71c4;
$solar-blue:      #268bd2;
$solar-cyan:      #2aa198;
$solar-green:     #859900;

I think this looks fine except that when you highlight the code it doesn't color too well.

It seems that when I make these changes to the .themes/BlogTheme directory files themselves, the changes don't show when I run rake generate which makes me think that I would need to reinstall the theme in order to have the changes show up?

[rastersize]

@codeofthewoosters No worries, glad to see it seems to be working for you. I will probably try it myself at some point in the near future :smile: Thanks for testing/trying it by the way!

Yea, you must run rake update_style[BlogTheme] to get the changes to show up. If you made any modifications to the template/source files you update them via rake update_source[BlogTheme].

[codeofthewoosters]

Ok, must have missed that. Maybe this will be the impetus to actually get me blogging again. Life keeps inconveniently getting in the way of it. Cheers!