MarkdStudio Markdown Guide

Complete reference for writing Markdown in MarkdStudio. Covers text formatting, code blocks, math equations, diagrams, tables, footnotes, and export workflows for technical documentation, academic notes, blog posts, and more.

Table of Contents

• Getting Started
• Headings
• Text Formatting
• Paragraphs & Line Breaks
• Lists & Checklists
• Links & Images
• Blockquotes & Callouts
• Code & Code Blocks
• Tables
• Math with KaTeX
• Diagrams with Mermaid
• Footnotes
• Emojis
• HTML Tags
• Export & Sharing
• Best Practices

Getting Started

Open MarkdStudio and start typing. The preview updates instantly. Your documents are stored locally in your browser—no account or server required. Use the editor on the left, preview on the right, or switch between write, preview, or split modes.

Export your work as PDF, HTML, or Markdown at any time. Try the themes menu to preview how your document looks in different typographic styles.

Headings

Use `#` symbols to create headings. One `#` for H1 (largest), two for H2, and so on up to H6 (smallest).

# Heading 1 — Document title
## Heading 2 — Major section
### Heading 3 — Subsection
#### Heading 4 — Minor subsection
##### Heading 5 — Rarely used
###### Heading 6 — Rarely used

Text Formatting

Make text bold, italic, strikethrough, or inline code using simple markers:

Paragraphs & Line Breaks

Paragraphs: Separate paragraphs with a blank line.

This is the first paragraph.

This is the second paragraph.

Line breaks: End a line with two spaces or a backslash to force a line break within a paragraph:

Line one  
Line two

Or use a backslash:
Line one\
Line two

Lists & Checklists

Unordered list: Use `-`, `*`, or `+` for bullet points.

- Item one
- Item two
  - Nested item A
  - Nested item B
- Item three

Ordered list: Use numbers followed by a period.

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Task list: Use `[ ]` for unchecked and `[x]` for completed tasks.

- [x] Setup project
- [x] Write documentation
- [ ] Deploy to production
- [ ] Monitor metrics

Links & Images

Inline link:

