Indented code blocks

[krlmlr]

I'm having trouble to render indented code blocks properly with your theme:

1. Install makeR in your package, use it to add a wercker.yml:

   curl http://krlmlr.github.io/makeR/install | sh;
   make dt_test;
   make init-wercker;
   make init-gh-pages
   

2. ...

See http://krlmlr.github.io/, today's post. (Private repo, sorry...)

What am I doing wrong? Thanks.

[mmistakes]

I don't think indented code blocks are well supported with the theme. They render inline and wrap line breaks.

I'd suggest using either fenced code blocks or Jekyll's highlight tag instead. Personally I always use the {% highlight %} tag since it makes code blocks look nicer with syntax highlighting. For all of the ways the theme handles code blocks check out this post.

[krlmlr]

Fenced code blocks don't work either. Also, indentation doesn't work with the highlight tag. Please advise.

Could indented code blocks be a feature of redcarpet, not supported by kramdown? Does your theme work with redcarpet? Thanks for your help, very much appreciated.

[mmistakes]

The problem is the markup and CSS. If you look at the HTML it's rendering a code tag inside of a paragraph, which in this case it should be an inline element. The CSS I'm using to style that makes it wrap instead of break at each line. You could change the following, but no idea if it will break in other circumstances.

p code, li code {
  white-space: pre; // change from nowrap

The preferred way is to use the highlight tag built into Jekyll since it wraps code blocks in a div making it easier to style. But I'm guessing Kramdown is getting confused because you're trying to put code into an item list and it can't handle that.

[krlmlr]

Thanks, will try. Where would I make this change?

[mmistakes]

Here.

[krlmlr]

Works, after I changed to redcarpet instead of kramdown. CSS needed further tweaks, see 9a6f67b5061a in my repo. I wonder if these CSS I had to remove are necessary at all even in your unmodified version. (EDIT: Yes they are.)

redcarpet styles code blocks as <div class="highlight"><pre><code class="language-text" data-lang="text"> -- is there a way to apply this highlighting with your theme?

Thanks again for your help.

[krlmlr]

Found it: a237558ae3a3 in my repo, but I wonder if this works well with the basic kramdown setup.