Markdown Syntax Testsuite

Just a simple test file, testing various features

Markdown Testsuite 📝

WIP

This article is still a work in progress.

This document showcases Markdown capabilities with various extensions. It’s intended as a reference for creating rich, interactive documentation.

Basic Formatting

Plain text is rendered as-is. You can create bold text, italic text, and bold italic text.

You can also use strikethrough to indicate removed content.

Use inline code for technical references.

Lists

Unordered Lists

  • First item
  • Second item
    • Nested item 2.1
    • Nested item 2.2
      • Deeply nested item
  • Third item

Ordered Lists

  1. First step
  2. Second step
    1. Substep 2.1
    2. Substep 2.2
  3. Third step

Task Lists

  • Create project structure
  • Implement core functionality
  • Write comprehensive tests
  • Deploy to production
    • Prepare deployment scripts
    • Configure CI/CD pipeline

Visit my website

Link with title

Reference-style links: my website

Code Blocks

Inline: const greet = (name) => console.log(Hello, $!);

JavaScript with syntax highlighting

1// Regular JavaScript example
2function calculateTotal(items) {
3    return items
4        .filter((item) => item.price > 0)
5        .map((item) => item.price * item.quantity)
6        .reduce((total, price) => total + price, 0);
7}
8
9const total = calculateTotal([
10    { name: "Keyboard", price: 89.99, quantity: 1 },
11    { name: "Mouse", price: 49.99, quantity: 1 },
12    { name: "Monitor", price: 199.99, quantity: 2 }
13]);
14
15console.log(`Total: $${total.toFixed(2)}`); // Total: $539.96

TypeScript with Twoslash annotations

