amateras 0.10.1 → 0.11.0

package/packages/if/src/global.ts

@@ -0,0 +1,15 @@
+import type { Condition } from "#structure/Condition";
+import * as _Else from "#structure/Else";
+import * as _ElseIf from "#structure/ElseIf";
+import * as _If from "#structure/If";
+import type { Signal } from "@amateras/signal";
+
+declare global {
+    export var If: typeof _If.If
+    export var Else: typeof _Else.Else
+    export var ElseIf: typeof _ElseIf.ElseIf
+
+    export function $(statement: typeof _If.If, signal: Signal<any>, layout: _If.IfLayout): Condition;
+    export function $(statement: typeof _ElseIf.ElseIf, signal: Signal<any>, layout: _ElseIf.ElseIfLayout): Condition;
+    export function $(statement: typeof _Else.Else, layout: _Else.ElseLayout): Condition;
+}

package/packages/if/src/index.ts

@@ -0,0 +1,51 @@
+import './global';
+import { If } from "#structure/If";
+import { Proto } from "@amateras/core";
+import { _instanceof, _null, isEqual } from "@amateras/utils";
+import { Signal } from '@amateras/signal';
+import { ElseIf } from '#structure/ElseIf';
+import { Else } from '#structure/Else';
+import { Condition } from '#structure/Condition';
+
+globalThis.If = If;
+globalThis.Else = Else;
+globalThis.ElseIf = ElseIf;
+
+/**This map store condition with parent Proto,
+ * all related Statement should be under same parent Proto.
+ */
+let conditionMap = new WeakMap<Proto, Condition>();
+
+// add condition statement craft function
+$.process.craft.add((value, arg1, arg2) => {
+    let parentProto = Proto.proto;
+    let condition = parentProto ? conditionMap.get(parentProto) : _null;
+    // when value equal If, mean this is a new start of condition statement
+    if (value === If) {
+        condition = new Condition();
+        if (parentProto) {
+            condition.parent = parentProto;
+            conditionMap.set(parentProto, condition);
+        }
+    }
+
+    // if condition is null, mean this is not a condition statement code
+    // or Else/ElseIf not in right place
+    if (!_instanceof(condition, Condition)) {
+        if (isEqual(value, [Else, ElseIf])) throw 'ElseIf/Else must be after If or ElseIf';
+        return;
+    }
+
+    // handle If/Else/ElseIf constructor
+    // add them into condition child statements
+    if (isEqual(value, [If, Else, ElseIf])) {
+        let args: [Signal | null, () => void] = _instanceof(arg1, Signal) ? [arg1, arg2] : [_null, arg1];
+        let statement = new value(...args);
+        condition.statements.add(statement);
+    }
+    else {
+        if (parentProto) conditionMap.delete(parentProto);
+        return;
+    }
+    return condition;
+})

package/packages/if/src/structure/Condition.ts

@@ -0,0 +1,44 @@
+import { symbol_Statement } from "@amateras/core";
+import { ProxyProto } from "@amateras/core";
+import { _null, forEach } from "@amateras/utils";
+import type { ConditionStatement } from "./ConditionStatement";
+
+export class Condition extends ProxyProto {
+    static override [symbol_Statement] = true;
+    statements = new Set<ConditionStatement>();
+    declare protos: Set<ConditionStatement>;
+    declare layout: null;
+    statement: ConditionStatement | null = _null;
+
+    override build() {
+        // run base build method with empty protos
+        super.build(false);
+        // set condition matched proto
+        this.validate()?.build();
+        // update function for Signal subscribe
+        let update = () => {
+            let matchProto = this.validate();
+            if (!matchProto?.builded) matchProto?.build();
+            if (this.statement === matchProto) return;
+            this.statement = matchProto ?? _null;
+            forEach(this.statements, proto => proto !== matchProto && proto.removeNode())
+            this.node?.replaceWith(...this.toDOM());
+        }
+        // build statements proto and subscribe expression signal
+        forEach(this.statements, proto => {
+            proto.exp$?.subscribe(update);
+            proto.disposers.add(() => proto.exp$?.unsubscribe(update));
+        })
+        return this;
+    }
+
+    validate() {
+        this.clear();
+        for (let proto of this.statements) {
+            if (proto.validate()) {
+                proto.parent = this;
+                return proto;
+            }
+        }
+    }
+}

