Newsletter is now available!
Quotion

Markdown & MDX

Quotion enhances Apple Notes by enabling Markdown support. Write notes with Markdown and export them as Markdown files.

New to Markdown? Check out the GitHub Markdown syntax.

Write Notes with Markdown

Markdown in Quotion enhances Apple Notes with more formatting options:

  • Callouts
  • Additional heading styles (h4, h5, h6)
  • Code highlighting
  • Inline code
  • Horizontal rules
  • Footnotes

Example

Markdown note

Rendered result:

Markdown post

Formatting Best Practices

Avoid mixing Apple Notes formats and Markdown within the same line to prevent breaking your post.

Using Markdown and Apple Notes formats on different lines is safe. For example, a heading can use Apple Notes format, while the body text uses Markdown.

Callouts

Callouts highlight information:

:::note
This is a note.
:::
 
:::tip
This is a tip.
:::
 
:::assert
This is important information.
:::
 
:::warn
This is a warning.
:::
 
:::caution
This is a caution.
:::

Frontmatter

Frontmatter is a set of options (YAML format) that you can add to the top of your note body to control the post's behavior.

Frontmatter demo

Quotion supports === frontmatter only:

===
slug: my-post
publishAt: 2024-09-25T18:54:51+08:00
excerpt: "My awesome post"
password: "my-password"
===

Frontmatter Format

  • Place frontmatter at the top of the note body, under the title.
  • Only === frontmatter is supported. YAML frontmatter --- is not supported because Apple Notes converts --- to .

Learn more about frontmatter.

Partial HTML Support

Basic HTML is supported in Markdown:

Details/Summary

Use the <details> and <summary> tags to create collapsible content sections.

<details>
  <summary>Details</summary>
  Hidden content here.
</details>

Rendered result:

DetailsHidden content here.

iframe

Embed external content, such as YouTube videos, using <iframe>.

<!-- Find the embed code when sharing the video on platforms like YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Qw1OSKGVeIQ?si=WvXs-YTySSnbUVgI"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
></iframe>

Rendered result:

Style and Script

The style and script HTML tags customize individual post styles and scripts.

Site-wide styles and scripts can be customized with personalization.

Plan Required

Using style tags requires a Lite+ plan. Using script tags requires a Pro+ plan.

MDX Components

Use MDX components by writing the supported tags, attributes, and content, similar to HTML tags.

CallToAction

CallToAction

Call to action buttons add links or email actions to posts. They are useful for new feature announcements, contact pages, or download pages.

Attributes

  • href: Accepts HTTPS or mailto links.
  • variant: primary (default), secondary, or outline.
  • size: sm, md (default), or lg.

Export Notes as Markdown

Follow these steps to export your notes:

  • Access the Quotion dashboard.
  • Navigate to your site's dashboard.
  • Download Markdown: Click the download button for the desired note to get the Markdown file.

Export markdown

Build your blog with Apple Notes in less than 5 minutes! Try Quotion for free!

How is this guide?

On this page