Words: 666 • Chars: 4221
Welcome to your Real-time Markdown Editor!
This is a powerful and intuitive markdown editor designed for seamless content creation and management.
Features:
- Live Preview: See your markdown rendered in real-time as you type.
- GitHub Integration: Connect your GitHub account to load, save, and manage your markdown files directly from your repositories.
- Toolbar: Easily apply common markdown formatting with a convenient toolbar.
- Responsive Design: Works great on both desktop and mobile devices.
- File Management: Create new files, rename existing ones, and download your work.
How to Use:
- Start Typing: Just begin writing in the left panel. The right panel will show a live preview.
- Use the Toolbar: Click on the icons above the editor to apply bold, italic, headings, lists, and more.
- Connect to GitHub:
- Click the "Connect GitHub" button in the header.
- Authorize the application to access your repositories.
- Browse your repositories and select a markdown file (.md or .mdx) to load.
- You can also create new markdown files in your selected repository.
- Save Your Work: If you've loaded a file from GitHub, the "Save" button will become active when you make changes. Click it to commit your changes back to GitHub.
- Download: Click the "Download" button to save your current markdown content as a
.mdfile to your local machine. - Reset Content: To revert the editor to this default content, click the "Reset to Default" button in the header.
Markdown Syntax Examples:
Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Text Formatting
This is **bold text**.
This is *italic text*.
This is ~~strikethrough text~~.
This is `inline code`.
Lists
* Unordered list item 1
* Unordered list item 2
* Nested item
1. Ordered list item 1
2. Ordered list item 2
1. Nested item
Blockquote
> This is a blockquote.
> It can span multiple lines.
Code Blocks
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("World");
Links and Images
[Visit Vercel](https://vercel.com)

Horizontal Rule
---
Line Breaks
Markdown handles line breaks differently than plain text.
-
Soft Line Break: A single newline character in your markdown source will typically be rendered as a space in HTML.
This is the first part. This is the second part (on the same line in preview).Renders as: "This is the first part. This is the second part (on the same line in preview)."
-
Hard Line Break: To force a new line, end the line with two or more spaces, then a newline.
This is the first line. This is the second line (forced new line).Renders as: "This is the first line. This is the second line (forced new line)."
GitHub Flavored Markdown (GFM) Examples:
Tables
| Header 1 | Header 2 | Header 3 |
| -------- | :------: | -------: |
| Left-aligned | Center-aligned | Right-aligned |
| Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
Task Lists
- [x] Task 1 (completed)
- [ ] Task 2 (pending)
- [ ] Task 3
Footnotes
Here is some text with a footnote. [^first-footnote]
And here's another one. [^second-footnote]
[^first-footnote]: This is the content of the first footnote.
[^second-footnote]: This is the content of the second footnote. It can span multiple lines.
Raw HTML Tag Examples:
Line Break
This is the first line.<br />This is the second line using <br />.
Definition List
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, for structuring web content.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, for styling web content.</dd>
<dd>It describes how HTML elements are to be displayed on screen, paper, or in other media.</dd>
</dl>
Enjoy editing and exploring all the features!