[Link text](https://example.com)
[Link with tooltip](https://example.com "Hover text")

Reference-style link: Define links once, reference them multiple times.

[Click here][ref]

[ref]: https://example.com

Autolink: Auto-linkify URLs and emails.

<https://example.com>
<user@example.com>

Images: Similar to links but with a leading `!`.

![Alt text](image.png)
![Alt text](https://example.com/image.png "Image title")

Blockquotes & Callouts

Blockquote: Use `>` to create a quoted block.

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

Callouts: Use `> [!TYPE]` for colored alert boxes.

> [!NOTE]
> This is a note. Use for informational content.

> [!TIP]
> Helpful advice or best practice.

> [!WARNING]
> Caution or potential issue.

> [!IMPORTANT]
> Critical information that must not be ignored.

Code & Code Blocks

Inline code: Wrap code with backticks.

Use the `console.log()` function to debug.

Code blocks: Wrap code with triple backticks. Optionally add a language identifier for syntax highlighting.

```js
function greet(name) {
  return `Hello, ${name}! :wave:`;
}

greet('World');
```

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)
```

```html
<div class="container">
  <h1>Hello, World!</h1>
</div>
```

Supported languages: javascript, python, css, html, json, sql, bash, markdown, typescript, ruby, php, and many more.

Tables

Create tables with pipes and hyphens:

| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell A   | Cell B   | Cell C   |
| Cell D   | Cell E   | Cell F   |

Alignment: Use `:` in the separator row to align columns.

| Left    | Center | Right |
| :------ | :----: | ----: |
| Left    | Center | Right |
| L       | C      | R     |

Use cases: Compare features, list requirements, document API parameters, or create reference tables.

Math with KaTeX

Write mathematical expressions using KaTeX syntax.

Inline math: Wrap with single `$` symbols.

Einstein's famous equation is $E = mc^2$, which shows that mass and energy are interchangeable.

Display math: Wrap with double `$$` symbols on separate lines.

$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \le \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

Common examples:

- Fractions: $\frac{a}{b}$
- Superscript: $x^2 + y^2 = z^2$
- Square root: $\sqrt{x}$
- Greek letters: $\alpha, \beta, \gamma, \delta$
- Limits: $\lim_{x \to \infty} f(x)$
- Summation: $\sum_{i=1}^{n} x_i$
- Integral: $\int_a^b f(x) \, dx$

Diagrams with Mermaid

Create flowcharts, sequence diagrams, and other visualizations using Mermaid syntax.

Flowchart:

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Action 1]
  B -->|No| D[Action 2]
  C --> E[End]
  D --> E
```

Sequence diagram:

```mermaid
sequenceDiagram
  participant User
  participant Server
  User->>Server: Request data
  Server->>Server: Process
  Server-->>User: Send response
```

Gantt chart:

```mermaid
gantt
  title Project Timeline
  section Tasks
  Design :des, 2024-01-01, 30d
  Development :dev, after des, 60d
  Testing :test, after dev, 14d
```

Supported diagram types: Flowchart, Sequence, Class, State, Entity Relationship (ER), Gantt, Pie, Git, and more. See mermaid.js.org for full documentation.

Footnotes

Add footnotes for citations, clarifications, or supplementary information.

This is some text with a footnote[^1].

And here's another sentence with another footnote[^note].

[^1]: This is the footnote content.
[^note]: This is a longer footnote that explains something in detail.

Footnotes appear as clickable references in the text and are collected at the bottom of the document in your preview and exports.

Emojis

Use emoji shortcodes (colon-wrapped names) to insert emojis.

:smile: :heart: :rocket: :fire: :100:
:thumbsup: :thinking: :warning: :bulb: :tada:

Common emojis: `:smile:` 😄, `:heart:` ❤️, `:rocket:` 🚀, `:fire:` 🔥, `:+1:` 👍, `:100:` 💯, `:warning:` ⚠️, `:bulb:` 💡, `:memo:` 📝

Use cases: Highlight key points, add visual interest, express tone (e.g., "Great job :tada:!"), or mark sections.

HTML Tags

You can also write raw HTML for advanced styling or interactive content:

<div style="background: #f0f8ff; padding: 1rem; border-radius: 8px;">
  <p>This is a custom HTML block.</p>
</div>

Note: For security, MarkdStudio sanitizes HTML to prevent malicious scripts. Basic styling and semantic tags work fine.

Export & Sharing

Export formats:

• PDF: Print-ready, styled document. Perfect for reports, resumes, or sharing.
• HTML: Standalone HTML file with embedded CSS and images. Great for web publishing.
• Markdown: Raw `.md` file. Use to import into other tools or version control.

Themes: Preview your document in different typographic styles before exporting (GitHub, Blog, Academic, Minimal, Documentation).

Tips for exporting:

• Use descriptive headings and a clear structure for better readability.
• Test export with your target format before finalizing.
• Use the preview pane to see how math, code, and diagrams render.
• For web publishing, use the HTML export and customize CSS as needed.

Best Practices

Structure and readability:

• Start with a clear H1 title.
• Use consistent heading hierarchy (H1 → H2 → H3, no skipping).
• Keep paragraphs short (2–4 sentences).
• Use bullet points for lists instead of long paragraphs.

Code and technical content:

• Always include language identifiers for code blocks (```js, ```python, etc.).
• Use inline code for function names, variables, and file paths.
• Provide context and examples for complex topics.

Accessibility and SEO:

• Always add alt text to images.
• Use descriptive link text (avoid "click here").
• Use proper heading structure for screen readers and search engines.

Writing tips:

• Keep your tone conversational yet professional.
• Use callouts ([!NOTE], [!TIP], [!WARNING]) to highlight important information.
• Add footnotes for citations and supplementary info.
• Test your exported PDF or HTML to catch rendering issues early.