package/packages/if/src/structure/ConditionStatement.ts

@@ -0,0 +1,25 @@
+import { symbol_Statement } from "@amateras/core";
+import { Proto } from "@amateras/core";
+import type { Signal } from "@amateras/signal";
+
+export abstract class ConditionStatement extends Proto {
+    static override [symbol_Statement] = true;
+    exp$: Signal<any> | null;
+    declare layout: $.Layout;
+    builded = false;
+    constructor(expression: Signal<any> | null, layout: $.Layout) {
+        super(layout);
+        this.exp$ = expression;
+    }
+
+    override build(children?: boolean): this {
+        super.build(children);
+        this.builded = true;
+        return this;
+    }
+
+    validate() {
+        if (!this.exp$) return true;
+        return !!this.exp$.value;
+    }
+}

package/packages/if/src/structure/Else.ts

@@ -0,0 +1,6 @@
+import { ConditionStatement } from "./ConditionStatement";
+
+export type ElseLayout = () => void;
+export class Else extends ConditionStatement {
+    declare statementType: 'Else'
+}

package/packages/if/src/structure/ElseIf.ts

@@ -0,0 +1,6 @@
+import { ConditionStatement } from "./ConditionStatement";
+
+export type ElseIfLayout = () => void;
+export class ElseIf extends ConditionStatement {
+    declare statementType: 'ElseIf'
+}

package/packages/if/src/structure/If.ts

@@ -0,0 +1,6 @@
+import { ConditionStatement } from "./ConditionStatement";
+
+export type IfLayout = () => void;
+export class If extends ConditionStatement {
+    declare statementType: 'If'
+}

package/packages/markdown/README.md

@@ -0,0 +1,53 @@
+# amateras/markdown
+
+## Usage
+```ts
+import { Markdown } from 'amateras/markdown';
+
+const markdown = new Markdown();
+
+markdown.parseHTML('# Title'); // => <h1>Title</h1>
+```
+
+## Add Custom Markdown Rules
+```ts
+markdown.lexer.blockTokenizers.set('CUSTOM_TYPE', {
+	regex: /#! (.+)/,
+	handle: matches => {
+		content: lexer.inlineTokenize(matches[1]!)
+	}
+})
+
+markdown.parser.processors.set('CUSTOM_TYPE', token => {
+	return `<custom>${markdown.parser.parse(token.content!)}</custom>`
+})
+```
+
+## Import Syntax
+```ts
+import { MarkdownParser, MarkdownLexer } from 'amateras/markdown';
+import { blockquoteProcessor, blockquoteTokenizer } from 'amateras/markdown/syntax/blockquote';
+import { headingProcessor, headingTokenizer } from 'amateras/markdown/syntax/heading';
+
+const lexer = new MarkdownLexer();
+const parser = new MarkdownParser();
+
+lexer.use(
+    blockquoteTokenizer,
+    headingTokenizer
+)
+
+parser.use(
+    blockquoteProcessor,
+    headingProcessor
+)
+
+function parseHTML(str: string) {
+    const tokens = lexer.blockTokenize(str);
+    return parser.parse(tokens);
+}
+
+parseHTML('# Title') // => <h1>Title</h1>
+parseHTML('> This is Blockquote') // => <blockquote>This is Blockquote</blockquote>
+parseHTML('- List') // => - List
+```

package/packages/markdown/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@amateras/markdown",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/utils": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts"
+    },
+    "exports": {
+      ".": "./src/index.ts"
+    }
+}

package/packages/markdown/src/index.ts

@@ -0,0 +1,3 @@
+export * from '#structure/MarkdownLexer';
+export * from '#structure/MarkdownParser';
+export * from "#structure/Markdown";

package/packages/markdown/src/lib/type.ts

