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:


Image with link:
[](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:
---
or
---
Rich Content
Embedded Content
YouTube videos:
[](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...
Table of Contents
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

# Bad

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