Markdown

Explanation

Markdown is a “shortcut” language for HTML. Rather than writing all of the HTML codes, Markdown uses a simple set of formatting commands. These are converted to HTML by the editor or CMS. Markdown is a great shortcut for writing; however, it’s a very inefficient way to create an entire website. (That’s possible, but not wise).

Editors

Any text editor and write Markdown; however, specialized editors will also convert the Markdown to HTML. If the goal is to write Markdown and then publish in a CMS (like WordPress) that supports Markdown, then any editor is fine. If the goal is to export HTML code, then a specialized editor is helpful. There are many such editors. Some run completely online within a web browser, while others are designed to work with a traditional computer, tablet, or even a phone. On the computer, I prefer either ghostwriter (free) or ia writer. For iOS, I prefer ia writer, drafts, or editorial. There are multiple other options, of course. IA writer is also available for android.

Syntax

There are a few variations on Markdown; however, the basic syntax is quite easy. Since there are numerous guides online, this document will highlight only a portion.

Headings

Headings are created using the #. To create an H1, enter a single # followed by a space, then your content. An H2 requires two ##, etc.

Italics

Italics are created with either a single _ or * at the beginning and end of the section.

Bold

Bold format is achieved using either a double __ or ** at the beginning and end of the section.

Unordered Lists

Begin the list with an *. Some editors will automatically generate the next * for you.

Ordered Lists

Begin the list with any number. Some editors will automatically generate the next number for you, but others may require you to enter another number. While any number will work, I personally number things 1, 2, 3, etc.

Code Blocks

Code can be separated inline by enclosing the code in backticks (`). If you have a lot of code, you can create a “fence” of three backticks (some editors require two backticks) around the code. Essentially the following would be placed both before and after the code block: ```.

Block Quotes

Block quotes are generated using the > symbol.

Horizontal Rule

This can be created using three or more hyphens, asterisks, or underscores.

Hyperlinks

There are at least two ways to create hyperlinks in Markdown.

Inline

  1. Place the hyperlink text within square brackets, followed by the hyperlink in parentheses like so: [Dr. Foltz] (http://www.cbryanfoltz.com).

  2. Place the hyperlink address within square brackets. The hyperlink will also be used as link text. [http://www.utm.edu]. Note that I've had issues with this not working in some editors.

Many systems will convert hyperlinks or hyperlinks within angle brackets <> into links.

Reference Style

This is excellent if you’ll use the link several times.

Define the link like so (can be anywhere in the document): [UTM]: http://www.utm.edu

Insert the link as needed like this [Check out my university] [UTM]

Images

Images follow a format similar to that of links.

Inline:

Place alt test first, within square brackets. Next place the hyperlink to the image in parenthesis. Before closing the parentheses, add title text within quotation marks. [My picture] (http://mypicture.jpg “me”)

Reference Style

If you intend to use an image more than once, consider the reference style approach. Somewhere within the document, define a name for the image and the hyperlink address, like so: [name]: http://mypicture.jpg “me” To use the image, include code like the following: `![alt text] [name]

Online References

There are many online documents for Markdown syntax.

Cheatsheet