Indenting markdown usually isn’t difficult, however there could be a few gotchas. Skip down to the end for a quick little Hugo shortcode for inserting indents in markdown.
Earlier today, I wanted to indent a markdown page element that included a link, but for some reason, the HTML that wrapped the markdown link was breaking the things.
Search the web for how to “indent without adding a bullet or number in markdown” and you’ll likely come across multiple suggestions that rely on a mix of HTML tags and CSS styles.
Most suggestions either involve wrapping the target line with a
div styled with a margin to create the indent or a
li pair styled to hide the bullet. These suggestions usually work when indenting plain text, but for some reason, they were breaking the link.
Both of the above examples produced a malformed link when the site was built. As shown here, the markdown link was interpreted as plain text.
- B: [Link](http://example.com)
Some people may not care too much about their site’s generated HTML, but if you do, you may find this solution is even less ideal once you view the source in a browser. That blank line not only introduces a new paragraph, but the
p is opened after the
li and isn’t closed until after the
ul are closed.
While browsers are pretty forgiving and try to understand what’s intended, opening and closing HTML tags should be handled like a Last In, First Out (LIFO) stack. Whichever tag you open last should be closed first.
<b><i>Last In, First Out (LIFO)</i></b>
<b><i>First In, First Out (FIFO)</b></i>
In this case, a better indent solution is to use a simple
span styled as an inline-block with an appropriate left margin.
Wrapping the markdown link with the
span works fine:
span before the markdown is even cleaner:
To avoid having to insert custom individually styled
spans everytime I want to indent something, I created a shortcode to simply things.
The argument after
indent is optional. It will default to
2em. When using a %, wrap the value in quotes.