Markdown Editing Guide

The md0 CMS editor provides a visual, WYSIWYG interface for editing markdown content while maintaining full markdown compatibility. This guide covers all editor features and best practices.

Editor Interface

The editor consists of three main areas:

Frontmatter Panel: Form-based frontmatter editing (left or top)
Content Editor: Visual markdown editing area (center)
Preview Panel: Live markdown preview (right, optional)

Basic Formatting

Text Formatting

Bold text:

Toolbar: Click Bold button
Keyboard: Cmd/Ctrl + B
Markdown: **bold text**

Italic text:

Toolbar: Click Italic button
Keyboard: Cmd/Ctrl + I
Markdown: *italic text*

Strikethrough:

Toolbar: Click Strikethrough button
Keyboard: Cmd/Ctrl + Shift + X
Markdown: ~~strikethrough~~

Inline code:

Toolbar: Click Code button
Keyboard: Cmd/Ctrl + E
Markdown: `inline code`

Headings

Use toolbar dropdown or keyboard shortcuts:

# Heading 1 (Cmd/Ctrl + Alt + 1)

## Heading 2 (Cmd/Ctrl + Alt + 2)

### Heading 3 (Cmd/Ctrl + Alt + 3)

#### Heading 4 (Cmd/Ctrl + Alt + 4)

##### Heading 5 (Cmd/Ctrl + Alt + 5)

###### Heading 6 (Cmd/Ctrl + Alt + 6)

Best practices:

Use H1 for document title (one per page)
Use H2 for main sections
Use H3-H6 for subsections
Don't skip heading levels

Lists

Unordered lists:

Toolbar: Click Bullet List button
Keyboard: Cmd/Ctrl + Shift + 8
Markdown:

- Item 1
- Item 2
  - Nested item
  - Another nested item
- Item 3

Ordered lists:

Toolbar: Click Numbered List button
Keyboard: Cmd/Ctrl + Shift + 7
Markdown:

1. First item
2. Second item
   1. Nested item
   2. Another nested item
3. Third item

Task lists:

- [ ] Incomplete task
- [x] Completed task
- [ ] Another task

Links

Add a link:

Select text
Click Link button or press Cmd/Ctrl + K
Enter URL
Click Insert

Markdown output:

