A Few Extras and a Bit of the Advanced Stuff

Now that we\’ve covered the basics of creating (text) content using Markdown, we will now proceed to the slightly advanced stuff of Markdown and a few extras not yet covered in the very basics sections of the Markdown tutorial. But before we begin, let\’s recap on what we learned from the previous tutorial so far:

• Code Samples (inline code and code blocks)
• Lists (unordered, ordered, and nested)
• Links (inline links and reference links)
• Horizontal Rules
• Inline HTML (integrated HTML in a Markdown structure when needed)

From this point, I\’m sure that we are almost complete with Markdown, so now let\’s proceed with the extras and others not mentioned in the previous parts of this tutorial.

What we will be covering in this section?

In Part 4 (and most likely the final part in learning the Markdown syntax altogether), our focus will be the following:

• Images
• Tables
• Quote and Code Sample Separators
• Escaping Markdown Characters
• The different flavors of Markdown:
  • Multi-Markdown
  • Markdown Extra
  • GitHub-Flavored Markdown
• Let\’s Put it All Together!
• Scenarios on Using Markdown
• My Credits for this Tutorial

We will be using the following example here:

Now, we will break the above example into the following parts:

• We have an image of Sakura Kinomoto and Syaoran Li of the manga/anime series, Cardcaptor Sakura. There is also an alternate attribute text added to this image: \”Sakura Kinomoto & Syaoran Li.\” Take note that the image has no specific alignment.
• We have a title in bold in the first sentence, Cardcaptor Sakura, as well as the table title, The manga and anime differences in Cardcaptor Sakura.
• We also have a table below The manga and anime differences in Cardcaptor Sakura.
• We have two separate blockquotes from Sakura and Syaoran.
• Two asterisks are used for the word really at the last sentence of this example. But we know that asterisks are part of the Markdown syntax. How can we use asterisks in plain simple text without Markdown reading it?

In addition to the above, I also want to cover the different flavors of Markdown that aren\’t applied to the example above.

First, let\’s apply some Markdown syntax that we already know in the example. We\’re talking about emphasizing the series name in bold at the first sentence and the table title/caption:

That should do it for the easy stuff. Let\’s begin with the new stuff.

Images

It\’s a good thing that Markdown isn\’t limited to just text content. Markdown also supports images, but unfortunately, that\’s about it with images.

Writing Markdown syntax for images is almost the same thing as with links. And like with links, there are two types of images that Markdown supports: inline and reference.

We are going to add the image of Sakura Kinomoto & Syaoran Li in the example. We have the URL of this image: http://ninpojineous.ninja/wp-content/uploads/2016/04/sakura_syaoran_letsbuild.jpg. As also stated in the list above, there is also an alternate text behind this image: \"Sakura Kinomoto & Syaoran Li.\" You can also add the title attribute like you would do images using HTML, but that is optional.

For Inline Images, we write it this way. We\’ll also include the syntax if you want to add a title attribute text to it:

And then, here\’s how we write it using Reference Images:

The only difference between the images and links syntax is that there is an exclamation point ! in front when you are adding images, whereas the links syntax doesn\’t. That\’s it!

Whether you use inline or reference, the HTML output will still be the same.

Tables

Tables in Markdown is where the \”a bit of the advanced stuff\” comes in. First, tables isn\’t officially supported in the original Markdown, but two of the three flavors of Markdown, Markdown Extra and GitHub-flavored Markdown, does provide support for tables. When you are building a site via GitHub pages, or if you own a WordPress-powered blog ¹, you can build tables using Markdown.

To build a table, we are using three special characters: pipe |, hyphen <>–, and colon :. The pipe indicates the separation of the columns of the table. The hyphen indicates that the text above those hyphens are headers. The colon provides the text alignment of the headers by adding them next to the hyphens.

Again, let\’s take our table example from the above text. We have our \”differences between the manga and the anime\” table indicated. We will be building it this way using Markdown using the characters mentioned.

Quote and Code Sample Separators

We already know how to create blockquotes from Part 2 of the tutorial, but what if we want to post two separate quotes without mixing them up together as one quote? It\’s very easy to do, but I thought it\’d be a good idea to add this \”extra\” in this section.

We have two separate quotes in our example. Here\’s how we\’re going to keep them separate from each other:

All you need is a paragraph line break between the two quotes. This will keep them separate.

The same rule applies to code samples, in particular, code blocks.

