Skip to content
PutlerPutlerSearch

Writing basics

Markdown for people who know HTML. The shared vocabulary. Headings.

Markdown in one table

If you know basic HTML, you already know Markdown. Beside each HTML tag, here is what you write instead:

You know You write
<h2>Title</h2> ## Title
<h3>Title</h3> ### Title
<p> a blank line between paragraphs
<strong> **bold**
<em> *italic*
<mark> ==highlighted==
<a href="/pricing/">link</a> [link](/pricing/)
<img src="https://media.putler.com/chart.webp" alt="Chart"> ![Chart](/media/chart.webp)
<ul><li> - item
<ol><li> 1. item
<blockquote> > quote
<hr> ---

HTML still works whenever you need it. Markdown is just quicker to type.

Directives in one paragraph

A directive is a <div> with a name. Open it with :::name on its own line, put your content inside, and close it with ::: on its own line. The words in { } after the name are like its class list:

:::tip{side}
Keep this short and relevant.
:::

This renders <aside class="callout tip side">Keep this short and relevant.</aside>.

A box inside a box gets one more colon on the outside (::::row around :::col), the same way nested <div> tags each need their own closing tag:

::::row
:::col
First column content.
:::
:::col
Second column content.
:::
::::

Headings make the outline

Use ## for sections and ### for subsections. Once a post has two or more headings, the table of contents appears by itself in the sidebar.

Never type #, because the post’s title is already the page’s only H1.

Write headings that make sense in a table of contents: “Pricing” or “Three Common Gotchas” work well; generic labels like “More” or “Details” don’t.

Check marks

Type {yes} for , {no} for , and {partial} for . Use {na} or {dash} when something is (not applicable). {arrow} for an and {doc} for .

These icons are inline and they work everywhere:

  • In running text: “Supported on mobile: .”
  • In lists:
    • Works out of the box
    • Requires basic setup
    • Not available on the free plan
  • In table cells: type bare yes, no, or partial or put them in {} if you need additional text in the same cell.

Steps

Use when: Numbered sequence of actions to follow.

  1. Connect your WordPress store.
  2. Select the recovery email template.
  3. Activate the workflow and test sending.
:::steps
1. Connect your WordPress store.
2. Select the recovery email template.
3. Activate the workflow and test sending.
:::
Do and don't

Do: use for strictly sequential instructions. Don’t: use when the order of actions does not matter.

Check list

Use when: Lists with visual status marks.

  • Primary database optimization completed
    • Indexes rebuilt on postmeta table
    • Expired transients purged
  • Caching layer verification
    • Object cache active via Redis
    • Cart fragments bypassed on catalog pages
  • Zero legacy payment gateways active
  • Zero legacy payment gateways active
  • Zero legacy payment gateways active
- {yes} Primary database optimization completed
  - Indexes rebuilt on postmeta table
  - Expired transients purged
- {partial} Caching layer verification
  - Object cache active via Redis
  - {no} Cart fragments bypassed on catalog pages
- {na} Zero legacy payment gateways active
- {arrow} Zero legacy payment gateways active
- {doc} Zero legacy payment gateways active
Do and don't

Do: use for auditing requirements or feature comparison checklists. Don’t: use as a replacement for plain bullet points.

FAQ

Use when: Answers to common reader questions.

How do you count monthly orders?

Across every connected source, on a rolling thirty day window.

Can I cancel any time?

Yes, you can downgrade or cancel directly from your account page.

:::faq
### How do you count monthly orders?
Across every connected source, on a rolling thirty day window.

### Can I cancel any time?
Yes, you can downgrade or cancel directly from your account page.
:::

Google shows these as FAQ results, automatically.

Do and don't

Do: use ### for each question. Don’t: format questions as bold text or ##.