@@ -0,0 +1,26 @@
+export const INLINE = 'INLINE';
+export const BLOCK = 'BLOCK';
+export const TEXT = 'TEXT';
+export const IMAGE = 'IMAGE';
+export const LINK = 'LINK';
+export const QUICK_LINK = 'QUICK_LINK';
+export const CODE = 'CODE';
+export const ITALIC = 'ITALIC';
+export const BOLD = 'BOLD';
+export const TEXT_LINE = 'TEXT_LINE';
+export const HEADING = 'HEADING';
+export const CODE_START = 'CODE_START';
+export const CODE_LINE = 'CODE_LINE';
+export const CODE_END = 'CODE_END';
+export const UNORDERED_LIST_ITEM = 'UNORDERED_LIST_ITEM';
+export const ORDERED_LIST_ITEM = 'ORDERED_LIST_ITEM';
+export const BLOCKQUOTE = 'BLOCKQUOTE';
+export const ALERT = 'ALERT';
+export const ALERT_LINE = 'ALERT_LINE';
+export const HORIZONTAL_RULE = 'HORIZONTAL_RULE';
+export const TABLE = 'TABLE';
+export const TABLE_ROW = 'TABLE_ROW';
+export const TABLE_COLUMN = 'TABLE_COLUMN';
+export const EMPTY_LINE = 'EMPTY_LINE'
+export const INLINE_TEXT = "INLINE_TEXT";
+export const INLINE_CONTENT = "INLINE_CONTENT"

package/packages/markdown/src/lib/util.ts

@@ -0,0 +1,21 @@
+import type { BlockTokenizer, InlineTokenizer, MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParseProcessor, MarkdownParser } from "#structure/MarkdownParser";
+import { forEach } from "@amateras/utils";
+
+export const setBlockTokenizer = (lexer: MarkdownLexer, type: string, tokenizer: BlockTokenizer) => lexer.blockTokenizers.set(type, tokenizer);
+export const setInlineTokenizer = (lexer: MarkdownLexer, type: string, tokenizer: InlineTokenizer) => lexer.inlineTokenizers.set(type, tokenizer);
+
+export const setProcessor = (parser: MarkdownParser, type: string, processor: MarkdownParseProcessor) => parser.processors.set(type, processor);
+
+export const htmltag = (tagname: string, content: string) => `<${tagname}>${content}</${tagname}>`
+
+export const htmlEscapeChar = (str: string) => {
+    forEach([
+        ['&', '&amp;'],
+        ['<', '&lt;'],
+        ['>', '&gt;'],
+        ['"', '&quot;'],
+        ["'", '&#39;']
+    ] as [string, string][], group => str = str.replaceAll(...group))
+    return str;
+}

package/packages/markdown/src/structure/Markdown.ts

@@ -0,0 +1,57 @@
+import { alertProcessor, alertTokenizer } from "../syntax/alert";
+import { blockquoteProcessor, blockquoteTokenizer } from "../syntax/blockquote";
+import { boldProcessor, boldTokenizer } from "../syntax/bold";
+import { codeProcessor, codeTokenizer } from "../syntax/code";
+import { codeblockProcessor, codeblockTokenizer } from "../syntax/codeblock";
+import { headingProcessor, headingTokenizer } from "../syntax/heading";
+import { horizontalRuleProcessor, horizontalRuleTokenizer } from "../syntax/horizontalRule";
+import { imageProcessor, imageTokenizer } from "../syntax/image";
+import { italicProcessor, italicTokenizer } from "../syntax/italic";
+import { linkProcessor, linkTokenizer } from "../syntax/link";
+import { listProcessor, listTokenizer } from "../syntax/list";
+import { tableProcessor, tableTokenizer } from "../syntax/table";
+import { textLineProcessor, textProcessor } from "../syntax/text";
+import { MarkdownLexer } from "./MarkdownLexer";
+import { MarkdownParser } from "./MarkdownParser";
+
+export class Markdown {
+    lexer = new MarkdownLexer();
+    parser = new MarkdownParser();
+    constructor() {
+        this.lexer.use(
+            headingTokenizer,
+            codeblockTokenizer,
+            listTokenizer,
+            tableTokenizer,
+            alertTokenizer,
+            blockquoteTokenizer,
+            horizontalRuleTokenizer,
+            imageTokenizer, // image tokenizer must before link
+            linkTokenizer, // link tokenizer must before bold and italic and code
+            codeTokenizer,
+            boldTokenizer,
+            italicTokenizer,
+        )
+        
+        this.parser.use(
+            textProcessor,
+            imageProcessor,
+            linkProcessor,
+            codeProcessor,
+            italicProcessor,
+            boldProcessor,
+            textLineProcessor,
+            headingProcessor,
+            codeblockProcessor,
+            listProcessor,
+            tableProcessor,
+            alertProcessor,
+            blockquoteProcessor,
+            horizontalRuleProcessor
+        )
+    }
+
+    parseHTML(str: string) {
+        return this.parser.parse(this.lexer.blockTokenize(str));
+    }
+}

package/packages/markdown/src/structure/MarkdownLexer.ts

@@ -0,0 +1,111 @@
+import { BLOCK, EMPTY_LINE, INLINE_CONTENT, INLINE_TEXT, TEXT_LINE } from "#lib/type";
+import { forEach, isString } from "@amateras/utils";
+
+export class MarkdownLexer {
+    blockTokenizers = new Map<string, BlockTokenizer>();
+    inlineTokenizers = new Map<string, InlineTokenizer>();
+    
+    blockTokenize(str: string) {
+        const lines = str?.split(/\r?\n/) ?? [];
+        const tokens: BlockToken[] = [];
+        let lineIndex = 0;
+        lineLoop: while (lineIndex < lines.length) {
+            let line = lines[lineIndex];
+            if (line === undefined) throw 'LINE ERROR';
+            let token: BlockToken | undefined;
+            for (const [type, tokenizer] of this.blockTokenizers) {
+                const matched = line.match(tokenizer.regex);
+                if (matched) {
+                    const {content, multiLine, data} = tokenizer.handle(matched, lineIndex, lines);
+                    token = { layout: BLOCK, type, content, data }
+                    if (multiLine) {
+                        tokens.push(token);
+                        tokens.push(...multiLine.tokens)
+                        lineIndex = multiLine.skip;
+                        continue lineLoop;
+                    }
+                    break;
+                }
+            }
+            if (!token) token = { 
+                layout: BLOCK, 
+                ...(
+                    line.length 
+                    ?   { type: TEXT_LINE, content: this.inlineTokenize(line) } 
+                    :   { type: EMPTY_LINE, content: [] }
+                )
+            };
+            tokens.push(token);
+            lineIndex++;
+        }
+        return tokens;
+    }
+
+    inlineTokenize(str: string): InlineToken[] {
+        const tokens: InlineToken[] = [];
+        let remainStr = str;
+        while (remainStr.length) {
+            let token: InlineToken | undefined;
+            for (const [type, tokenizer] of this.inlineTokenizers) {
+                const matched = remainStr.match(tokenizer.regex);
+                if (matched) {
+                    const {index, 0: matchStr} = matched;
+                    // handle before matched string
+                    if (index != 0) tokens.push(...this.inlineTokenize(remainStr.substring(0, index)));
+                    // handle matched string
+                    const {content, data} = tokenizer.handle(matched);
+                    token = { type, ...(isString(content) ? { layout: INLINE_TEXT, text: content } : { layout: INLINE_CONTENT, content })};
+                    if (data) token.data = data;
+                    remainStr = remainStr.substring(index! + matchStr.length);
+                    break;
+                }
+            }
+            if (!token) {
+                token = { type: 'TEXT', layout: INLINE_TEXT, text: remainStr };
+                remainStr = '';
+            }
+            tokens.push(token);
+        }
+        return tokens;
+    }
+
+    use(...handle: ((parser: this) => void)[]) {
+        forEach(handle, fn => fn(this));
+        return this;
+    }
+}
+
+export type BlockTokenizer = {
+    regex: RegExp;
+    handle: (matches: RegExpMatchArray, position: number, lines: string[]) => { content: (InlineToken | BlockToken)[], multiLine?: BlockTokenizerMultiLine, data?: {[key: string]: any} };
+}
+export type BlockTokenizerMultiLine = {
+    skip: number;
+    tokens: BlockToken[];
+}
+export type InlineTokenizer = {
+    regex: RegExp;
+    handle: (matches: RegExpMatchArray) => { content: InlineToken[] | string, data?: {[key: string]: any} }
+}
+
+export interface TokenBase {
+    type: string;
+    layout: 'BLOCK' | 'INLINE_CONTENT' | 'INLINE_TEXT';
+    content?: Token[];
+    text?: string;
+    data?: {[key: string]: any};
+}
+export interface BlockToken extends TokenBase {
+    layout: 'BLOCK'
+    content: Token[];
+}
+export interface InlineTextToken extends TokenBase {
+    layout: 'INLINE_TEXT'
+    text: string;
+}
+export interface InlineContentToken extends TokenBase {
+    layout: 'INLINE_CONTENT'
+    content: (InlineToken)[];
+}
+export type InlineToken = InlineTextToken | InlineContentToken;
+export type Token = BlockToken | InlineToken;

