Markdown Converter

This app allows you to write Markdown and see it rendered as HTML in real-time. It's perfect for drafting content, documentation, README files, or any text that benefits from formatting.

This is a self-contained application that works offline in any modern browser.

Key features:

Real-time preview as you type
Dark/light mode toggle
Export as HTML or Markdown
Copy formatted HTML to clipboard
Print directly from the preview
Footnotes support
Works offline in any modern browser
Installable as a Progressive Web App

Simply start typing in the left panel to see your formatted content on the right.

Installation & Usage

You can use this app in several ways:

Use directly in your browser at the current URL
Install as a PWA by clicking the install button in your browser's address bar or menu
Download the HTML file and related assets to use locally
Host on your own server

Once installed as a PWA, the app will work offline and can be launched from your device's home screen or app drawer.

Keyboard Shortcuts

This application supports the following keyboard shortcuts:

Alt + E: Focus the editor
Alt + P: Focus the preview
Alt + S: Focus the splitter
Alt + C: Copy HTML to clipboard
Alt + D: Download HTML
Alt + X: Clear editor content
Alt + R: Print document
Alt + H: Open this help dialog
Alt + T: Toggle light/dark theme

Splitter Controls

When the splitter is focused (by clicking or tabbing to it, or selecting with Alt + S):

←: Decrease editor width (move splitter left)
→: Increase editor width (move splitter right)
↑: Decrease editor width with bigger steps (move splitter left more)
↓: Increase editor width with bigger steps (move splitter right more)
Home: Minimize editor (maximize preview area)
End: Maximize editor area
Space or Enter: Reset splitter to center (50/50)

Using Footnotes

You can add footnotes to your document with the following syntax:

Here is a sentence with a footnote reference[^1].

[^1]: This is the footnote content.

For multi-paragraph footnotes, indent subsequent paragraphs with your selected indentation spacing (2 spaces currently):

[^2]: First paragraph of the footnote.
  
  Second paragraph of the footnote.

You can select your preferred Markdown flavor using the "Flavor" dropdown in the toolbar. This setting affects all indentation-sensitive markdown elements including footnotes, lists, and code blocks:

GitHub - Uses GitHub Flavored Markdown with 2-space indentation for lists
CommonMark - Uses CommonMark/standard Markdown with 4-space indentation for lists

Footnotes will be collected and displayed at the bottom of the document.

Nested Lists

This app adjusts to your selected Markdown flavor (GitHub):

1. First level item
2. First level item
   - Second level item (indented 3 spaces)
   - Second level item (indented 3 spaces)
      * Third level item (indented 6 spaces)
      * Third level item (indented 6 spaces)

Note: GitHub-style Markdown uses 2-space indentation for nested lists. First level items have no indentation, second level items are indented by 2-3 spaces, and third level items by 4-6 spaces.

Code Blocks

Regular code blocks can be created with indentation (2 spaces):

Normal text.

  This is a code block.
  It's indented with spaces.
  
Normal text again.

You can also use triple backticks for code blocks, which don't require indentation:

```javascript
// This is a code block with language specification
function example() {
  return "Hello world";
}
```

License

Markdown Converter is released under the MIT License.

Uses the following libraries:

Showdown (v2.1.0) - MIT License - For Markdown conversion
DOMPurify (v3.2.5) - Dual-licensed under Apache License 2.0 and Mozilla Public License 2.0 - For HTML sanitization

This software contains third-party components with separate copyright notices and license terms. Your use of these components is subject to the terms and conditions of their respective licenses.