Michael Hall

Markdown Syntax Reference

Overview

This document is a collection of helpful Markdown syntax I’ve gathered for writing Markdown documents. It’s intended to provide useful tips and tricks, and will continue to evolve over time. It will serve as a quick reference for finding Markdown syntax.

Useful Links

• Markdown Guide – An open-source reference guide that explains how to use Markdown.
• W3Schools CSS Tutorial – A tutorial that teaches CSS from basic to advanced concepts.
• W3Schools HTML Tutorial – A tutorial to learn HTML fundamentals and beyond.

Quick Reference

Horizontal Spaces

Dashes

Depending on the engine, the double or triple hyphen may render as an En dash or Em dash.

Layout Tricks

Block Quotes

• To create a block quote with indentation, use the > symbol only on the first line. For subsequent lines, indent them to match the desired level, but do not repeat the >.

  • Markdown code:

      > Line one  
        Line two  
        Line three
    

  • Result (with indentation applied):

    Line one
    Line two
    Line three

• HTML markup for block quotes:

  • HTML code:

    <blockquote>
    Line one <br>
    Line two <br>
    Line three
    </blockquote>
    

  • Result:

    Line one
    Line two
    Line three

Highlighting Text

• Markdown Guide → Highlight

Highlight text using the <mark> tag:

• Default styling:
  • <mark>Highlighted text</mark>
  • Highlighted text
• With rounded corners and padding:
  • <mark style="border-radius: 5px; padding: 2px;">Highlighted text</mark>
  • Highlighted text
• Custom background – Yellow:
  • <mark style="background-color: yellow;">Highlighted text</mark>
  • Highlighted text
• Custom background – Burlywood:
  • <mark style="background-color: burlywood;">Highlighted text</mark>
  • Highlighted text

You can alternatively also use the <span> tag and specify a background color:

• Simple:
  • <span style="background-color: yellow;">Highlighted text</span>
  • Highlighted text
• With rounded corners and padding:
  • <span style="background-color: yellow; border-radius: 5px; padding: 2px;">Highlighted text</span>
  • Highlighted text

For reference, here are some quick tags for copy-paste:

^† The style class definitions for these tags are the following:

<style>
  .todo { background-color: yellow; border-radius: 5px; padding: 2px; }
  .fixme { background-color: tomato; border-radius: 5px; padding: 2px; }
  .fillin { background-color: mediumturquoise; border-radius: 5px; padding: 2px; }
  .note { background-color: lightblue; border-radius: 5px; padding: 2px; }
  .review { background-color: violet; border-radius: 5px; padding: 2px; }
  .draft { background-color: peachpuff; border-radius: 5px; padding: 2px; }
  .optional { background-color: palegreen; border-radius: 5px; padding: 2px; }
  .move { background-color: khaki; border-radius: 5px; padding: 2px; }
  .rewrite { background-color: lightsalmon; border-radius: 5px; padding: 2px; }
</style>

Creating a colored box

• Using div for a block-level colored box:
  • Text: <div style="width: 30px; height: 15px; background-color: lime; border-radius: 3px;"></div>
  • Text:
• Using span to inline display:
  • Text: <span style="display: inline-block; width: 30px; height: 15px; background-color: lime; border-radius: 3px;"></span>
  • Text:

Advanced Features

How to use CSS in Markdown

• CSS How To
• Markdown - Styles

There are two main ways to insert CSS into Markdown:

• Inline CSS:
  • Quick and easy to do inline. But it can become messy if it gets large, or is repeated many times with different parts of the Markdown document.
  • <div style="background-color: wheat; padding: 20px; border-radius: 20px; text-align: center; font-family: serif; font-size:25px; width: 200px">Hello World!</div>
  • Hello World!
• Internal CSS:
  • Create CSS classes that can be reused in the Markdown document. Good if used a lot.
  • Add a <style> tag anywhere in the Markdown document and write CSS code within the tag.

  • <style>
        .custom-class-example {
            background-color: wheat;
            padding: 20px;
            text-align: center;
            font-family: serif;
            font-size:25px;
            width: 200px;
        }
    </style>
    

  • <div class="custom-class-example">Hello World!</div>
  • Hello World!
  • Alternatively you can create a new tag as well:

    <style>
        custom-tag-example {
            display: inline-block;            
            background-color: wheat;
            padding: 20px;
            border-radius: 20px;
            text-align: center;
            font-family: serif;
            font-size:25px;
            width: 200px;
        }
    </style>
    

  • <custom-tag-example>Hello World!</custom-tag-example>
  • Hello World!

How to write LaTeX math equations

LaTeX is integrated using the KaTeX library. This is done by loading a CSS stylesheet and scripts in the <head> tag of the HTML page as described in the docs. Below is a version of the code:

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
    
    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
    
    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
</html>

Then write the math equations using the following syntax:

• Inline equations:
  • $ y[n] = b_{0}x[n] + b_{1}x[n-1] + ... + b_{N}x[n-N] = \sum_{i=0}^{{N}} b_{i}. x[n-i] $
  • $ y[n] = b_{0}x[n] + b_{1}x[n-1] + … + b_{N}x[n-N] = \sum_{i=0}^{{N}} b_{i}. x[n-i] $
• Display equations:
  • $$ y[n] = b_{0}x[n] + b_{1}x[n-1] + ... + b_{N}x[n-N] = \sum_{i=0}^{{N}} b_{i}. x[n-i] $$
  • $$ y[n] = b_{0}x[n] + b_{1}x[n-1] + ... + b_{N}x[n-N] = \sum_{i=0}^{{N}} b_{i}. x[n-i] $$

Conventions

Last updated: April 16, 2025