How To Get Started With Markdown In WordPress

474

A while ago I stumbled onto Markdown and it was a game-changer for how I write all-things code.

This neat intro to Markdown by Zaira Hira on freeCodeCamp was what got me started. It pretty much covers all you need to know to begin writing in Markdown. There are examples you can reference as well as a syntax cheat sheet to follow.

Rest assured that, once you start writing in Markdown, remembering the syntax won’t be an issue!

It’s far easier than HTML and much more “practical” (in terms of code).

Because Markdown made such a difference in how I blog about coding, I thought it was long overdue to take some time to share the hows and whys of it with you all.

In this post, I won’t go into the details of what Markdown is or how it works – you can reference Zaira’s awesomely thorough article (which, by the way, is a quick read). She, also, walks you through installing a Markdown VS Code plugin for any VS Coders out there.

Instead, I will give some examples of the syntax I always use when writing my blog posts. I keep it relatively simple.

Then, I’ll show you how I transfer the Markdown into WordPress and convert everything into blocks using the WP Githuber MD plugin.

Note: I use Obsidian to write my blog posts and notes. Obsidian is a Markdown editor – it’s free and far more convenient than a text-editor. I would highly recommend it!

How to write in Markdown

This will be a brief overview of the most used Markdown syntax for blogging (on my end). It’s really all I need to craft a blog post that’s already somewhat formatted.

Headings

Markdown headings are designated with a “#” followed by a space and text.

Note: The space after the “#” is important! If there’s no space, a heading isn’t going to get rendered.

Syntax: # Heading

The number of “#” indicates the heading level.

For example, one “#” creates the HTML H1 equivalent. Two “#” create the HTML H2 equivalent, three “#” the H3, and so forth.

• H1 example: # Hello
• H2 example: ## My name is THT
• H3 example: ### This is my first markdown page.

---

Note ⚠︎

The line after the H1 is editor-dependent.

While VS Code’s Markdown plugin automatically renders said line, Obsidian does not. Unless you specifically create it using the Markdown equivalent syntax for a horizontal line "---".

---

Typographical Emphasis

When wanting to add emphasis to text be it by highlighting, bolding, italicizing, etc., Markdown provides convenient ways around it.

I will go over italicizing, bolding, and strikethrough here as they’re typically available across many Markdown editors.

For highlighting or underlining, for example, the syntax may slightly vary (or not be supported) depending on the Markdown tool you’re using. In such cases, reference the official Markdown documentation.

Italicizing

To italicize you use two asterisks, **, and wrap the text you want to italicize between them without any surrounding spaces.

Syntax: *Here goes italicized text.*

Note: So * ... * isn’t the same as *...*.

Remember, no trailing spaces within the asterisks!

• Example: *I'm low-key impressed*

Bold Text

Similarly to italicizing, bolding uses asterisks with the main difference being that you need double asterisks, ****.

Syntax: **...**

Note: Same rule applies when it comes to trailing spaces. There shouldn’t be any space between the inner text and the surrounding asterisks.

• Example: **Slowly turning to high-key**

Strikethrough Text

Generate strikethrough text using double tilde marks, ~~~~, encasing your text within them in exactly the same way as you would for italicizing and bolding.

Syntax: ~~.....~~

Note: Again, trailing space rules apply! You’ll notice you’re doing something wrong when the sign itself renders instead of the desired emphasis.

• Example: ~~Testing~~ Mastering this like a pro.

Blockquote

I use a blockquote in my blogging all the time to create standalone text that garners attention from the reader.

In fact, all notes and tips are within blockquotes in this very blog post!

It’s super easy to create a blockquote by using the greater than (or angle bracket), “>”, sign. Then you add your content.

Syntax: >....

Simply hit Enter to go to the next line which will automatically be within the blockquote. Should you want to exit the blockquote, hit Enter twice.

• Example: >The syntax is interesting - I confess, I'm hooked.

Links

Ok, links have a slightly more nuanced syntax, but nothing too difficult.

There are two parts to creating a Markdown link:

1. the link’s text goes inside brackets
2. next to the brackets are parenthesis holding the URL

Syntax: [Click Me](URL)

Example: [My blog](www.thehelpfultipper.com)

Lists

I’ll show you three types of lists: ordered, unordered, and nested lists.

Ordered Lists

These are numbered lists and you create them by literally enumerating your list items.

Syntax: 1. First item

Note: It’s always the number followed by the period and a space.

Example:

1. The
2. Helpful 
3. Tipper

Unordered Lists

You can create an unordered list in two different ways (potentially more, but this is what I know):

1. using a single asterisk, *
2. using a single dash, -

Syntax: * ... or - ....

Regardless of the syntax you choose to use, there is one thing they both require: the space between the symbol – asterisk or dash – and the text.

Example:

- THT
- THT (it's backwards 😉 )

* THT
* THT (it's backwards 😉 )

Nested Lists

To make a nested list, Tab is your friend. Indentation is the key here as it marks the “nested” items.

Syntax:

- Parent 
    - Child
    - Child
    - Child

Note: Instead of tab, you can hit the spacebar 4 times (which is quivalent to tab). Less than that and your nested list won’t render as such.

Example:

### Why do I like markdown?

* Because it's...
    * cool
    * refreshing
    * fun
    * kinda easy

Line Breaks

In the example provided above for the nested list, notice there is no blank line between the H3 header and the first list item.

To include a blank line use the HTML break tag. The more blank lines you want to include, the more break tags you need to insert.

Syntax: <br>

Example:

Go ahead and try it. All you need to do is

* install the necessary plugin in your editor

* start typing: `# Hello Markdown World`

---

<br>

The End.

Transferring Markdown into WordPress

Once I write my blog post in Markdown, I copy and paste it onto WordPress in a Markdown editor.

I use WP Githuber MD, but you can use other available ones.

The following steps apply to WordPress with the WP Githuber MD plugin installed.

1. Paste your Markdown in the WordPress Markdown editor, add a title, and save the post.

Note: You need to save the post before going to the next step!

My preference is to convert the Markdown into Gutenberg blocks so the post format conforms to that of THT’s theme. WP Githuber MD makes this easy by allowing me to enable/disable the Markdown editor.

2. Click on “Enable Markdown” to disable the Markdown editor. You’ll be redirected to WP’s default editor (block editor in my case).

The Markdown is converted within the Classic editor block – not quite what I want.

3. Click on the Classic block and proceed to click on “Convert to blocks” in the menu bar that appears.

Now you have everything broken down into their respective block types!

The process is relatively seamless, though, there might be a time or two you might run into a few glitches you can easily remedy.

Overall, writing in Markdown and transferring to WordPress in this way saves me so much time and effort.

I no longer have to spend hours choosing block types and editing the format of each post 🥲

Find the full Markdown file on Github.

Adios, for now.