Puzzled-man

Part 5: Blockquotes, Backticks, Backslashes and Bare Knuckles

Today we talk about wrangling computer code, quotations, and blocks of text with your Markdown tool.

If you use a variety of Markdown editors or styles, you will find that they can give you very different results when you try to quote code and text. Cascading Style Sheets (CSS) will also influence how your writing looks on your blog. As a result, the things we discuss today are where the most unexpected things happen (like having a block of text simply walk off the side of your screen). This means you might, occasionally, be tempted to put those aforementioned bare knuckles through the monitor or, at least, feel like the gentleman above. Below, I’ve notated, in blue, a few of the sections where the results on my blog were unexpected or unusable.

The basics, however, are not really that complicated.

Inline Quotations with Backticks

If you want to show certain parts of Markdown, HTML or other computer code within a sentence, such as **Double asterisks create bold text**, use backticks

Wait a Sec, What Are Backticks?

A backtick ( ` ) is the “reverse accent” found on the uppermost left letter key on an American, QWERTY keyboard. It’s normally to left of 1 and shares a key with the tilde ( ~ ).

French grammarians might call this a “grave” accent. It’s rarely used in English except by programmers, so don’t feel bad if you didn’t already know it. (I had to look it up, too.)

And How, mon ami américain, utilisez-vous un “Backtick”?

If you ever want your reader to see actual Markdown, HTML or other code instead of having the code interpreted, place a Backtick both before and after the code snippet.

In other words, type:

`<em>` and `</em>` are the HTML codes delineating emphasis or italics.

to read as:

<em> and </em> are the HTML codes delineating emphasis or italics.

Note that this changes the font displaying the enclosed code to a monospaced (or non-proportional) font to illustrate that this is computer code instead of regular text. It might change the background color behind the text, too.

Backticks have been very important in displaying actual Markdown and HTML code throughout this series of articles.

Backslash Escapes

No, this is not a cruel way to break out of prison!

The backslash key ( \ ), located above the Enter key, on the same key as the “pipe” or “vertical slash”) is a way to show a character that otherwise might be interpreted as part of a Markdown, HTML or other code.

For example, if you wanted to show an actual asterisk, precede it with the backslash, like so:

\*

and your Markdown editor won’t mistake it for part of a formatting command.

Thus type this:

Type \*italics\* in Markdown, with \* before and after the italics text.

to get this:

Type *italics* in Markdown, with * before and after the italics text.

John Gruber, on the Daring Fireball site, explains that you can use backslash escapes with these characters:

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

To actually show a backslash, you need to precede it with another backslash, typing \\.

The choice of whether to use a backtick or an escape backslash is determined by whether you want the code character to display in your regular font or in a mono-spaced font (normally used for code). The backtick changes the font, where an escape backslash does not.

Note that if you want to write a tutorial teaching Markdown written in Markdown, it can get confusing pretty quickly.

TIP:

The different slashes can be confusing. Use the backslash ( \ ) as an escape code when you don’t want to create a Markdown or HTML code. Use the forward slash ( / ) when writing HTML code to close out that particular formatting control, as in </em>.

Code Blocks and Blockquotes

Code Blocks from Spaces

Adding 4 spaces to the beginning of a line is a good way to highlight a paragraph. This is also referred to as a “Code block.” Normally, this does up to three things:

  1.  It changes the font of the text to a mono-spaced font,
  2.  It indents the quoted block of text,
  3. And it may change the background color behind the text.

Irritatingly, only the first feature shows my blog. (So much for being a so-called “expert.”) See:

Adding 4 spaces at the beginning of a line highlights the text, indents the 
text and, depending on the Markdown tool you use, will highlight the text with 
a background color. Different Markdown tools and different CSS settings will 
change how the actual code block looks.

This is called a “code block” because programmers will use this technique to separate literal code snippets from normal text.

Some Markdown editors will allow you to enter 4 or 5 spaces using the tab key. You might need to check your program’s Options or Settings area to enable this.

Normally, using four spaces at the beginning of a paragraph will place the entire paragraph into a code block. However, you can include several lines (or paragraphs) into a single code block by indenting each line by 4 spaces. (Don’t separate them with blank lines.) You can also indent certain lines by adding more groups of 4 spaces:

This is the first line of a code block, preceded by 4 spaces.
This is the second line
    This is an indented line created with 8 spaces.
        This is a triply indented line, created with 12 spaces.
            You can keep on indenting, using groups of 4 spaces.
        1. You can number paragraphs, too.
        2. Just like this.

Thus, you can use this technique for creating outlines.

I. This is a top level outline level
    A. This is the second level
    B. As is this
        1. A third level
        2. This, too.
II. Another top level

Another feature of a code block is that most HTML characters are displayed literally instead of as part of Markdown. Thus code blocks are good for showing samples of Markdown, HTML code, and other programming code.

The HTML code produced by the “outline” above turns out to be:

<pre><code>I. This is a top level outline level`
    A. This is the second level
    B. As is this
        1. A third level
        2. This, too.
II. Another top level
</code></pre>

To show the actual code in a code block, I had to preface each line with an additional 4 spaces (or 1 tab).

Possible Problems with Code Blocks

If you know HTML, this type of code block uses the <pre> command (“pre” is from “pre-formatted”) which is normally used to display raw HTML and computer code. Usually this formats into a nice, indented paragraph, in a mono-spaced font, and perhaps a colored background. Other times it might show as a single line that runs off the right edge of your blog’s page. (This actually happened above, so I edited it.) It also may show as a single-line box with a scroll bar – which is better than running off the edge of the page, but not a good reading experience for your readers. Some display problems may come from your blogs Cascading Style Sheets (CSS), too.

Sometimes, fiddling with the HTML code and making sure that the “<pre><code>” and “</code></pre>” tags immediately surround the text will fix the running-off-the-page problems. Honestly, though, it doesn’t always seem to make a difference. <sigh>

Code Blocks from Backticks

Remember those backticks from several paragraphs ago? You can also use three of them to create a differently formatted code block. Enter them both before and after the quoted section.

Here’s another example of unintended results. Although I entered the backticks correctly in the next example, my CSS insisted, insisted, on changing two backticks into a left quotation mark, even when I entered the HTML codes for the backticks. I finally resorted to a screen shot of the entered text. Aaaargh.

If you type:

backtick sample

 

It will read as:

Three backticks will allow you to create a code block, too.

Note that Backtick blocks may quote your text or code in a different font, but they don’t necessarily indent the text or change the color of the background. That’s because backtick blocks do not invoke the HTML <pre> command, but a <code> command. So they will display differently than the four-space quotes. Again, your blog’s CSS, not HTML, may determine the final look of the block of text.

In some newer implementations of Markdown (such as Markdown Extra as used in WordPress’s Jetpack implementation of Markdown), you can use tildes ( ~~~ ) instead of backticks to create code blocks. Tildes might be easier to find on some on-screen keyboards on phones and tablets or non-English keyboards.

And remember you can create an inline quotation with only one backtick, before and after, on a separate line. In my experimentation, I’ve seen no difference between code blocks made with three backticks and those made with one backtick. I wouldn’t guarantee that one backtick will work in every case, though.

Blockquotes

Another way to indent and feature text is to use the right-angle-bracket or greater than sign ( > ) at the beginning of the paragraph.

Adding a right-angled-bracket will indent text, often displayed with a vertical bar on the left margin.

Usually, this will feature a colored (or grey) left border which also highlights the text. Unlike the code blocks in the previous section, this doesn’t usually change the text into a mono-spaced font.

You can create a series of paragraphs into a blockquote.

The way to do that is to use the right angle bracket before each line.

You can use double right angle brackets to indent further.

And have as many levels as you need.

Like this.

You may need to insert a blank line to go back to the top level.

The above blockquote was typed like this:

> You can create a series of paragraphs into a blockquote.
> The way to do that is to use the right angle bracket before each line.
>> You can use double right angle brackets to indent further.
>>>And have as many levels as you need.
>>>>Like this.
>
> You may need to insert a blank line to go back to the top level.

Note: Although the original Markdown text was single spaced, when I pasted the eventual HTML code into my blog editor, it came out double-spaced. I manually fixed the original typing, but didn’t alter the interpretation of the code above it. This is another one of those unexpected and frustrating events.

You can also use block quotes to create formal block quotations, such as quotes from another book or website. This is similar to the block quotes you may have created in books, academic papers, or other formal writing with your old-fashioned word processor.

“Alice: Would you tell me, please, which way I ought to go from here?
The Cheshire Cat: That depends a good deal on where you want to get to.
Alice: I don’t much care where.
The Cheshire Cat: Then it doesn’t much matter which way you go.
Alice: …So long as I get somewhere.
The Cheshire Cat: Oh, you’re sure to do that, if only you walk long enough.”
― Lewis Carroll, Alice in Wonderland

Note that this formatting invokes the <blockquote> command in HTML. In my tests of various Markdown editors, this was the most stable of all the block text tools.

If Markdown (or HTML) is not precise enough for getting a quotation block exactly the way you want to show it – in the exact font, font-size, indentation, or full justification – a work-around is to format it exactly the way you want in your word processor, then take a screen shot of it to insert in your blog. (I use a free, open source screen-shot editor called Greenshot on my PC.)

Let’s Compare the Different Styles of Quoting:

One way to decide on which technique to use for quoting text, is to test each style, with the same text, in your Markdown translator and your blog. For example, I ran the same quotation, using four different Markdown codes, through a basic Markdown translator and then pasted it in my blog:

See the difference?:

Using four spaces to create a code block:

This was created using 4 spaces at the beginning of the line. – Followed by some Hipster Ipsom: VHS migas pork belly, blog shabby chic photo booth Helvetica gentrify slow-carb crucifix XOXO lomo biodiesel. XOXO pork belly yr migas. Swag gastropub squid tattooed. Try-hard photo booth artisan authentic chia food truck farm-to-table pork belly, salvia church-key. Distillery Pinterest chia sustainable, taxidermy Bushwick Williamsburg vegan meh. Truffaut single-origin coffee photo booth, flannel Williamsburg farm-to-table Brooklyn banh mi Pitchfork DIY mixtape. McSweeney's swag authentic YOLO artisan.

In some Markdown interpreters, the above example looks like a single line of text running off the the right side of the screen. On other web pages it might look like a single line of text with a scroll bar, like this: 4 space block with scrollbar (MD) On others, it might look like a properly formatted block of text with a border and a colored background:

MdCharm block quote - 4 spaces

Or use three backticks, before and after, to create a code block:

This was created using three backticks, before and after the block of text. – Followed by some Hipster Ipsom: VHS migas pork belly, blog shabby chic photo booth Helvetica gentrify slow-carb crucifix XOXO lomo biodiesel. XOXO pork belly yr migas. Swag gastropub squid tattooed. Try-hard photo booth artisan authentic chia food truck farm-to-table pork belly, salvia church-key. Distillery Pinterest chia sustainable, taxidermy Bushwick Williamsburg vegan meh. Truffaut single-origin coffee photo booth, flannel Williamsburg farm-to-table Brooklyn banh mi Pitchfork DIY mixtape. McSweeney's swag authentic YOLO artisan.

Or use one backtick, before and after a code block:

This was created using a single backtick, before and after the text. – Followed by some Hipster Ipsom: VHS migas pork belly, blog shabby chic photo booth Helvetica gentrify slow-carb crucifix XOXO lomo biodiesel. XOXO pork belly yr migas. Swag gastropub squid tattooed. Try-hard photo booth artisan authentic chia food truck farm-to-table pork belly, salvia church-key. Distillery Pinterest chia sustainable, taxidermy Bushwick Williamsburg vegan meh. Truffaut single-origin coffee photo booth, flannel Williamsburg farm-to-table Brooklyn banh mi Pitchfork DIY mixtape. McSweeney's swag authentic YOLO artisan.

Finally, use a right-angle bracket before the code block:

This was created using a single right angle bracket at the beginning of the line. – Followed by some Hipster Ipsom: VHS migas pork belly, blog shabby chic photo booth Helvetica gentrify slow-carb crucifix XOXO lomo biodiesel. XOXO pork belly yr migas. Swag gastropub squid tattooed. Try-hard photo booth artisan authentic chia food truck farm-to-table pork belly, salvia church-key. Distillery Pinterest chia sustainable, taxidermy Bushwick Williamsburg vegan meh. Truffaut single-origin coffee photo booth, flannel Williamsburg farm-to-table Brooklyn banh mi Pitchfork DIY mixtape. McSweeney’s swag authentic YOLO artisan.

To see how these different technique show, using basic Markdown, in Daring Fireball’s Markdown Dingus, here’s a screen shot. Notice that the original 4-space quotation ran off the screen here:

Code block screen shot

The difference is that this screen shot does not use the same CSS programming as that used by my blog. That’s why it might be a good idea to test all four quoting styles with your own Markdown software and then paste the HTML code into your blog. (If your blog has it’s own built-in Markdown editor, just use that.)

If you know a little bit about using CSS style sheets, there are one or two newer Markdown editors which will allow you to import your CCS styles, so they should show the same in your editor as on your blog.

If you want to see variations on how different Markdown editors treat your Markdown text, you can use the online tool, Babelmark 2, which emulates various Markdown interpreters at the same time.

Conclusion

Although Markdown offers some great shortcuts for including computer code, HTML, and even Markdown code into your blog, you may need to do some experimentation to see which quoting technique works best:

  • Four spaces at the beginning.
  • Three backticks at the beginning and end, or maybe one backtick,
  • A right-angled bracket ( > ) at the beginning of a paragraph.

Testing is always good when it comes to blogging. If Markdown doesn’t work, maybe learning HTML, not using Markdown, will eventually be the most efficient way to display code. Of course, if you’re a programmer writing about computer code, you’re probably already using HTML instead of Markdown anyway. Hopefully, if you have a blog that uses Markdown as its main formatting tool, you won’t have these problems.

Our next post in this series presents Frugal Guidance 2’s Monster Compendium of Markdown Links. See the other parts of this series:

Markdown for Bloggers – Why Use Markdown? (part one)
Markdown for Bloggers – Basic Formatting (part two)
Markdown for Bloggers – Headlines & Lists (part three)
Markdown for Bloggers – Web Links (part four)
The Monster List of Markdown Tools (part six)

Credits:

Hipster Ipsom is a site for generating non-Latin (or fake Latin) dummy text without using the traditional printer’s “Lorem ipsom” Latin text.

The confused man title photo was originally part of a 1903 stereograph photo with the caption Translating a love letter from a Boston girl – “Now, does that mean yes or no?” Originally copyrighted by Underwood & Underwood.

Screen shots are by the author.

Frugal Guidance 2 - http://andybrandt531.com