Advanced Syntax and Formatting in Markdown

You have covered some of the basic syntax in Markdown in the previous lessons; your lesson won’t be over until you see some of the advanced or extended syntax in Markdown.

In this section, you’ll look at Markdown’s advanced syntax and formatting. So, stay sharp; there’s more to uncover as you explore the advanced layers of syntax and formatting.

What you’ll Cover in This Lesson:

• Advanced Syntax and Formatting in Markdown.
• Linking and Organization.
• Structuring and managing markdown files.

Now that you have an overview of what you will cover, let’s get started.

Tables#

Creating a table in markdown is more complicated than the other elements you’ll cover, but here is a sure way to understand it.

Tables are made up of cells in rows and columns, and you can keep adding more rows or columns to your desired amount. It may sound complicated, but let’s get to action because once you see examples, they’ll all make sense.

Creating a Cell: To create a single cell in a Markdown table, use two pipe symbols | |, and to create multiple cells in a single row, add more pipes (|). This would create rows with many columns.

Example:

| | | | | | | |

Imagine it this way⬇️

Creating Multiple Rows:
To add multiple rows, use a dashed line separator and additional rows below

1|  |
2|--|
3|  |
4|  |

The output of the syntax above would give you three rows.

Column Headers:
Create headers for each column using three or more hyphens (—).

Let’s apply everything you have learned above to create a table.

1  | Header 1 | Header 2 | Header 3 |
2  |----------|----------|----------|
3  | Cell 1   | Cell 2   | Cell 3   |
4  | Cell 4   | Cell 5   | Cell 6   |

Output: ⬇️

1  | Header 1 | Header 2 | Header 3 |
2  |--|----|----|
3  | Cell 1    | Cell 2   | Cell 3   |
4  | Cell 4| Cell 5 | Cell 6  |

The output would be the same.

Text Alignment#

To align text to the left, center, or right in the table cells, you add colons (:) on the left, center, or right sides of the hyphen in the header rows, respectively.

• To left Align Texts: use (:---)
• To Center Align Texts: use (:---:)
• To Right Align Texts: use (---:)

Example:

1  |Car Models| Brands |Country|
2  |:----------|:--------:|------:|
3  |Accord Hybrid|Honda|Japan  |
4  |    Mustang  |Ford |   USA |
5  |      X5     | BMW |Germany|
6  |   Wrangler  | Jeep|  USA  |

The output would look like: ⬇️

📝 Note: The markdown renderer determines how to format the data when alignment is either absent or only suggested. The common default alignment is to the left.

Variation#

Some Markdown editors or renderers allow you to omit the pipe symbol at the sides of the table:

1  Take |this|table
2  -----|----|---
3  for | an |example

Even in this scenario, the output would still be displayed as:

Formatting Text in Tables#

