Jekyll - Markdown with line feed is not rendered in HTML

Question

Jekyll 3.0.1 is not rendering a single line feed (line break). It ignores it. Surprisingly it is rending double line feed as it is. I am using Jekyll on Ubuntu 16.04. Can someone help me to tackle this behaviour ?

Input

Rendered

Neanderthal

IIRC markdown requires two linebreaks (or manually using <br>) to actually show a linebreak – Failsafe

Two line breaks are not rendered as one line break. Adding <br> works, I am looking for some other alternate solutions. – Neanderthal

See kramdown.gettalong.org/syntax.html#line-wrapping – Muntin

@rashok: Two line breaks in the source are detected as a new paragraph (in HTML, marked with <p> </p>), not as just a single line break. – Odelsting

Answer 1

Good question. There are (as always) multiple ways to do this. Each solutions has its pros and cons. Choose the one that fits your style or project best.

---

Solution 1: newline to br

This is by far the most elegant solution. It works just like PHP. You can write:

<div id="content">{{ content | newline_to_br }}</div>

And add this CSS:

#content br {display: none;}
#content p br {display: inline;}

It pollutes your output a little (with unrendered breaks outside of the paragraph tags), but it does exactly what you want. It is easy to read and does not require any changes to your content/markdown.

---

Solution 2: two spaces after each line

Two spaces at the end of a line are being replaced by a <br> in the output. I do not like that these spaces are very hard to see in a code editor, but this is the true markdown way. Source

---

Solution 3: manually adding HTML breaks

As HTML is allowed in markdown, you can manually write HTML breaks, like this: <br>. These breaks are cumbersome to write and they pollute your markdown with HTML, but they work.

Frohman

I love the solution 2, eventhough it looks ugly on editor. Thanks for your answer. – Neanderthal

For Solution 1, when you write two paragraphs, you have one line separating them, but the solution will make two new lines between those two paragraphs .. what do you suggest? .. btw solution 2 didn't work with me. – Commemorative

The Solution 2 is very elegant. – Ferreby

Thx for Solution 2! Very easy and time saving. – Duckpin

Answer 2

If you're using Kramdown (Jekylls default Markdown renderer) add the following to your _config.yml:

kramdown:
  hard_wrap: true

hard_wrap - Interprets line breaks literally

Jekyll Docs

Dervish

Answer 3

Are you looking for this?

When you do want to insert a <br /> break tag using Markdown, you end a line with two or more spaces, then type return.

This source

This line ends with two spaces  
And this follows immediately

should render to

This line ends with two spaces
And this follows immediately

Gastrointestinal

This answer seems like the most correct one since its the "official" markdown syntax for line breaks: markdownguide.org/basic-syntax/#line-breaks – Jungjungfrau

Answer 4

Here is my dirty workaround.

I moved this code to separate helper include to provide better readability when using it.

helper file. _includes/linebreaks.html:

{% capture devnull %}
{% assign parts = include.input | newline_to_br | strip_newlines | split:"<br />" %}
{% capture output %}{% for item in parts %}{% assign item = item | strip %}{%
    if item.size > 0 %}{{ item | append: '<br />' | replace:"</p><br />","</p>" }}{% endif %}
{% endfor %}{% endcapture %}
{% endcapture %}{{ output }}

usage in template. _layouts/default.html:

<h1>{{ page.title }}</h1>
{% include linebreaks.html input=content %}

source markdown file. _posts/2020-02-20-marys-lamb.md:

---
title: Mary’s Lamb
---

Mary had a little lamb,
Little lamb, little lamb,
Mary had a little lamb
Whose fleece was white as snow.

And everywhere that Mary went,
Mary went, Mary went,
Everywhere that Mary went
The lamb was sure to go.

and the result:

<h1>Mary’s Lamb</h1>

<p>Mary had a little lamb,<br />
Little lamb, little lamb,<br />
Mary had a little lamb<br />
Whose fleece was white as snow.</p>

<p>And everywhere that Mary went,<br />
Mary went, Mary went,<br />
Everywhere that Mary went<br />
The lamb was sure to go.</p>

Hubblebubble

Answer 5

One solution to this could be : Add two br tags to the end of lines :
This is line one without any space at end.<br><br>This is line two.
Output:
This is line one without any space at end
This is line two

Rockey