Typora implements a real-time preview engine that adheres closely to CommonMark standards while extending functionality through native editor features. The following documentation outlines core formatting directives and their corresponding editor interactions.

Structural Headers

Headers are defined by preceding text with one to six hash symbols (#), requiring exactly one space between the symbol and the heading text.

# Primary Header Level
## Secondary Header Level
### Tertiary Header Level

Editor shortcut: Press Ctrl+1, Ctrl+2, or Ctrl+3 to insert corresponding header levels. Ctrl+/ toggles between source mode and live preview.

Inline Text Formatting

Enclose text within delimiters to apply styling. Multiple formats can be nested.

**Bold text** or __bold text__
*Italic text* or _italic text_
~~Strikethrough text~~
<u>Underlined text</u>
***Bold and italic***

Keyboard mappings: Ctrl+B for bold, Ctrl+I for italic, Ctrl+U for underline.

Hyperlinks & Media References

Standard link syntax wraps display text in square brackets followed immediately by the destination URL in parentheses.

[Visit Documentation](https://docs.example.com/reference)

To render raw URLs or email addresses without hyperlink behavior, wrap them in angle brackets: <user@example.com> or <https://example.com>. Image insertion follows a similar pattern, utilizing an exclamation mark prefix:

![Alt description](https://assets.example.com/image.png)

Blockquotes & Separators

Prefix lines with > to create quoted sections. Stack multiple characters for nested indentation.

> This creates a blockquote element.
>> Nested quotation level

Horizontal dividers require three or more consecutive hyphens, asterisks, or underscores on a blank line:

---
***
___

Code Representation

Wrap segments with backticks for inline syntax highlighting:

Use the `console.log()` method for debugging.

For multi-line scripts, open with three backticks and specify the target language identifier to enable syntax rendering:

def calculate_sum(numbers):
    total = 0
    for num in numbers:
        total += num
    return total
print(calculate_sum([1, 5, 10]))

Trigger code block insertion with Ctrl+Shift+C and exit using Ctrl+Enter.

List Structures

Unordered lists utilize dashes, plus signs, or asterisks as bullet markers. Indentation establishes hierarchical nesting.

- Frontend Development
  - React Framework
    - Component Architecture
  - State Management
- Backend Integration

Ordered lists rely on numeric prefixes. The parser auto-increments sequence numbers regardless of input values.

1. Initialize project environment
2. Configure routing parameters
3. Deploy to staging server

Interactive task lists require brackets containing a space or x:

- [ ] Draft technical specifications
- [x] Implement authentication module

Tabular Data

Markdown tables require consistent column alignment. Pipe characters seperate cells, and hyphens define the header delimiter row.

| Configuration Option | Default Value | Description             |
|----------------------|---------------|-------------------------|
| `max_connections`    | 100           | Simultaneous client cap |
| `timeout_seconds`    | 30            | Request duration limit  |

Press Ctrl+Enter within a table cell to append a new row automatically. For complex layouts, native HTML table markup provides superior cross-platform consistency.

Advanced Extensions

Enable underlining/highlighting through editor preferences. Activate via Ctrl+, → Preferences → Markdown Extensions → Highlight.

==Highlighted segment==

Footnotes append a caret symbol followed by a reference key before the citation marker:

System architecture relies on distributed caching[^note1].

[^note1]: Redis instance deployed at port 6379.

Embedded HTML Components

While Markdown parsers restrict embedding Markdown syntax inside raw HTML, direct HTML injection remains fully supported for media and layout control.

Media Embeds Audio playback utilizes the standard HTML5 tag:

<audio controls preload="metadata">
  <source src="https://media.example.com/recording.mp3" type="audio/mpeg">
</audio>

Video integration requires iframe configuration with parameterized query strings to control playback behavior:

<iframe width="100%" height="480" 
        src="https://embed.example.com/widget?autoplay=false&controls=true" 
        frameborder="0" allowfullscreen>
</iframe>

Custom Styled Tables Native Markdown table rendering lacks advanced CSS capabilities. Injecting explicit table markup allows direct style application:

<table style="border-collapse: collapse; width: 100%; text-align: center;">
  <tr style="background-color: #f4f4f4;">
    <th style="border: 1px solid #ccc; padding: 8px;">Metric</th>
    <th style="border: 1px solid #ccc; padding: 8px;">Q1 Target</th>
    <th style="border: 1px solid #ccc; padding: 8px;">Current Status</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ccc; padding: 8px;">User Acquisition</td>
    <td style="border: 1px solid #ccc; padding: 8px;">5000</td>
    <td style="border: 1px solid #ccc; padding: 8px;">4850</td>
  </tr>
</table>

Navigation & Editing Shortcuts

Efficient workflow management depends on mastering editor-level commands: