Menu
Markdown Previewer
Write your Markdown on the left and see the rendered output on the right.
Editor
0 words
# Comprehensive Markdown Showcase This document demonstrates all the enhanced features of our markdown parser. ## Headers and TOC The parser automatically generates a Table of Contents from all headers in the document. ### Third Level Header #### Fourth Level Header ##### Fifth Level Header ###### Sixth Level Header Alternative Header Styles ======================== Another Header Style -------------------- ## Text Formatting ### Basic Emphasis - *Italic text* or _italic text_ - **Bold text** or __bold text__ - ***Bold and italic*** or ___bold and italic___ ### Extended Formatting - ~~Strikethrough text~~ (deleted) - ++Inserted text++ (added) - ==Highlighted text== - H~2~O (subscript) - E=mc^2^ (superscript) - [[Ctrl+C]] (keyboard shortcuts) ## Links and References ### Inline Links - [External link](https://example.com "External Link Title") - [Internal link](#headers-and-toc) ### Reference Links This is a [reference link][ref1] and another [reference link][ref2]. [ref1]: https://example.com "Reference 1" [ref2]: https://github.com "Reference 2" ## Lists ### Unordered Lists - Item 1 - Item 2 - Nested item 2.1 - Nested item 2.2 - Item 3 ### Ordered Lists 1. First item 2. Second item 1. Nested numbered item 2. Another nested item 3. Third item ### Task Lists - [x] Completed task - [ ] Incomplete task - [x] Another completed task - [ ] Nested incomplete task - [x] Nested completed task ## Definition Lists HTML : HyperText Markup Language : The standard markup language for web pages CSS : Cascading Style Sheets : Used for styling HTML documents JavaScript : A programming language : Runs in web browsers and servers ## Tables ### Basic Table | Name | Age | City | |------|-----|------| | Alice | 30 | New York | | Bob | 25 | London | | Charlie | 35 | Tokyo | ### Table with Alignment | Left Aligned | Center Aligned | Right Aligned | |:-------------|:--------------:|--------------:| | Left | Center | Right | | Text | Text | Text | ### Table with Spanning Cells | Name | Details | Notes | |------|---------|-------| | Alice | Age: 30 | Lives in NYC | | Bob | Age: 25 {colspan=2} | | Charlie | Age: 35 | Lives in Tokyo | ## Code ### Inline Code Use the `console.log()` function to output debug information. ### Code Blocks ```javascript // JavaScript example function greetUser(name) { console.log(`Hello, ${name}!`); return `Welcome, ${name}`; } greetUser("World"); ``` ```python # Python example def fibonacci(n): if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2) print(fibonacci(10)) ``` // Indented code block const message = "This is an indented code block"; console.log(message); ## Blockquotes > This is a simple blockquote. > It can span multiple lines. > This is a nested blockquote example. > > > This is nested inside another blockquote. > > > > It demonstrates proper nesting. ## Images and Figures ### Simple Image  ### Image with Attributes {.bordered #main-image width=400 height=300} ### Figure with Caption  ## Mathematical Expressions ### Inline Math The formula for the area of a circle is $A = \pi r^2$. ### Display Math $$ \lim_{x \to 0} \frac{\sin x}{x} = 1 $$ $$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$ $$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$ ## Abbreviations The HTML specification defines how browsers should render web pages. CSS is used for styling, while JS adds interactivity. *[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets *[JS]: JavaScript ## Footnotes This text has a footnote[^1]. Here's another sentence with a footnote[^note]. Multiple references to the same footnote[^1] are supported. [^1]: This is the first footnote. [^note]: This is a named footnote with more detailed information. ## Horizontal Rules --- Content above the rule. *** Content between rules. ___ Content below the rule. ## Emojis Express yourself with emojis: :smile: :heart: :thumbsup: :fire: :rocket: More emojis: :star: :bulb: :warning: :check: :pizza: :coffee: ## HTML Elements The parser supports safe HTML elements: <div class="custom-container"> <p>This is a <mark>highlighted</mark> paragraph inside a div.</p> <small>Small text with <kbd>Ctrl+Alt+Del</kbd> keyboard shortcut.</small> </div> <details> <summary>Click to expand</summary> This content is hidden by default and can be expanded by clicking the summary. </details> ## Advanced Features ### Nested Formatting You can combine **bold with *italic* text** and even add ~~strikethrough~~ or ++insertions++. ### Complex Lists 1. First level item - Mixed list types - [x] With task items 1. Nested ordered list 2. Another ordered item - [ ] Unchecked task 2. Back to ordered list ### Special Characters - & (ampersand) - < (less than) - > (greater than) - " (quote) ## Conclusion This showcase demonstrates the comprehensive markdown parsing capabilities including: - ✅ Headers with automatic TOC generation - ✅ All text formatting options - ✅ Various link types - ✅ Multiple list formats including task lists - ✅ Proper definition lists - ✅ Enhanced tables with alignment and spanning - ✅ Code syntax highlighting - ✅ Nested blockquotes - ✅ Images and figures - ✅ Mathematical expressions - ✅ Abbreviations and footnotes - ✅ Safe HTML element support - ✅ Emoji support - ✅ And much more! The parser handles all these features while maintaining security and generating semantic, accessible HTML output.
Preview
Copy HTML