6

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.

Michael
  • 2,683
  • 28
  • 30
  • Why not just use a [code block](http://kramdown.gettalong.org/syntax.html#code-blocks)? – matt May 11 '16 at 21:52

2 Answers2

10

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.

matt
  • 78,533
  • 8
  • 163
  • 197
  • Ahh, a code block is indeed what I wanted. I just indented the lines 4 spaces and it rendered as I expected. I didn't equate command-line output to code, thought I needed a blockquote but didn't (textbook XY problem...hah! http://xyproblem.info) – Michael May 12 '16 at 17:31
  • 1
    Accepted answer for the `white-space` solution. In my case I had to use `blockquote`s. – Lalit Jul 23 '19 at 08:27
2

Just use the Hard line breaks

One
Two
Three

Hanabi
  • 577
  • 4
  • 9