Text can be formatted in a table. For example, links, inline codes (words or phrases in backticks(`) only, not code blocks), and emphasis (bolding, italics). However, it does not support certain formatting syntax, such as:

• Images
• HTML tag
• Headings
• Horizontal rules
• Blockquotes
• Lists

Escaping pipe characters#

To include special characters like the pipe ( | ) in table cells, use backslash ( \| ) or HTML character codes ( | ).

1| Header 1      | Header 2            |
2| ------------- | ------------------- |
3| Data1         | Data2               |
4| Pipe \| Data3 | Data4               |
5| Data5         | Another | Pipe |

Output:

Markdown Table Generators#

Table generators can be very useful for creating large and complex tables as it can be difficult and error-prone to format them manually. To make the job easier, here are some online Markdown table generators you can use:

1. TableConvert.com: This tool can convert data from various formats such as CSV, JSON, and Excel into Markdown tables. It’s free to use.
2. TablesGenerator.com: This website offers a user-friendly interface for creating tables visually and generating Markdown code. It’s also free.
3. Ascii Table Generator: Here, you can create ASCII-styled tables that can be used in Markdown format.
4. Table to Markdown: This tool can convert HTML tables to Markdown format.

Footnotes#

Footnotes allow you to add notes and reference them while keeping your content organized and not disrupting the reader’s flow. When creating footnotes in Markdown, the process is straightforward.

Add a caret symbol (^) in a square bracket[] followed by a number or word. Add the footnote using another caret and number inside brackets with a colon and text ([^1]: My footnote.) This method allows you to add notes and references without cluttering the body of the document.

Readers can click the link to jump to the content of the footnote at the bottom of the page.

Examples:

1  This is a footnote[^1]and this too is another footnote[^2]
2  [^1]: This is the reference to the foot note
3  [^2]:this is another reference

The output will look like this:

The footnotes will be displayed at the bottom of the page, allowing us to easily access them by scrolling or clicking on the specific footnote.

Here is another example using a word as a footnote identifier:

1  Regular exercise is known to boost overall health, including improving mood and energy levels[^1].
2  Even just a short daily walk can make a big difference[^bignote].
3
4
5  [^1]:Example: Exercise releases endorphins, which are natural mood lifters.
6  [^bignote]: A 30-minute walk each day can improve cardiovascular health. It’s a simple habit that can also help with weight management, reduce stress, and increase overall fitness. Even if you have a busy schedule, fitting in a quick walk can lead to significant long-term benefits

The output will look like this:

📝 Note: Make sure to place the footnote identifier directly after the word without a space because it’ll help avoid formatting issues.

Code Blocks#

Code blocks are used to display multiple lines of code, and it ensures that formatting is intact. You can create code blocks in different ways in markdown.

Inline Code Block:#

To create an inline code block, use backticks (`) around the code. This is useful for creating short code snippets within a sentence just like in the example below.

1  To print "Hello, World!" in Python, use the command `print("Hello, World!")`.

Output:

Fenced Code Block#

This is also known as a multi-line code block; it is used to create code blocks without indenting. To create this, use three backticks (```) before and after the code block.

Example:

1```
2  {
3    'firstName':'James';
4    'lastName':'jakes';
5    'age': 30;
6  }
7```

Output:

1{
2  'firstName':'James';
3  'lastName':'jakes';
4  'age': 30;
5}

To improve readability, add a blank line before and after code blocks.

To display triple backticks in a fenced code block, you can wrap them inside four backticks(````)

1  ````
2    ```
3      {
4        'firstName':'James';
5        'lastName':'jakes';
6        'age': 30;
7      }
8    ```
9  ````

Output:

1  ```
2    {
3      'firstName':'James';
4      'lastName':'jakes';
5      'age': 30;
6    }
7  ```

Indented Code Block#

you can also create a code block by indenting each line with four spaces or a tab.

Example:

1[tab] <Html>
2[tab] <Html>
3[tab] <Html>
4[tab] <Html>

Output:

Because of the tab before each line, it would be rendered as a code block without you having to use backticks

<Html>
<Html>
<Html>
<Html>

Note: if you don’t put spaces before the code. The code will not be rendered; you’ll get a black space.

Syntax Highlighting#

Syntax highlighting adds color and style to your code to make it more readable. When adding syntax highlighting, specify the programming language next to the backticks before the fenced code block.

Example:

1```javascript
2function greet(name) {
3  if (name) {
4    console.log(`Hello, ${name}!`);
5  } else {
6    console.log("Hello, world!");
7  }
8}
9```

The rendered output would be:

1function greet(name) {
2  if (name) {
3    console.log(`Hello, ${name}!`);
4  } else {
5    console.log("Hello, world!");
6  }
7}

And this is it without syntax highlighting:

1function greet(name) {
2  if (name) {
3    console.log(`Hello, ${name}!`);
4  } else {
5    console.log("Hello, world!");
6  }
7}

Highlighting#

Highlighting a text emphasizes a word. To highlight in Markdown, put the text between two equal symbols ==

For example:

    This ==text== is ==highlighted.==

Output:

📝Note: There should be no space between the equal signs and text; otherwise, the equal signs will be treated as text

Not all markdown processors support Highlight, but if your markdown editor supports HTML, you can use the <mark> HTML tag.

This text is not <mark>important<mark> it is just for an <mark>example<mark>

The output would be the same.

Heading IDs#

In Markdown, you can create a heading with a custom ID by using curly braces {} immediately after the heading text. This ID can be used for linking directly to that section within the document.

Example:

## My Heading {#custom-id}

Output:

Linking to Heading IDs#

Once a heading has an ID, you can create a link that jumps to that heading within the same document.

[Go to Custom Section](#custom-id)

Rendered:
    Go to Custom Section
When you click this link, it will take you directly to the heading you created earlier with the ID custom-id.

This allows you to create internal links within your Markdown document, directing readers to specific sections.

Multiple Headings with IDs#

You can add IDs to multiple headings throughout your document for easy navigation.

1## Table of content
2  ### Introduction {#introduction}
3  ### Features {#features}
4  ### Conclusion {#conclusion}

You can create links to these sections like this:

1## Table of content
2- [Introduction](#introduction)
3- [Features](#features)
4- [Conclusion](#conclusion)

This is what you’ll get as your output.

URL Linking#

In Markdown, URLs are automatically converted into clickable links when written as plain text. You don’t need to add any special formatting—include the full URL, and it will be recognized as a link.

Example:

     https://technicalwritingmp.com/

Output:

The output would look like this:
     https://technicalwritingmp.com/

You may deactivate automated URL linking and prevent the link from being clickable by indicating the URL with a code. In other words, enclose it in backticks.

     https://technicalwritingmp.com/

External Links#

The markdown for external links is the same for internal links, except you use the full URL

Example:

     [This is an external link to Google ](https://google.com/)

This is displayed as:

Task Lists#

Task lists are useful for creating checklists/to-do lists. For each task, use a hyphen (-) for the list item and space before typing. Insert Checkbox Syntax: an incomplete task is square brackets with a space ([ ]), and a completed one will use the same area but with x instead of any space (e.g. [x]).

Examples:

• Incomplete Task

1- [ ] Task 1
2- [ ] Task 2
3- [ ] Task 3

Output:

• Completed Task

1  - [x] Task 1
2  - [x] Task 2
3  - [x] Task 3

Output:

Definition Lists#

A definition list can used to create a collection of terms and their meanings. This is somewhat like a dictionary. To create a definition list, write the term on one line, then a space and colon before writing its definition below.

The result shows the term in bold and the definition in regular text.

Keep in mind that not all Markdown processors render definition lists. You will need to double-check whether your Markdown editor supports them.

Example:

1  First Term
2  : This is the definition of the first term
3
4  Second Term
5  : This is the definition of the second term
6
7Third Term
8  : This is the definition of the third term
9  : This is another definition of the third term.

Note: Ensure that there is a space between the colon and the definition

Rendered:

Strikethrough#

The strikethrough syntax is just two tilde signs (~) before and after the text. There should be no spaces before or after the two tildes.

~~This is an example of a strikethrough text~~

Output:

Horizontal Rule#

You can create horizontal rules in markdown in three ways:

• three asterisks(***)
• three hyphens (---)
• three underscore (---)

The output of all three methods is the same.

Example:

1    ***
2    with three asterisk
3    ---
4    with three hyphens
5    ___
6    with three underscores

Output:

Superscript#

Some Markdown processors can handle superscripts, which are particularly useful for footnotes and other similar features, but Markdown doesn’t support it natively. However, you use a caret symbol (^) before and after a character to create a superscript.
An alternative option is to use the HTML tag <sup>..<sup>, which is more popular and widely recognized.

Example:

Y = X^2^

Output:

With the HTML tag, it would be y = x<sup>2<sup>, and it will display the same output as above.

Subscript#

Similar to superscripts, not all markdown processors support subscripts. you use a tilde symbol (~) before and after a character to create a superscript.

Example:

Y = X~2~

Output:

With the HTML tag, it would be y = x<sub>2<sub>, and it will display the same output above.

Emoji#

Emojis give your Markdown documents a fun and expressive touch. You can use them to set the tone, point out key ideas, or make your content more engaging. Adding emojis to Markdown is easy.
There are two methods to add emoji to your markdown documents.

Copying and pasting from sources like Emojipedia

For example
Copying and pasting 🔧 directly into your Markdown document is as simple as:

Here's how you can fix the issue: 🔧

Output:

Using Emoji Shortcodes In this case, you need to know the right shortcode.

For example:

• Typing :smile: will display as 😄.
• Typing :thumbsup: will display as 👍.
• Typing :rocket: will display as 🚀.

A lot of Markdown processors work with these shortcodes, but keep in mind that emoji shortcodes can differ depending on the application. To ensure everything works as it should, check out the documentation for your particular Markdown application for more details.

GitHub’s recommended shortcode cheat sheet lists numerous emoji shortcodes.

Mathematical Expression#

Markdown allows you to include mathematical expressions both inline and as standalone blocks using LaTeX syntax. Here’s a guide on how to use both types:

Inline Math#

You can insert short mathematical expressions within a line of text using single dollar signs ($).

Example:

     This is an inline math example: $E = mc^2$

Output:

    This is an inline math example: \( E = mc^2 \)

Block Math#

For larger, standalone mathematical expressions, use double dollar signs ($$) to create block math. These are usually centered on the page and are easier to read for more complex equations.

Example:

1    The quadratic formula:
2
3    $$
4    x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
5    $$

Output: