Markdown - Ezal Blog Framework

ezal-theme-example uses ezal-markdown to render Markdown text, supporting the following syntax.

Setext Heading

Setext Secondary Heading

ATX Heading

ATX Secondary Heading

ATX Tertiary Heading

ATX Quaternary Heading

ATX Quinary Heading

The theme enables a heading level offset, where a level 1 heading is rendered as <h2>, and so on, to ensure only one <h1> appears on a page.

Text Emphasis

The quick brown fox jumps over a ~~lazy~~ dog. A quick brown fox jumps over a ~~lazy~~ dog.

Blockquote

Blockquote

Ordered List

First item
Second item
1. Nested first item
2. Nested second item
Third item

Unordered List

ABCDEFG
HIJKLMN
- OPQ
- RST
UVWXYZ

Inline Code

Preview: ezal serve --verbose
Build: ezal build --clean

Links

Home

Ref link

Images

A block-level image must be preceded and followed by a blank line or another block-level image. Block-level images support click-to-zoom.

favicon

Inline image:

Tables

Header
Default	Left	Center	Right

Code Blocks

Code blocks are highlighted using shiki + @vscode/vscode-languagedetection.

TypeScript

import { hook } from '../hooks';
import type { Article } from './article';

const tags = new Map<string, Tag>();

export class Tag {
	/** Get all tags */
	static getAll(): Tag[] {
		return tags.values().toArray();
	}
	/** Set article tag */
	static setArticle(name: string, article: Article): Tag {
		let tag = tags.get(name);
		if (!tag) {
			tag = new Tag(name);
			tags.set(name, tag);
			hook('tag:add', tag);
		}
		tag.#articles.add(article);
		hook('tag:update', tag);
		return tag;
	}
	#name: string;
	#articles = new Set<Article>();
	constructor(name: string) {
		this.#name = name;
	}
	/** Tag name */
	get name() {
		return this.#name;
	}
	/** Get all articles for the tag */
	getArticles(): Article[] {
		return this.#articles.values().toArray();
	}
	/** Remove article from tag */
	removeArticle(article: Article) {
		this.#articles.delete(article);
		hook('tag:update', this);
		if (this.#articles.size > 0) return;
		tags.delete(this.#name);
		hook('tag:remove', this);
	}
	/** Whether the tag is destroyed */
	get destroyed(): boolean {
		return tags.get(this.#name) !== this;
	}
}

Shiki feature tests:

TypeScript

console.log('Hello'); 
console.log('Ciao'); 
console.log('你好'); 
console.error(new Error()); 
console.warn('Warn!');

Task Lists

Completed
Incomplete
- Incomplete
  - TEST
Can be nested Supports block-level syntax
JavaScript
```
console.log('Hello world!');
```

Math

Inline math: $E = m c^{2}$

Block-level math: $ E=mc^2\dfrac{1}{2} $

Footnotes

This is an example of a basic footnote reference¹. You can also reference the same footnote multiple times¹, or reference different footnotes².

An example of a footnote with complex formatting^special.

If you hover over the footnote reference, you can preview it without navigating away!

1

Basic footnote content (a general description that can be referenced repeatedly)

2

Standalone footnote content

special

Footnote with complex formatting: Block-level syntax is supported here, like code blocks. Now, code blocks in the preview also support one-click copy!

JavaScript

console.log('Hello world!');

Additionally, complex nesting is supported

Tags within footnotes Tag 2

Nested test

JavaScript

console.log('Hello world!');

JavaScript

console.log('Hello world!');

Theme Custom Syntax

Tabs

Tab 1 Tab 2 Markdown syntax is supported in the tab label

Content of the first tab.

Content of the second tab.

Markdown

Tab content supports block-level *Markdown* syntax

Markdown

::: Tab 1
Content of the first tab.
::: Tab 2
Content of the second tab.
::: *Markdown* syntax is supported in the tab label
```md
Tab content supports block-level *Markdown* syntax
```
:::

Fold

Click to expand for details

Block-level syntax can be used here:

JavaScript

console.log('Hello world!');

Markdown

+++ Click to expand for details
Block-level syntax can be used here:
```js
console.log('Hello world!');
```
+++

Note

注意

Information you should be aware of.

提示

A helpful tip.

警告

Important information that requires immediate attention.

危险

Advice about potential risks or negative outcomes from certain actions.

Markdown

!!! info
Information you should be aware of.
!!!

!!! tip
A helpful tip.
!!!

!!! warn
Important information that requires immediate attention.
!!!

!!! danger
Advice about potential risks or negative outcomes from certain actions.
!!!

Kbd

Press ctrl shift del to do something...

Markdown

Press {{ctrl}} {{shift}} {{del}} to do something...

Link

Markdown

@@

@ #link
Markdown
Ezal Blog Framework

@ #link
Markdown

@ #link /favicon.svg
Markdown

@ #link /favicon.svg
Markdown
Ezal Blog Framework

@@