package/packages/markdown/src/structure/MarkdownParser.ts

@@ -0,0 +1,34 @@
+import { forEach, isString } from "@amateras/utils";
+import { type Token } from "./MarkdownLexer";
+
+export class MarkdownParser {
+    processors = new Map<string, MarkdownParseProcessor>();
+    
+    parse(tokens: (Token)[]) {
+        let html = '';
+        let i = 0;
+        if (!tokens) return html;
+        while (i < tokens.length) {
+            const token = tokens[i]!;
+            const processor = this.processors.get(token.type);
+            if (processor) {
+                const result = processor(token, tokens.slice(i));
+                if (isString(result)) {
+                    html += result;
+                } else {
+                    html += result.html;
+                    i += result.skipTokens;
+                }
+            }
+            i++;
+        }
+        return html;
+    }
+
+    use(...handle: ((parser: this) => void)[]) {
+        forEach(handle, fn => fn(this));
+        return this;
+    }
+}
+
+export type MarkdownParseProcessor = (token: Token, tokens: Token[]) => (string | { html: string, skipTokens: number })

package/packages/markdown/src/syntax/alert.ts

@@ -0,0 +1,46 @@
+import { ALERT, ALERT_LINE, BLOCK } from "#lib/type";
+import { setBlockTokenizer, setProcessor } from "#lib/util";
+import type { BlockToken, MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+import { uppercase } from "@amateras/utils";
+
+export const alertProcessor = (parser: MarkdownParser) => setProcessor(parser, ALERT, (token, tokens) => {
+    let html = '';
+    let i = 1;
+    while (i < tokens.length) {
+        const token = tokens[i]!;
+        if (token.type !== ALERT_LINE) break;
+        html += parser.parse(token.content![0]!.content!);
+        i++;
+    }
+    const alertType = token.data?.alertType as string;
+    return {
+        html: `<blockquote class="alert alert-${alertType}"><p class="alert-title">${uppercase(alertType, 0, 1)}</p>${html}</blockquote>`,
+        skipTokens: i
+    }
+})
+
+export const alertTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, ALERT, {
+    regex: /^> ?\[!(?:(?:NOTE)|(?:TIP)|(?:IMPORTANT)|(?:WARNING)|(?:CAUTION))\]/,
+    handle(_, position, lines) {
+        const tokens: BlockToken[] = [];
+        const match = lines[position]!.match(/> ?\[!(.+?)\]/);
+        const alertType = match?.[1]?.toLowerCase();
+        position++
+        while (position < lines.length) {
+            const line = lines[position]!;
+            const match = line.match(/^> ?(.+)/);
+            if (match) tokens.push({ layout: BLOCK, type: ALERT_LINE, content: lexer.blockTokenize(match[1]!) });
+            else break;
+            position++;
+        }
+        return {
+            content: [],
+            data: { alertType },
+            multiLine: {
+                skip: position,
+                tokens
+            }
+        }
+    },
+})

package/packages/markdown/src/syntax/blockquote.ts

@@ -0,0 +1,35 @@
+import { BLOCKQUOTE } from "#lib/type";
+import { htmltag, setBlockTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const blockquoteProcessor = (parser: MarkdownParser) => setProcessor(parser, BLOCKQUOTE, (token, tokens) => {
+        let i = 0;
+        const blockquote = (deep: number) => {
+            let html = '';
+            while (i < tokens.length) {
+                const {type, content, data} = tokens[i]!;
+                if (type !== BLOCKQUOTE) break;
+                if (data!.deep > deep) html += blockquote(data!.deep);
+                else if (data!.deep < deep) break;
+                else { html += parser.parse(content!); i++ }
+            }
+            return htmltag('blockquote', html)
+        }
+        return {
+            html: blockquote(token.data!.deep),
+            skipTokens: i
+        }
+    })
+
+export const blockquoteTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, BLOCKQUOTE, {
+        regex: /^(>+) ?(.+)?/,
+        handle(matches) {
+            return {
+                content: lexer.blockTokenize(matches[2] ?? ''),
+                data: {
+                    deep: (matches[1]!.length - 1)
+                }
+            }
+        }
+    })

package/packages/markdown/src/syntax/bold.ts

@@ -0,0 +1,11 @@
+import { BOLD } from "#lib/type";
+import { htmltag, setInlineTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const boldProcessor = (parser: MarkdownParser) => setProcessor(parser, BOLD, token => htmltag('b', parser.parse(token.content!)))
+
+export const boldTokenizer = (lexer: MarkdownLexer) => setInlineTokenizer(lexer, BOLD, {
+        regex: /\*\*(.+?\*?)\*\*/,
+        handle: matches => ({ content: lexer.inlineTokenize(matches[1]!) })
+    })

package/packages/markdown/src/syntax/code.ts

@@ -0,0 +1,11 @@
+import { CODE } from "#lib/type";
+import { htmlEscapeChar, htmltag, setInlineTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const codeProcessor = (parser: MarkdownParser) => setProcessor(parser, CODE, token => htmltag('code', htmlEscapeChar(token.text!)))
+
+export const codeTokenizer = (lexer: MarkdownLexer) => setInlineTokenizer(lexer, CODE, {
+    regex: /`(.+?)`/,
+    handle: matches => ({ content: matches[1]! })
+})

package/packages/markdown/src/syntax/codeblock.ts

@@ -0,0 +1,44 @@
+import { BLOCK, CODE_END, CODE_LINE, CODE_START } from "#lib/type";
+import { htmlEscapeChar, setBlockTokenizer, setProcessor } from "#lib/util";
+import type { BlockToken, MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const codeblockProcessor = (parser: MarkdownParser) => setProcessor(parser, CODE_START, (token, tokens) => {
+        let html = '';
+        let i = 1;
+        while (i < tokens.length) {
+            const token = tokens[i]!;
+            if (token.type === CODE_END) break;
+            html += token.content![0]!.text;
+            i++;
+        }
+        return {
+            html: `<pre><code${token.data?.lang ? ` lang="${token.data.lang}"` : ''}>${htmlEscapeChar(html)}</code></pre>`,
+            skipTokens: i
+        }
+    })
+
+export const codeblockTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, CODE_START, {
+    regex: /^```(\w+)?/,
+    handle: (matches, position, lines) => {
+        const tokens: BlockToken[] = [];
+        position++;
+        while (position < lines.length) {
+            const line = lines[position]!;
+            position++;
+            if (line.includes('```')) {
+                tokens.push({ layout: BLOCK, type: CODE_END, content: [] })
+                break;
+            }
+            tokens.push({ layout: BLOCK, type: CODE_LINE, content: [{ layout: "INLINE_TEXT", type: 'CODE_TEXT', text: `${line}\n` }] });
+        }
+        return {
+            content: [],
+            data: { lang: matches[1] },
+            multiLine: {
+                skip: position,
+                tokens
+            }
+        }
+    }
+})

package/packages/markdown/src/syntax/heading.ts

@@ -0,0 +1,14 @@
+import { HEADING } from "#lib/type";
+import { htmltag, setBlockTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const headingProcessor = (parser: MarkdownParser) => setProcessor(parser, HEADING, token => {
+    const tagname = `h${token.data!.level}`;
+    return htmltag(tagname, parser.parse(token.content!))
+})
+
+export const headingTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, HEADING, {
+    regex: /^(#+) (.+)/,
+    handle: matches => ({ content: lexer.inlineTokenize(matches[2]!), data: { level: matches[1]!.length } })
+})