Markdown

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~~ (Deprecated, use MDX Callout components instead)
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

Markdown Callouts are deprecated

Markdown Callouts cause many formatting issues, please use MDX Callout components instead.

Callouts highlight information:

<!-- Markdown Callouts are deprecated, please use MDX Callout components instead -->

:::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.

JSX Support

JSX is supported in Quotion, allowing you to use HTML-like syntax within your notes.

Element styles

<div style={{ color: 'red', fontSize: '20px' }}>
  This text is red and larger.
</div>

Details/Summary

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

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

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>

Style and Script

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

<style>
  .red {
    color: red;
  }
</style>
{/* Use it in className: <div className="red">This text is red.</div> */}

<script>
  console.log('This script runs when the post is loaded.');
</script>

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

Quotion provides built-in MDX components to enhance your posts.

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!

Markdown

On this page