Escaping Markdown Characters

We have one little tidbit that we need to fix, and that would be the last sentence of our sample text above:

I\’d like to *really* celebrate it as a long-time fan!

The word *really* has asterisks in them, however, we know that asterisks are part of the special characters that we use on Markdown to do certain things to our content, such as bold and italic. We don\’t want that word to be italic because we want to have those asterisks there on purpose.

So, this is what we call escaping characters. We don\’t want Markdown to read those asterisks and turn that one little word to italic. To escape these characters, we use the backslash before that character. Below is how we\’re going to make that happen.

Markdown will read the backslashes, but not the asterisks right after them.

The Different Flavors of Markdown

The original Markdown syntax was really meant for writers and content procrastinators. It was never intended to be a complete replacement for simple HTML when it comes to basic styling and presentation of the text content. Because of this fact, many contributors added their own extras, enhancements, and extensions to the original Markdown with their own names. Unfortunately, these different \”flavors\” are not globally supported, so these flavors won\’t work on any site or system that supports Markdown other than the original syntax.

And because of these limitations, I won\’t be offering any tutorials for each of the flavors. It\’s best that you visit their official sites for their documentation for more details. These also include their installation instructions, in which you will have to do a bit of extra work. I\’ve linked them below for you to visit.

Of all the Markdown flavors, we have three well-known ones below:

• Multi-Markdown (or MultiMarkdown):  This is an extension of the original Markdown that offers extra support for features that writers would normally add, such as footnotes, math support, tables, images, citations, etc. Many word processing programs such as Microsoft Word support Multi-Markdown.
• Markdown Extra: While the original Markdown was built using Perl, Markdown Extra was built using PHP. Whereas Multi-Markdown is supported by word processing software, Markdown Extra is supported by various CMS software, such as WordPress.
• GitHub-flavored Markdown (GFM): ² GitHub is the most popular version control system hub in the world, and because they want to make things quick and easy for web developers or anyone who owns a GitHub account, they use Markdown for their users to write their text content in their files, such as their README files for their repositories. Because GitHub also provides free web hosting using your GitHub account (GitHub Pages), GFM is supported by static site generators such as Jekyll and Hugo, because GitHub Pages only supports the client-side, meaning it only supports HTML, CSS, and Javascript.

And that\’s about it. Just search around the net and you\’ll find plenty of resources out there dedicated to Markdown.

Let\’s put it all together!

Finally, let\’s put what we\’ve learned together and build our above example using Markdown!

Now that you\’re getting the hang of it, you can now harness the powers of Markdown and declare that you are no longer a procrastinator!

Scenarios on using Markdown

Markdown can be very powerful when it comes to writing for the web. Whatever it is you\’re writing, even with just a few notes here and there, content for your website, or even a research paper, harness this syntax and you will never procrastinate ever again!

You can use Markdown for the following:

• Note-taking and outlines
• Writing blog posts
• Writing news articles
• Writing essays and research papers
• Writing a novel
• Be more expressive with your chatting in various chat communities like Slack and Discord!
• Just… you know… WRITE!

I know that it will take a bit while to get used to using these special characters, especially when you\’re a web designer or developer who is so used to using HTML, but Markdown can really save you some time in basic styling and presentation without making any mistakes with closing HTML tags. You will also need knowledge of Markdown if you do plan on using GitHub pages or even use static site generators to build your future site projects. It\’s very, very worth adding Markdown knowledge as a skill to your resume or portfolio.

My credits for this tutorial

Thank you for following my journey in writing this tutorial about Markdown. This is also my very first tutorial that I\’ve ever written throughout my (hobbyist) web designing/development career, and even though it may seem impractical for some people, I really do believe that Markdown is a valuable skill to learn, especially with handling text for the web.

I am preparing to build my very first (hobby) project using a static site generator called Hugo. I also plan on journaling my process with this project also here on this site.³ I wrote this tutorial about Markdown because I will be using this a lot when I\’m building this site for its content.

Without the following below, this tutorial wouldn\’t even be possible, and I thank them:

• Udemy: Markdown Mastery: Simple yet Powerful Writing Format (Instructor: Jason Taylor)
• Markdown by John Gruber
• Fabien Huet (really good comprehensive Markdown reference)
• GitHub (for GitHub-flavored Markdown and the GitHub Gists code samples I\’m currently using)
• Jetpack (for Markdown Extra)