1// TypeScript example with type annotations
2interface Product {
3    Product.name: stringname: string;
4    Product.price: numberprice: number;
5    Product.quantity: numberquantity: number;
6}
7
8function function calculateDiscount(products: Product[], discountRate: number): numbercalculateDiscount(products: Product[]products: 
Product
[], discountRate: numberdiscountRate: number): number {
9 const const total: numbertotal = products: Product[]products.Array<Product>.reduce<number>(callbackfn: (previousValue: number, currentValue: Product, currentIndex: number, array: Product[]) => number, initialValue: number): number (+2 overloads)
Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
@paramcallbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.@paraminitialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
reduce
((sum: numbersum, product: Productproduct) => {
10 return sum: numbersum + product: Productproduct.Product.price: numberprice * product: Productproduct.Product.quantity: numberquantity; 11 }, 0); 12 13 return const total: numbertotal * discountRate: numberdiscountRate; 14} 15 16const
const products: {
    name: string;
    price: number;
    quantity: number;
}[]
products
= [
17 { name: stringname: "Keyboard", price: numberprice: 89.99, quantity: numberquantity: 1 }, 18 { name: stringname: "Mouse", price: numberprice: 49.99, quantity: numberquantity: 1 } 19]; 20 21const
const discount: number
discount
= function calculateDiscount(products: Product[], discountRate: number): numbercalculateDiscount(
const products: {
    name: string;
    price: number;
    quantity: number;
}[]
products
, 0.1);
22var console: Console
The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers. The module exports two specific components: * A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream. * A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstdout) and [`process.stderr`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module. _**Warning**_: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v22.x/api/process.html#a-note-on-process-io) for more information. Example using the global `console`: ```js console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ``` Example using the `Console` class: ```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```
@see[source](https://github.com/nodejs/node/blob/v22.x/lib/console.js)
console
.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stdout` with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html) (the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)). ```js const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout ``` See [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args) for more information.
@sincev0.1.100
log
(`Discount: $${const discount: numberdiscount.Number.toFixed(fractionDigits?: number): string
Returns a string representing a number in fixed-point notation.
@paramfractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.
toFixed
(2)}`);

Code with diff highlighting

1function sendWelcomeEmail(user) {
-2    const subject = "Welcome to our service"; 
+3    const subject = `Welcome to our service, ${user.name}!`; 
4
-5    const body = "Thanks for signing up."; 
6    const body = `
7    <h1>Welcome aboard, ${user.name}!</h1>
8    <p>We're excited to have you join our community.</p>
9    <p>Your account is now active.</p>
+10  `; 
11
12    return sendEmail(user.email, subject, body);
13}

Code with highlighted lines

1// Authentication middleware
2type type NextFunction = (err?: any) => voidNextFunction = (err: anyerr?: any) => void;
3type 
type Request = {
    headers: {
        authorization: string;
    };
    user?: {
        id: string;
        roles: string[];
    };
}
Request
= {
headers: {
    authorization: string;
}
headers
: { authorization: stringauthorization: string };
user?: {
    id: string;
    roles: string[];
} | undefined
user
?: { id: stringid: string; roles: string[]roles: string[] } };
4type
type Response = {
    status: (code: number) => {
        json: (data: any) => void;
    };
}
Response
= {
status: (code: number) => {
    json: (data: any) => void;
}
status
: (code: numbercode: number) => { json: (data: any) => voidjson: (data: anydata: any) => void } };
5const
const jwt: {
    verify: (token: string, secret: string) => {
        id: string;
        roles: string[];
    };
}
jwt
= {
verify: (token: string, secret: string) => {
    id: string;
    roles: string[];
}
verify
: (token: stringtoken: string, secret: stringsecret: string) => ({ id: stringid: "123", roles: string[]roles: ["user"] }) };
6const
const process: {
    env: {
        JWT_SECRET: string;
    };
}
process
= {
env: {
    JWT_SECRET: string;
}
env
: { type JWT_SECRET: stringJWT_SECRET: "supersecret" } };
7export const const authMiddleware: (req: Request, res: Response, next: NextFunction) => Promise<void>authMiddleware = async (req: Requestreq:
type Request = {
    headers: {
        authorization: string;
    };
    user?: {
        id: string;
        roles: string[];
    };
}
Request
, res: Responseres:
type Response = {
    status: (code: number) => {
        json: (data: any) => void;
    };
}
Response
, next: NextFunctionnext: type NextFunction = (err?: any) => voidNextFunction) => {
8 try { 9 // Extract token from Authorization header 10 const const authHeader: stringauthHeader = req: Requestreq.
headers: {
    authorization: string;
}
headers
.authorization: stringauthorization;
11 if (!const authHeader: stringauthHeader?.String.startsWith(searchString: string, position?: number): boolean
Returns true if the sequence of elements of searchString converted to a String is the same as the corresponding elements of this object (converted to a String) starting at position. Otherwise returns false.
startsWith
("Bearer ")) {
*12 13 return res: Responseres.
status: (code: number) => {
    json: (data: any) => void;
}
status
(401).json: (data: any) => voidjson({ message: stringmessage: "Authentication token required" });
14 } 15 16 const const token: stringtoken = const authHeader: stringauthHeader.String.split(separator: string | RegExp, limit?: number): string[] (+1 overload)
Split a string into substrings using the specified separator and return them as an array.
@paramseparator A string that identifies character or characters to use in separating the string. If omitted, a single-element array containing the entire string is returned.@paramlimit A value used to limit the number of elements returned in the array.
split
(" ")[1];
17 if (!const token: stringtoken) { *18 19 return res: Responseres.
status: (code: number) => {
    json: (data: any) => void;
}
status
(401).json: (data: any) => voidjson({ message: stringmessage: "Invalid authentication token" });
20 } 21 22 // Verify JWT token 23 const
const decoded: {
    id: string;
    roles: string[];
}
decoded
=
const jwt: {
    verify: (token: string, secret: string) => {
        id: string;
        roles: string[];
    };
}
jwt
.
verify: (token: string, secret: string) => {
    id: string;
    roles: string[];
}
verify
(const token: stringtoken,
const process: {
    env: {
        JWT_SECRET: string;
    };
}
process
.
env: {
    JWT_SECRET: string;
}
env
.type JWT_SECRET: stringJWT_SECRET);
24 25 // Attach user information to request 26 req: Requestreq.
user?: {
    id: string;
    roles: string[];
} | undefined
user
=
const decoded: {
    id: string;
    roles: string[];
}
decoded
;
27 28 next: (err?: any) => voidnext(); 29 } catch (function (local var) error: unknownerror) { 30 return res: Responseres.
status: (code: number) => {
    json: (data: any) => void;
}
status
(401).json: (data: any) => voidjson({ message: stringmessage: "Invalid or expired token" });
31 } 32};

Tables

Simple Table

NameTypeDefaultDescription
idstring-Unique identifier
titlestringDisplay title
visiblebooleantrueWhether the item is visible

Alignment Control

Left-alignedCenter-alignedRight-aligned
TextTextNumbers
LeftCenter12345
Alignmentis67890
Simplewith colonsin header row

Blockquotes

This is a basic blockquote. It can span multiple lines.

Nested blockquotes:

Outer blockquote

Nested blockquote

Deeper nested blockquote

Back to the outer blockquote.

Blockquote with other elements:

Heading in a blockquote

  • List item in blockquote
  • Another list item
1// Code in blockquote
2console.log("Hello from blockquote!");

LaTeX Mathematical Expressions

Inline Math

Euler’s identity: eiπ+1=0e^{i\pi} + 1 = 0

The quadratic formula: x=b±b24ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

Block Math

×B1cEt=4πcjE=4πρ×E+1cBt=0B=0\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}

Complex Mathematical Expressions

AB=[a11a12a1na21a22a2nam1am2amn][b11b12b1pb21b22b2pbn1bn2bnp]=[k=1na1kbk1k=1na1kbk2k=1na1kbkpk=1na2kbk1k=1na2kbk2k=1na2kbkpk=1namkbk1k=1namkbk2k=1namkbkp]\begin{align*} \mathbf{A} \cdot \mathbf{B} &= \begin{bmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{bmatrix} \begin{bmatrix} b_{11} & b_{12} & \cdots & b_{1p} \\ b_{21} & b_{22} & \cdots & b_{2p} \\ \vdots & \vdots & \ddots & \vdots \\ b_{n1} & b_{n2} & \cdots & b_{np} \end{bmatrix} \\ &= \begin{bmatrix} \displaystyle\sum_{k=1}^{n} a_{1k}b_{k1} & \displaystyle\sum_{k=1}^{n} a_{1k}b_{k2} & \cdots & \displaystyle\sum_{k=1}^{n} a_{1k}b_{kp} \\[1.2em] \displaystyle\sum_{k=1}^{n} a_{2k}b_{k1} & \displaystyle\sum_{k=1}^{n} a_{2k}b_{k2} & \cdots & \displaystyle\sum_{k=1}^{n} a_{2k}b_{kp} \\[1.2em] \vdots & \vdots & \ddots & \vdots \\[1.2em] \displaystyle\sum_{k=1}^{n} a_{mk}b_{k1} & \displaystyle\sum_{k=1}^{n} a_{mk}b_{k2} & \cdots & \displaystyle\sum_{k=1}^{n} a_{mk}b_{kp} \end{bmatrix} \end{align*}
P(x)=a0+a1x+a2x2++anxn=i=0naixi\begin{aligned} P(x) &= a_0 + a_1 x + a_2 x^2 + \ldots + a_n x^n \\ &= \sum_{i=0}^{n} a_i x^i \end{aligned}

Mermaid Diagrams

Flowchart

flowchart TD A[Start] --> B{User authenticated?} B -->|Yes| C[Load dashboard] B -->|No| D[Show login form] C --> E[Display user data] D --> F[Validate credentials] F -->|Valid| C F -->|Invalid| G[Show error message] G --> D

Sequence Diagram

sequenceDiagram participant User participant Frontend participant API participant Database User->>Frontend: Submit login form Frontend->>API: POST /auth/login API->>Database: Query user credentials Database-->>API: Return user data API-->>Frontend: Return JWT token Frontend-->>User: Show dashboard Note over Frontend,API: Authentication successful User->>Frontend: Request protected resource Frontend->>API: GET /api/resource with JWT API->>API: Validate JWT API->>Database: Query resource data Database-->>API: Return resource data API-->>Frontend: Return resource Frontend-->>User: Display resource

Class Diagram

classDiagram class User { +String id +String name +String email +String[] roles +authenticate() +hasPermission(string) } class Product { +String id +String name +Number price +String description +applyDiscount(percent) +isAvailable() } class Order { +String id +User customer +Product[] items +Date orderDate +Number total +calculateTotal() +addItem(Product) +removeItem(Product) } User "1" --> "*" Order: places Order "*" --> "*" Product: contains

Entity Relationship Diagram

erDiagram CUSTOMER ||--o{ ORDER : places CUSTOMER { string id string name string email string address } ORDER ||--|{ ORDER_ITEM : contains ORDER { string id date created_at string status number total_amount } ORDER_ITEM { string order_id string product_id number quantity number price } PRODUCT ||--o{ ORDER_ITEM : "ordered in" PRODUCT { string id string name number price string description number stock }

State Diagram

stateDiagram-v2 [*] --> Draft Draft --> Review : Submit for review Review --> Draft : Request changes Review --> Approved : Accept Review --> Rejected : Reject Approved --> Published : Publish Rejected --> Draft : Revise Published --> [*]

Admonitions

info

This is an informational note. Use it for general information and context.

tip

This is a tip. It provides helpful advice and suggestions.

warning

This is a warning. Pay attention to avoid potential issues.

danger

This is a danger alert. Critical information about errors or problems.

Important Note

You can also customize the admonition title.

Nested Content

Admonitions can contain other markdown elements:

  • Lists
  • Formatted text
  • Code blocks
1console.log("Code inside admonition");

And even tables:

KeyValue
AOne
BTwo

HTML Elements

Custom HTML Container

This is a custom HTML container with styling applied.

  • You can use HTML for more complex layouts
  • When markdown doesn't provide enough control

Details/Summary Elements

Click to expand implementation details

Implementation Notes

This section contains implementation details that are hidden by default to keep the document clean.

1type 
type User = {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
User
= {
2 id: stringid: string; 3 email: stringemail: string; 4 passwordHash: stringpasswordHash: string; 5 roles: string[]roles: string[]; 6}; 7type
type AuthResponse = {
    user: User;
    token: string;
}
AuthResponse
= {
8 user: Useruser:
type User = {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
User
;
9 token: stringtoken: string; 10}; 11type
type Request = {
    body: {
        email: string;
        password: string;
    };
}
Request
= {
body: {
    email: string;
    password: string;
}
body
: { email: stringemail: string; password: stringpassword: string } };
12const const AuthenticationError: ErrorConstructorAuthenticationError = var Error: ErrorConstructorError; 13const
const bcrypt: {
    compare: (a: string, b: string) => boolean;
}
bcrypt
= { compare: (a: string, b: string) => booleancompare: (a: stringa: string, b: stringb: string) => true };
14const
const findUserByEmail: (email: string) => Promise<{
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}>
findUserByEmail
= async (email: stringemail: string) => {
15 // Database query to find user by email 16 return { id: stringid: "123", email: stringemail, passwordHash: stringpasswordHash: "hashedpassword", roles: string[]roles: ["user"] }; 17}; 18const
const generateJWT: (user: {
    id: string;
    email: string;
    roles: string[];
}) => string
generateJWT
= (
user: {
    id: string;
    email: string;
    roles: string[];
}
user
: { id: stringid: string; email: stringemail: string; roles: string[]roles: string[] }) => "jwt.token";
19const
const sanitizeUser: (user: User) => {
    id: string;
    email: string;
    roles: string[];
}
sanitizeUser
= (user: Useruser:
type User = {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
User
) => {
20 const { const passwordHash: stringpasswordHash, ...
const sanitizedUser: {
    id: string;
    email: string;
    roles: string[];
}
sanitizedUser
} = user: Useruser;
21 return
const sanitizedUser: {
    id: string;
    email: string;
    roles: string[];
}
sanitizedUser
;
22}; 23const
const authenticateUser: (email: string, password: string) => Promise<{
    user: {
        id: string;
        email: string;
        roles: string[];
    };
    token: string;
}>
authenticateUser
= async (email: stringemail: string, password: stringpassword: string) => {
24 try { 25 const
const user: {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
user
= await
const findUserByEmail: (email: string) => Promise<{
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}>
findUserByEmail
(email: stringemail);
26 27 if (!
const user: {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
user
) {
28 throw new
var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)
Error
("User not found");
29 } 30 31 const const isPasswordValid: booleanisPasswordValid = await
const bcrypt: {
    compare: (a: string, b: string) => boolean;
}
bcrypt
.compare: (a: string, b: string) => booleancompare(password: stringpassword,
const user: {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
user
.passwordHash: stringpasswordHash);
32 33 if (!const isPasswordValid: booleanisPasswordValid) { 34 throw new
var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)
Error
("Invalid password");
35 } 36 37 const const token: stringtoken =
const generateJWT: (user: {
    id: string;
    email: string;
    roles: string[];
}) => string
generateJWT
({
38 id: stringid:
const user: {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
user
.id: stringid,
39 email: stringemail:
const user: {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
user
.email: stringemail,
40 roles: string[]roles:
const user: {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
user
.roles: string[]roles
41 }); 42 43 return { 44
user: {
    id: string;
    email: string;
    roles: string[];
}
user
:
const sanitizeUser: (user: User) => {
    id: string;
    email: string;
    roles: string[];
}
sanitizeUser
(
const user: {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
}
user
),
45 token: stringtoken 46 }; 47 } catch (function (local var) error: anyerror: any) { 48 throw new
const AuthenticationError: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)
AuthenticationError
(function (local var) error: anyerror.message);
49 } 50};

Progress Bars

75%

Keyboard Keys

Press Ctrl + Shift + P to open the command palette.

Responsive Columns with Flexbox

Feature Highlights

  • Responsive design
  • Cross-platform compatibility
  • High performance

Technical Specifications

  • Built with TypeScript
  • Svelte 5 components
  • Tailwind CSS v4

Performance Metrics

  • 98/100 PageSpeed score
  • 0.8s First Contentful Paint
  • 1.2s Time to Interactive

Advanced Features

Definition Lists

Term 1 : Definition 1

Svelte : A modern JavaScript framework that compiles at build time : Known for its simple syntax and high performance

React : A JavaScript library for building user interfaces : Uses a virtual DOM for efficient rendering

Footnotes

This statement requires citation[^1]. You can also use inline footnotes^[This is an inline footnote with formatting].

[^1]: Here is the footnote content with a link.

Abbreviations

The HTML specification is maintained by the W3C.

[HTML]: Hyper Text Markup Language[W3C]: World Wide Web Consortium

Ruby Annotations (Furigana)

日本語 (にほんご)

Embedded Audio

Embedded Video

Custom Containers with SVG Icons

Important Information

This is a custom information container with an SVG icon.

Credits and References

This document showcases Markdown capabilities with various extensions. It’s intended as a reference for creating rich, interactive documentation.