Skip to content

Latest commit

 

History

History
555 lines (400 loc) · 10.9 KB

sample.md

File metadata and controls

555 lines (400 loc) · 10.9 KB
title description author date categories tags
Markdown Syntax Showcase
A comprehensive example of Markdown syntax supported by mdast.
Mayank Chaudhari
2025-03-03
Markdown
Syntax
Documentation
mdast
markdown
reference

Markdown Syntax Showcase

Table of Contents

1. Basic Elements

Headings

Different levels of headings for structuring content.

Heading 1

The largest heading, usually reserved for the main title of the document. By default, single # in markdown is converted to Title. Thus, 'Heading 2', which in markdown is ## Heading 2 will have Heading 1 style applied, unless you set useTitle to false in the sectionProps.

Heading 2

A subheading, used to separate major sections.

Heading 3

A smaller heading, often used for subsections.

Heading 4

A more detailed subsection heading.

Heading 5

A minor heading, used for further breakdown.

Heading 6

The smallest heading, typically used for fine details.

Nested Blockquote Example

Nested Blockquote Level 2
  • List inside a blockquote:
    • Bold Text inside a list
    • Inline Code inside a list
console.log("Code inside a blockquote list");

Text Formatting

  • Bold text with code
  • Italic text
  • Strikethrough
  • Inline code

Blockquote

This is a nested blockquote example.

Another level of nesting.

  • List item 1
  • List item 2
    • Subitem inside blockquote
def nested_function():
    return "Code inside nested blockquote"

Horizontal Rule

2. Lists

Unordered List

  • Item 1
  • Item 2
    • Subitem 1
    • Subitem 2
  • Item 3

Ordered List

  1. First item
  2. Second item
    1. Subitem 1
    2. Subitem 2
  3. Third item

3. Code Blocks

JavaScript Example

function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("Mayank");

Python Example

def greet(name):
    print(f"Hello, {name}!")

greet("Mayank")

4. Tables

Structuring data in tabular format.

Name Age Location
John 25 New York
Alice 30 San Francisco
Bob 28 London

Table with md alignments

Left-aligned Center-aligned Right-aligned
Text 1 Text 2 Text 3

5. Links and Images

Adding hyperlinks and images.

External Links

OpenAI

Internal Links

Back to Table of Contents

Images

Embedding images in Markdown.

SVG:

Markdown Logo

PNG:

GitHub Logo

Data URL:

Yellow Circle Dat URL

Reference Links in Markdown

This is an example of using reference-style links in Markdown.

You can define a reference link like this
OpenAI is an AI research and deployment company.

Markdown syntax is explained in detail on Markdown Guide.

References

6. Task Lists (GFM)

Checkable task lists.

  • Task 1 - Completed
  • Task 2 - Pending
  • Task 3 - Pending
    • Subtask 3.1 - Done
    • Subtask 3.2 - Pending
  • Task 4 - In Progress
  • Task 5 - Pending Review
  • Task 6 - Approved

Task lists are useful for tracking progress in projects.

7. Footnotes

Referencing additional information.

Here is a statement with a footnote.1

8. Emoji (GFM)

Using emojis in Markdown.

😄 🚀 🎉 🔥 💻

9. Math Equations (KaTeX / LaTeX)

Displaying mathematical expressions.

Inline equation: $E=mc^2$

Block equation:

$$ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$

Inline Math

Inline math expressions can be enclosed within single dollar signs: $E=mc^2$. You can also use \\( and \\): $\sum_{i=1}^{n} i^2$. With hat "$$\hat{x}$$".

Display Math

Display math expressions are enclosed within double dollar signs, which renders them on their own line:

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

You can also use \\[ and \\]:

$$ \frac{d}{dx} \left( \frac{1}{x} \right) = -\frac{1}{x^2} $$

Common Math Symbols

Here are some common mathematical symbols:

  • Greek letters: $\alpha$, $\beta$, $\gamma$, $\Gamma$, $\Delta$, $\pi$, $\Pi$, $\Sigma$, $\omega$, $\Omega$
  • Superscripts and subscripts: $x^2$, $y_i$, $a^{b+c}$, $e^{-i\omega t}$
  • Fractions: $\frac{1}{2}$, $\frac{x+y}{z}$
  • Square roots: $\sqrt{x}$, $\sqrt[3]{y}$
  • Summations and products: $\sum_{i=1}^n i$, $\prod_{j=1}^m j$
  • Integrals: $\int_a^b f(x) dx$, $\oint_C \vec{F} \cdot d\vec{r}$
  • Limits: $\lim_{x \to \infty} \frac{1}{x}$
  • Vectors: $\vec{v}$, $\mathbf{v}$
  • Matrices: $\begin{pmatrix} a & b \ c & d \end{pmatrix}$
  • Partial derivatives: $\frac{\partial f}{\partial x}$
  • Infinity: $\infty$
  • Logical symbols: $\forall$, $\exists$, $\in$, $\notin$, $\subseteq$, $\supseteq$, $\land$, $\lor$, $\neg$
  • Trigonometric functions: $\sin(x)$, $\cos(y)$, $\tan(z)$
  • Exponential and logarithmic functions: $e^x$, $\ln(y)$, $\log_{10}(z)$

Matrices

Matrices can be created using the pmatrix, bmatrix, vmatrix, and Vmatrix environments:

$$ \begin{pmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{pmatrix} $$

$$ \begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix} $$

$$ \begin{vmatrix} a & b \\ c & d \end{vmatrix} $$

$$ \begin{Vmatrix} a & b \\ c & d \end{Vmatrix} $$

Alignments

You can align equations using the align environment:

$$ \begin{align} y &= mx + b \\ y' &= m \end{align} $$

You can also use aligned for aligning parts of an equation:

$$ f(x) = \begin{cases} x^2, & \text{if } x \ge 0 \\ -x^2, & \text{otherwise} \end{cases} $$

$$ \begin{aligned} (a+b)^2 &= (a+b)(a+b) \\ &= a^2 + ab + ba + b^2 \\ &= a^2 + 2ab + b^2 \end{aligned} $$

Case Statements

Case statements can be created using the cases environment:

$$ f(x) = \begin{cases} 1, & \text{if } x > 0 \\ 0, & \text{if } x = 0 \\ -1, & \text{if } x < 0 \end{cases} $$

Text in Math

You can include text within math expressions using the \text{} command:

$$ \text{Let } x \text{ be a real number.} $$

Colored Math

You can color math expressions using the \textcolor{color}{math} command:

$$ \textcolor{red}{E=mc^2} $$

$$ \textcolor{blue}{\sum_{i=1}^n i} $$

Math Macros

You can define custom macros:

\newcommand{\norm}[1]{\left\lVert#1\right\rVert}

10. Diagrams (Mermaid)

Visualizing data with diagrams.

Flowchart

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
Loading

Sequence Diagram

sequenceDiagram
  participant A
  participant B
  A->>B: Hello, how are you?
  B->>A: I'm good, thanks!
Loading

Mindmap

- Root
  - Branch 1
    - Subbranch 1
    - Subbranch 2
  - Branch 2
    - Subbranch 3
    - Subbranch 4

Chart (Gantt)

gantt
  title Project Timeline
  dateFormat  YYYY-MM-DD
  section Development
  Task 1 :done, 2024-01-01, 2024-01-10
  Task 2 :active, 2024-01-11, 2024-01-20
  Task 3 : 2024-01-21, 2024-01-30
Loading

11. Definition Lists

Defining terms and meanings.

Term 1
: Definition 1

Term 2
: Definition 2a
: Definition 2b

12. Admonitions (Callouts)

Highlighting important notes or warnings.

Note: This is an important note.

Warning: Be careful with this step!

13. HTML Elements

Using HTML for additional interactivity.

Click to expand This is hidden content.

This is a checkbox -

13.1. Inline HTML

This is an example of inline HTML inside a paragraph:

This is a red bold text inside a Markdown paragraph.

You can also add inline images:

Sample Image

Or create inline links with styles:

Visit OpenAI

13.2. Block HTML Elements

Inside pre tag
Indentation and formatting etc. here should be preserved.
      Hmmm...

Tables with HTML

Name Age Location
John 25 New York
Alice 30 San Francisco

Forms in HTML

Name:

Email:

13.3. Combining Markdown and HTML

This is a blockquote with an embedded HTML table:

Feature Supported
Markdown ✅
HTML ✅

13.4. Custom Styling

<style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style>

14. Custom Directives (MDX)

Embedding custom components.

<MyComponent title="Hello World" />

This document covers most of the syntax supported by mdast, including extended Markdown features such as GFM, math, diagrams, and MDX components.

Footnotes

  1. This is the footnote content. ↩