📝
Markdown TestsuiteWIP
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.96
TypeScript with Twoslash annotations
1// TypeScript example with type annotations
2interface Product {
3 Product.name: string
name: string;
4 Product.price: number
price: number;
5 Product.quantity: number
quantity: number;
6}
7
8function function calculateDiscount(products: Product[], discountRate: number): number
calculateDiscount(products: Product[]
products: Product[], discountRate: number
discountRate: number): number {
9 const const total: number
total = 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: number
sum, product: Product
product) => {
10 return sum: number
sum + product: Product
product.Product.price: number
price * product: Product
product.Product.quantity: number
quantity;
11 }, 0);
12
13 return const total: number
total * discountRate: number
discountRate;
14}
15
16const const products: {
name: string;
price: number;
quantity: number;
}[]
products = [
17 { name: string
name: "Keyboard", price: number
price: 89.99, quantity: number
quantity: 1 },
18 { name: string
name: "Mouse", price: number
price: 49.99, quantity: number
quantity: 1 }
19];
20
21const const discount: number
discount = function calculateDiscount(products: Product[], discountRate: number): number
calculateDiscount(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
```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: number
discount.Number.toFixed(fractionDigits?: number): string
Returns 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) => void
NextFunction = (err: any
err?: any) => void;
3type type Request = {
headers: {
authorization: string;
};
user?: {
id: string;
roles: string[];
};
}
Request = { headers: {
authorization: string;
}
headers: { authorization: string
authorization: string }; user?: {
id: string;
roles: string[];
} | undefined
user?: { id: string
id: 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: number
code: number) => { json: (data: any) => void
json: (data: any
data: 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: string
token: string, secret: string
secret: string) => ({ id: string
id: "123", roles: string[]
roles: ["user"] }) };
6const const process: {
env: {
JWT_SECRET: string;
};
}
process = { env: {
JWT_SECRET: string;
}
env: { type JWT_SECRET: string
JWT_SECRET: "supersecret" } };
7export const const authMiddleware: (req: Request, res: Response, next: NextFunction) => Promise<void>
authMiddleware = async (req: Request
req: type Request = {
headers: {
authorization: string;
};
user?: {
id: string;
roles: string[];
};
}
Request, res: Response
res: type Response = {
status: (code: number) => {
json: (data: any) => void;
};
}
Response, next: NextFunction
next: type NextFunction = (err?: any) => void
NextFunction) => {
8 try {
9 // Extract token from Authorization header
10 const const authHeader: string
authHeader = req: Request
req.headers: {
authorization: string;
}
headers.authorization: string
authorization;
11 if (!const authHeader: string
authHeader?.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: Response
res.status: (code: number) => {
json: (data: any) => void;
}
status(401).json: (data: any) => void
json({ message: string
message: "Authentication token required" });
14 }
15
16 const const token: string
token = const authHeader: string
authHeader.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: string
token) {
*18
19 return res: Response
res.status: (code: number) => {
json: (data: any) => void;
}
status(401).json: (data: any) => void
json({ message: string
message: "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: string
token, const process: {
env: {
JWT_SECRET: string;
};
}
process.env: {
JWT_SECRET: string;
}
env.type JWT_SECRET: string
JWT_SECRET);
24
25 // Attach user information to request
26 req: Request
req.user?: {
id: string;
roles: string[];
} | undefined
user = const decoded: {
id: string;
roles: string[];
}
decoded;
27
28 next: (err?: any) => void
next();
29 } catch (function (local var) error: unknown
error) {
30 return res: Response
res.status: (code: number) => {
json: (data: any) => void;
}
status(401).json: (data: any) => void
json({ message: string
message: "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: string
id: string;
3 email: string
email: string;
4 passwordHash: string
passwordHash: string;
5 roles: string[]
roles: string[];
6};
7type type AuthResponse = {
user: User;
token: string;
}
AuthResponse = {
8 user: User
user: type User = {
id: string;
email: string;
passwordHash: string;
roles: string[];
}
User;
9 token: string
token: string;
10};
11type type Request = {
body: {
email: string;
password: string;
};
}
Request = { body: {
email: string;
password: string;
}
body: { email: string
email: string; password: string
password: string } };
12const const AuthenticationError: ErrorConstructor
AuthenticationError = var Error: ErrorConstructor
Error;
13const const bcrypt: {
compare: (a: string, b: string) => boolean;
}
bcrypt = { compare: (a: string, b: string) => boolean
compare: (a: string
a: string, b: string
b: string) => true };
14const const findUserByEmail: (email: string) => Promise<{
id: string;
email: string;
passwordHash: string;
roles: string[];
}>
findUserByEmail = async (email: string
email: string) => {
15 // Database query to find user by email
16 return { id: string
id: "123", email: string
email, passwordHash: string
passwordHash: "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: string
id: string; email: string
email: string; roles: string[]
roles: string[] }) => "jwt.token";
19const const sanitizeUser: (user: User) => {
id: string;
email: string;
roles: string[];
}
sanitizeUser = (user: User
user: type User = {
id: string;
email: string;
passwordHash: string;
roles: string[];
}
User) => {
20 const { const passwordHash: string
passwordHash, ...const sanitizedUser: {
id: string;
email: string;
roles: string[];
}
sanitizedUser } = user: User
user;
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: string
email: string, password: string
password: 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: string
email);
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: boolean
isPasswordValid = await const bcrypt: {
compare: (a: string, b: string) => boolean;
}
bcrypt.compare: (a: string, b: string) => boolean
compare(password: string
password, const user: {
id: string;
email: string;
passwordHash: string;
roles: string[];
}
user.passwordHash: string
passwordHash);
32
33 if (!const isPasswordValid: boolean
isPasswordValid) {
34 throw new var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)
Error("Invalid password");
35 }
36
37 const const token: string
token = const generateJWT: (user: {
id: string;
email: string;
roles: string[];
}) => string
generateJWT({
38 id: string
id: const user: {
id: string;
email: string;
passwordHash: string;
roles: string[];
}
user.id: string
id,
39 email: string
email: const user: {
id: string;
email: string;
passwordHash: string;
roles: string[];
}
user.email: string
email,
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: string
token
46 };
47 } catch (function (local var) error: any
error: any) {
48 throw new const AuthenticationError: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)
AuthenticationError(function (local var) error: any
error.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.