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
- First step
- Second step
- Substep 2.1
- Substep 2.2
- Third step
Task Lists
- Create project structure
- Implement core functionality
- Write comprehensive tests
- Deploy to production
- Prepare deployment scripts
- Configure CI/CD pipeline
Links and Images
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.96TypeScript 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.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: numberdiscount = function calculateDiscount(products: Product[], discountRate: number): numbercalculateDiscount(const products: {
name: string;
price: number;
quantity: number;
}[]
products, 0.1);
22var console: ConsoleThe `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
```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.log(`Discount: $${const discount: numberdiscount.Number.toFixed(fractionDigits?: number): stringReturns a string representing a number in fixed-point notation.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): booleanReturns 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.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
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | - | Unique identifier |
| title | string | ” | Display title |
| visible | boolean | true | Whether the item is visible |
Alignment Control
| Left-aligned | Center-aligned | Right-aligned |
|---|---|---|
| Text | Text | Numbers |
| Left | Center | 12345 |
| Alignment | is | 67890 |
| Simple | with colons | in 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:
The quadratic formula:
Block Math
Complex Mathematical Expressions
Mermaid Diagrams
Flowchart
Sequence Diagram
Class Diagram
Entity Relationship Diagram
State Diagram
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:
| Key | Value |
|---|---|
| A | One |
| B | Two |
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
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.