[Link text](https://example.com)
[Link with title](https://example.com "Title")

Email links:

[Email me](mailto:user@example.com)

Anchor links:

[Jump to section](#section-name)

Images

Insert image:

Click Image button
Choose upload method:
- Upload from computer
- Enter image URL
- Select from media library

Markdown output:

![Alt text](/path/to/image.jpg)
![Alt text with title](/path/to/image.jpg "Image title")

Image with link:

[![Alt text](/image.jpg)](https://example.com)

Advanced Features

Code Blocks

Insert code block:

Click Code Block button
Select language
Paste or type code

Markdown syntax:

```javascript
function hello() {
  console.log("Hello, world!");
}
```

Supported languages:

JavaScript, TypeScript
Python, Ruby, PHP
HTML, CSS, SCSS
Bash, Shell
JSON, YAML, TOML
Markdown, MDX
And many more...

Inline code:

Use `const` instead of `var` in JavaScript.

Blockquotes

Add blockquote:

Toolbar: Click Blockquote button
Keyboard: Cmd/Ctrl + Shift + B

Markdown:

> This is a blockquote.
> It can span multiple lines.

> Blockquotes can contain **formatting**.

Nested blockquotes:

> First level
>
> > Second level
> >
> > > Third level

Tables

Insert table:

Click Table button
Select rows and columns
Fill in content

Markdown syntax:

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

Table alignment:

| Left | Center | Right |
| :--- | :----: | ----: |
| L1   |   C1   |    R1 |
| L2   |   C2   |    R2 |

Table editing:

Click cell to edit
Tab to move to next cell
Shift+Tab to move to previous cell
Add/remove rows and columns via context menu

Horizontal Rules

Create visual dividers:

---

---

Rich Content

Embedded Content

YouTube videos:

[![Video Title](https://img.youtube.com/vi/VIDEO_ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

CodePen embeds:

<iframe
  height="300"
  style="width: 100%;"
  scrolling="no"
  title="Pen Title"
  src="https://codepen.io/username/embed/PenID?default-tab=result"
></iframe>

Tweets (via screenshot or link):

[View tweet](https://twitter.com/user/status/123456789)

Footnotes

Add footnotes for references:

Here's a statement[^1] that needs citation.

Another statement[^2] with a reference.

[^1]: This is the first footnote.
[^2]: This is the second footnote.

Definition Lists

Term 1
: Definition 1

Term 2
: Definition 2a
: Definition 2b

Frontmatter Editing

Form-Based Editing

The frontmatter panel shows fields defined in your schema:

String fields: Text input
Text fields: Textarea
Number fields: Number input
Boolean fields: Toggle switch
Date fields: Date picker
Select fields: Dropdown
Array fields: Tag input
Image fields: Upload button

Manual YAML Editing

Switch to raw YAML mode for advanced editing:

---
title: "My Post Title"
date: 2024-01-15
tags:
  - tutorial
  - guide
featured: true
author:
  name: "Jane Doe"
  email: "jane@example.com"
---

Editor Shortcuts

Keyboard Shortcuts

Text Formatting:

Bold: Cmd/Ctrl + B
Italic: Cmd/Ctrl + I
Code: Cmd/Ctrl + E
Strikethrough: Cmd/Ctrl + Shift + X

Headings:

H1: Cmd/Ctrl + Alt + 1
H2: Cmd/Ctrl + Alt + 2
H3: Cmd/Ctrl + Alt + 3
H4-H6: Continue pattern

Lists:

Bullet list: Cmd/Ctrl + Shift + 8
Numbered list: Cmd/Ctrl + Shift + 7

Other:

Link: Cmd/Ctrl + K
Blockquote: Cmd/Ctrl + Shift + B
Undo: Cmd/Ctrl + Z
Redo: Cmd/Ctrl + Shift + Z

Document:

Save: Cmd/Ctrl + S
Preview: Cmd/Ctrl + P

Markdown Shortcuts

Type these and press Space for instant formatting:

# + Space → Heading 1

## + Space → Heading 2

- - Space → Bullet list

1. - Space → Numbered list
     > - Space → Blockquote
     >   [] + Space → Task list

```+ Language + Enter → Code block

```

Live Preview

Enable Preview

Toggle preview panel:

Click Preview button in toolbar
Keyboard: Cmd/Ctrl + P

Preview modes:

Side-by-side: Editor and preview visible
Preview only: Full-screen preview
Editor only: Full-screen editing

Preview Features

Real-time rendering
Scroll sync between editor and preview
Code syntax highlighting
Table rendering
Image previews
Link highlighting

Content Organization

Using Headings for Structure

Good structure:

# Main Title (H1)

Introduction paragraph...

## First Section (H2)

Section content...

### Subsection (H3)

Subsection content...

## Second Section (H2)

More content...

Many markdown processors auto-generate TOC from headings:

# Table of Contents

- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Advanced Topics](#advanced-topics)

Best Practices

Writing Tips

Be concise:

Use short paragraphs (2-4 sentences)
Break up long sections
Use lists for multiple points
Add headings for navigation

Use visual elements:

Add images to break up text
Use code blocks for examples
Create tables for comparisons
Add blockquotes for emphasis

Format for readability:

Use bold for important terms
Use inline code for technical terms
Add blank lines between sections
Use horizontal rules sparingly

Markdown Quality

Consistent formatting:

# Good

**bold** _italic_ `code`

# Bad (mixing styles)

**bold** _italic_ `code`

Proper list indentation:

# Good

- Item 1
  - Nested item
  - Another nested

# Bad

- Item 1
  - Nested item (too much indent)

Clean links:

# Good

[Clear link text](https://example.com)

# Avoid

[Click here](https://example.com)
[Read more](https://example.com)

Troubleshooting

Formatting Not Working

Check:

Toolbar buttons are enabled
Cursor is in correct position
No conflicting markdown syntax
Editor is not in read-only mode

Images Not Displaying

Check:

Image path is correct
Image file exists in repository
Image URL is accessible
Image file size isn't too large

Preview Not Updating

Check:

Preview mode is enabled
Browser is up to date
No JavaScript errors
Clear cache and reload

Accessibility

Alt Text for Images

Always add descriptive alt text:

# Good

![Screenshot of md0 CMS dashboard showing collections](/dashboard.png)

# Bad

![image](/dashboard.png)

Semantic Headings

Use proper heading hierarchy:

# Good

# Page Title

## Section

### Subsection

# Bad

# Page Title

### Section (skipped H2)

##### Subsection (skipped H3-H4)

Link Text

Use descriptive link text:

# Good

Read the [markdown syntax guide](/docs/markdown-syntax)

# Bad

[Click here](/docs/markdown-syntax) for markdown syntax

Next Steps

Media Management - Manage images and files
GitHub Sync - Understand how changes sync
Integration Guides - Use content in your site

Editor Interface

The editor consists of three main areas:

Frontmatter Panel: Form-based frontmatter editing (left or top)
Content Editor: Visual markdown editing area (center)
Preview Panel: Live markdown preview (right, optional)

Basic Formatting

Text Formatting

Bold text:

Toolbar: Click Bold button
Keyboard: Cmd/Ctrl + B
Markdown: **bold text**

Italic text:

Toolbar: Click Italic button
Keyboard: Cmd/Ctrl + I
Markdown: *italic text*

Strikethrough:

Toolbar: Click Strikethrough button
Keyboard: Cmd/Ctrl + Shift + X
Markdown: ~~strikethrough~~

Inline code:

Toolbar: Click Code button
Keyboard: Cmd/Ctrl + E
Markdown: `inline code`

Headings

Use toolbar dropdown or keyboard shortcuts:

# Heading 1 (Cmd/Ctrl + Alt + 1)

## Heading 2 (Cmd/Ctrl + Alt + 2)

### Heading 3 (Cmd/Ctrl + Alt + 3)

#### Heading 4 (Cmd/Ctrl + Alt + 4)

##### Heading 5 (Cmd/Ctrl + Alt + 5)

###### Heading 6 (Cmd/Ctrl + Alt + 6)

Best practices:

Use H1 for document title (one per page)
Use H2 for main sections
Use H3-H6 for subsections
Don't skip heading levels

Lists

Unordered lists:

Toolbar: Click Bullet List button
Keyboard: Cmd/Ctrl + Shift + 8
Markdown:

- Item 1
- Item 2
  - Nested item
  - Another nested item
- Item 3

Ordered lists:

Toolbar: Click Numbered List button
Keyboard: Cmd/Ctrl + Shift + 7
Markdown:

1. First item
2. Second item
   1. Nested item
   2. Another nested item
3. Third item

Task lists:

- [ ] Incomplete task
- [x] Completed task
- [ ] Another task

Links

Add a link:

Select text
Click Link button or press Cmd/Ctrl + K
Enter URL
Click Insert

Markdown output:

[Link text](https://example.com)
[Link with title](https://example.com "Title")

Email links:

[Email me](mailto:user@example.com)

Anchor links:

[Jump to section](#section-name)

Images

Insert image:

Click Image button
Choose upload method:
- Upload from computer
- Enter image URL
- Select from media library

Markdown output:

![Alt text](/path/to/image.jpg)
![Alt text with title](/path/to/image.jpg "Image title")

Image with link:

[![Alt text](/image.jpg)](https://example.com)

Advanced Features

Code Blocks

Insert code block:

Click Code Block button
Select language
Paste or type code

Markdown syntax:

```javascript
function hello() {
  console.log("Hello, world!");
}
```

Supported languages:

JavaScript, TypeScript
Python, Ruby, PHP
HTML, CSS, SCSS
Bash, Shell
JSON, YAML, TOML
Markdown, MDX
And many more...

Inline code:

Use `const` instead of `var` in JavaScript.

Blockquotes

Add blockquote:

Toolbar: Click Blockquote button
Keyboard: Cmd/Ctrl + Shift + B

Markdown:

> This is a blockquote.
> It can span multiple lines.

> Blockquotes can contain **formatting**.

Nested blockquotes:

> First level
>
> > Second level
> >
> > > Third level

Tables

Insert table:

Click Table button
Select rows and columns
Fill in content

Markdown syntax:

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

Table alignment:

| Left | Center | Right |
| :--- | :----: | ----: |
| L1   |   C1   |    R1 |
| L2   |   C2   |    R2 |

Table editing:

Click cell to edit
Tab to move to next cell
Shift+Tab to move to previous cell
Add/remove rows and columns via context menu

Horizontal Rules

Create visual dividers:

---

---

Rich Content

Embedded Content

YouTube videos:

[![Video Title](https://img.youtube.com/vi/VIDEO_ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

CodePen embeds:

<iframe
  height="300"
  style="width: 100%;"
  scrolling="no"
  title="Pen Title"
  src="https://codepen.io/username/embed/PenID?default-tab=result"
></iframe>

Tweets (via screenshot or link):

[View tweet](https://twitter.com/user/status/123456789)

Footnotes

Add footnotes for references:

Here's a statement[^1] that needs citation.

Another statement[^2] with a reference.

[^1]: This is the first footnote.
[^2]: This is the second footnote.

Definition Lists

Term 1
: Definition 1

Term 2
: Definition 2a
: Definition 2b

Frontmatter Editing

Form-Based Editing

The frontmatter panel shows fields defined in your schema:

String fields: Text input
Text fields: Textarea
Number fields: Number input
Boolean fields: Toggle switch
Date fields: Date picker
Select fields: Dropdown
Array fields: Tag input
Image fields: Upload button

Manual YAML Editing

Switch to raw YAML mode for advanced editing:

---
title: "My Post Title"
date: 2024-01-15
tags:
  - tutorial
  - guide
featured: true
author:
  name: "Jane Doe"
  email: "jane@example.com"
---

Editor Shortcuts

Keyboard Shortcuts

Text Formatting:

Bold: Cmd/Ctrl + B
Italic: Cmd/Ctrl + I
Code: Cmd/Ctrl + E
Strikethrough: Cmd/Ctrl + Shift + X

Headings:

H1: Cmd/Ctrl + Alt + 1
H2: Cmd/Ctrl + Alt + 2
H3: Cmd/Ctrl + Alt + 3
H4-H6: Continue pattern

Lists:

Bullet list: Cmd/Ctrl + Shift + 8
Numbered list: Cmd/Ctrl + Shift + 7

Other:

Link: Cmd/Ctrl + K
Blockquote: Cmd/Ctrl + Shift + B
Undo: Cmd/Ctrl + Z
Redo: Cmd/Ctrl + Shift + Z

Document:

Save: Cmd/Ctrl + S
Preview: Cmd/Ctrl + P

Markdown Shortcuts

Type these and press Space for instant formatting:

# + Space → Heading 1

## + Space → Heading 2

- - Space → Bullet list

1. - Space → Numbered list
     > - Space → Blockquote
     >   [] + Space → Task list

```+ Language + Enter → Code block

```

Live Preview

Enable Preview

Toggle preview panel:

Click Preview button in toolbar
Keyboard: Cmd/Ctrl + P

Preview modes:

Side-by-side: Editor and preview visible
Preview only: Full-screen preview
Editor only: Full-screen editing

Preview Features

Real-time rendering
Scroll sync between editor and preview
Code syntax highlighting
Table rendering
Image previews
Link highlighting

Content Organization

Using Headings for Structure

Good structure:

# Main Title (H1)

Introduction paragraph...

## First Section (H2)

Section content...

### Subsection (H3)

Subsection content...

## Second Section (H2)

More content...

Many markdown processors auto-generate TOC from headings:

# Table of Contents

- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Advanced Topics](#advanced-topics)

Best Practices

Writing Tips

Be concise:

Use short paragraphs (2-4 sentences)
Break up long sections
Use lists for multiple points
Add headings for navigation

Use visual elements:

Add images to break up text
Use code blocks for examples
Create tables for comparisons
Add blockquotes for emphasis

Format for readability:

Use bold for important terms
Use inline code for technical terms
Add blank lines between sections
Use horizontal rules sparingly

Markdown Quality

Consistent formatting:

# Good

**bold** _italic_ `code`

# Bad (mixing styles)

**bold** _italic_ `code`

Proper list indentation:

# Good

- Item 1
  - Nested item
  - Another nested

# Bad

- Item 1
  - Nested item (too much indent)

Clean links:

# Good

[Clear link text](https://example.com)

# Avoid

[Click here](https://example.com)
[Read more](https://example.com)

Troubleshooting

Formatting Not Working

Check:

Toolbar buttons are enabled
Cursor is in correct position
No conflicting markdown syntax
Editor is not in read-only mode

Images Not Displaying

Check:

Image path is correct
Image file exists in repository
Image URL is accessible
Image file size isn't too large

Preview Not Updating

Check:

Preview mode is enabled
Browser is up to date
No JavaScript errors
Clear cache and reload

Accessibility

Alt Text for Images

Always add descriptive alt text:

# Good

![Screenshot of md0 CMS dashboard showing collections](/dashboard.png)

# Bad

![image](/dashboard.png)

Semantic Headings

Use proper heading hierarchy:

# Good

# Page Title

## Section

### Subsection

# Bad

# Page Title

### Section (skipped H2)

##### Subsection (skipped H3-H4)

Link Text

Use descriptive link text:

# Good

Read the [markdown syntax guide](/docs/markdown-syntax)

# Bad

[Click here](/docs/markdown-syntax) for markdown syntax

Next Steps

Media Management - Manage images and files
GitHub Sync - Understand how changes sync
Integration Guides - Use content in your site

md0 CMS

Getting Started

Guides

Integrations

Examples

Editor Interface

Basic Formatting

Text Formatting

Headings

Lists

Links

Images

Advanced Features

Code Blocks

Blockquotes

Tables

Horizontal Rules

Rich Content

Embedded Content

Footnotes

Definition Lists

Frontmatter Editing

Form-Based Editing

Manual YAML Editing

Editor Shortcuts

Keyboard Shortcuts

Markdown Shortcuts

Live Preview

Enable Preview

Preview Features

Content Organization

Using Headings for Structure

Table of Contents

Best Practices

Writing Tips

Markdown Quality

Troubleshooting

Formatting Not Working

Images Not Displaying

Preview Not Updating

Accessibility

Alt Text for Images

Semantic Headings

Link Text

Next Steps

Related Documentation

md0 CMS

Getting Started

Guides

Integrations

Examples

Markdown Editing Guide

Editor Interface

Basic Formatting

Text Formatting

Headings

Lists

Links

Images

Advanced Features

Code Blocks

Blockquotes

Tables

Horizontal Rules

Rich Content

Embedded Content

Footnotes

Definition Lists

Frontmatter Editing

Form-Based Editing

Manual YAML Editing

Editor Shortcuts

Keyboard Shortcuts

Markdown Shortcuts

Live Preview

Enable Preview

Preview Features

Content Organization

Using Headings for Structure