This should be ridiculously easy but either I am not reading the documentation correctly or Kramdown doesn't support this. I am trying to put command-line output in a blog post, I am wanting to use a blockquote for this. However, kramdown insists on putting everything in the same blockquote on the same line.
I can put a space between each line of the blockquote but that isn't a true represenation of the output. How do I create a blockquote but each line actually be on a separate line without spaces in between each line. I guess I am looking more for "preformatted" output but I don't see that kramdown supports that.
kramdown insists on putting everything in the same blockquote on the same line
This isn’t kramdown, this is the normal behaviour of HTML. With the following markdown:
> One
> Two
> Three
kramdown will create this HTML, with all the lines separate:
<blockquote>
<p>One
Two
Three</p>
</blockquote>
When you view this, the browser will collapse all runs of whitespace into a single space, so it will appear all on the same line:
One Two Three
The simplest solution would be to use a code block rather than a block quote, either using indentation or a fenced code block like this:
~~~
One
Two
Three
~~~
This will generate the HTML:
<pre><code>One
Two
Three
</code></pre>
The default styling of the pre tag will result in the lines being separate:
One
Two
Three
If you really want to use a blockquote here, there are a couple of possible solutions. You could add two space at the end of each line to create a <br> element to force a line break:
(Here I’m using underscores to demonstrate where the spaces should go. You need to use actual spaces for this to work.)
> One__
> Two__
> Three__
This will generate:
<blockquote>
<p>One<br />
Two<br />
Three</p>
</blockquote>
Another possible solution would be to apply an appropriate style to the blockquote. Kramdown allows adding class and id attributes, so you can be specific about which blocks get the style:
<style>
.cmd-line > p {
white-space: pre;
}
</style>
Hello
{: .cmd-line }
> One
> Two
> Three
The white-space: pre style will cause the line breaks in the source to appear in the rendered HTML.