Markdown Editor

Omnilib's Markdown Editor provides a live preview writing experience. As you type, formatting is applied in real-time, hiding the markdown syntax while preserving precise cursor control.

Overview

The Markdown Editor offers:

• Live preview — See formatted text as you type
• Full keyboard support — Format with shortcuts
• Interactive elements — Clickable checkboxes and links
• Mathematical formulas — LaTeX math with KaTeX
• Mermaid diagrams — Render flowcharts and sequence diagrams
• Selection actions — AI tools on any text selection
• Real-time collaboration — Remote cursors and live sync
• Security — Built-in XSS protection

Getting Started

Opening a Markdown File

Click any .md file in the sidebar, or create a new one:

1. Right-click in the sidebar
2. Select "New File"
3. Name it with a .md extension

Writing Your First Document

Start typing and see the formatting apply immediately:

# My Document

This is **bold** and this is *italic*.

- Item one
- Item two
- Item three

The formatting appears as you type, with syntax markers hidden.

Text Formatting

Inline Styles

Toggle Formatting

All formatting shortcuts toggle on and off:

1. Select text
2. Press the shortcut (e.g., Cmd+B)
3. Text becomes bold
4. Press again to remove bold

Headings

Create headings with # symbols:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Shortcuts: Cmd+Shift+1 through Cmd+Shift+4 (Ctrl+Shift+1–4 on Windows).

Lists

Bullet Lists

- First item
- Second item
  - Nested item
- Third item

Shortcut: Cmd+Shift+L (Windows: Ctrl+Shift+L)

Task Lists

- [ ] Unchecked task
- [x] Completed task

Shortcut: Cmd+Shift+T (Windows: Ctrl+Shift+T)

Task checkboxes are interactive — click to toggle. Changes update the markdown source.

Block Elements

Block Quotes

> This is a quote
> that spans multiple lines

Shortcut: Cmd+Shift+Q (Windows: Ctrl+Shift+Q)

Code Blocks

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

Code blocks display with syntax highlighting, a monospace font, and a language label.

Mermaid Diagrams

Render diagrams using Mermaid syntax:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Output A]
    B -->|No| D[Output B]
```

Flowcharts, sequence diagrams, Gantt charts, and other Mermaid diagram types are all supported. The diagram renders inline in the preview.

Mathematical Formulas

Inline Math

The equation $E = mc^2$ was discovered by Einstein.

Shortcut: Cmd+Shift+M (Windows: Ctrl+Shift+M)

Block Math

$$
\int_{a}^{b} f(x) dx = F(b) - F(a)
$$

Shortcut: Cmd+Shift+E (Windows: Ctrl+Shift+E)

Formulas render with KaTeX.

Links and Images

Links

[Link Text](https://example.com)

Shortcut: Cmd+K (Windows: Ctrl+K)

Use Cmd+Click (Windows: Ctrl+Click) to open links in a browser tab. Regular clicks do not open links.

Images

![Alt text](image-url.jpg)

Images load lazily and scale responsively.

Selection Action Toolbar

Select any text to reveal the selection action toolbar above your selection. It provides quick actions:

Voice Input

Desktop only.

Press and hold Cmd+R to dictate. The microphone activates while you hold the key and transcribes your speech into the document at the cursor position when you release. This is a push-to-talk model — audio is captured only while the key is held.

In-Editor Search and Replace

Press Cmd+F (Windows: Ctrl+F) to open the search bar inside the editor. Type to highlight matches. Available options:

Click the arrow buttons to navigate between matches. Open the replace field by clicking the expand arrow next to the search bar. Replace a single match with Enter or replace all with the Replace All button.

Export

Export to PDF

Click Export to PDF in the toolbar to render the document and open a save dialog. The PDF reflects the current preview formatting including math, diagrams, and code blocks.

Publish to Community

Click Publish in the toolbar to share the document as a post on the Omnilib Community. A dialog lets you set a title, choose a category, and preview the post before publishing.

Real-Time Collaboration

When multiple collaborators have the same file open, remote cursors appear as colored carets with name labels. Text insertions and deletions from other users appear in real time. Conflicts are resolved automatically by the sync engine.

Configurable Content Width

Adjust the content width from the editor settings panel. The width is measured in characters and can be set between 60 and 120 ch. Wider settings suit reference documents; narrower settings improve focus for writing.

Toolbar

The formatting toolbar provides quick access to:

• Bold, Italic, Underline
• Heading dropdown
• Bullet and task lists
• Link insertion
• Block quote
• Export to PDF
• Publish to Community

Buttons highlight when the cursor is inside formatted text.

Keyboard Shortcuts

Text Formatting

Structure

Special

Troubleshooting

Formatting Not Appearing

• Ensure you're using the correct syntax
• Check for extra spaces in markers
• Try removing and reapplying the formatting

Links Not Opening

• Use Cmd+Click to open links
• Regular clicks are disabled intentionally

Math Not Rendering

• Check LaTeX syntax is correct
• Ensure $ markers are properly paired
• Block math needs $$ on separate lines

Mermaid Diagram Not Rendering

• Check that the diagram type is supported
• Look for syntax errors in the Mermaid block
• Ensure the code fence is labeled mermaid

Related

• LaTeX Editor
• Code Editor
• Review Comments