svelte-streamdown 2.3.1 → 2.3.3

package/README.md

@@ -231,6 +231,13 @@ III. Third item
 > [!IMPORTANT]
 > Native support for Github style Alert
 
+### Description List
+
+    :   Topic 1   :  Description 1
+    : **Topic 2** : *Description 2*
+    :   Topic 3   :  Description 3
+    :   Topic 3   :  Description 3
+
 ## 🔄 Differences from Original React Version
 
 This Svelte port maintains feature parity with the original [Streamdown](https://streamdown.ai/) while adapting to Svelte's patterns:
@@ -261,14 +268,14 @@ This Svelte port maintains feature parity with the original [Streamdown](https:/
 
 ## 🎭 Animation System
 
-Streamdown includes a sophisticated animation system designed specifically for streaming AI content, providing smooth and engaging visual feedback as text appears on screen.
+Streamdown includes an animation system designed specifically for streaming AI content, providing smooth and engaging visual feedback as text appears on screen.
 
 ### How It Works
 
 The animation system works by:
 
 1. **Tokenization**: Text is broken down into tokens (words or characters) based on your configuration
-2. **Sequential Animation**: Each token animates in sequence with configurable timing
+2. **Sequential Animation**: Each token animates as it is received
 3. **Block-level Animation**: Entire blocks (paragraphs, headings, code blocks) animate as units
 
 ### Animation Types
@@ -293,6 +300,8 @@ Text slides down from above while fading in, creating a dynamic downward motion.
 
 > [!TIP]
 > For production applications where the LLM is not streaming (static content), disable animations entirely by setting `animation.enabled = false` to minimize DOM elements and improve performance.
+>
+> If using AI SDK mind to smooth stream the content to using word-level tokenization to avoid partial words not being animated.
 
 > [!WARNING]
 > Character-level tokenization (`tokenize: 'char'`) creates significantly more DOM elements than word-level tokenization. Use character tokenization sparingly and only when the typewriter effect is essential for your user experience.
@@ -327,17 +336,15 @@ console.log('Hello from Streamdown!');
 	let content = `# Custom Components Example
 
 This heading will use a custom component!`;
-
-	// Custom heading component
 </script>
 
-{#snippet customHeading({ children, token })}
-	<h1 class="mb-4 text-4xl font-bold text-blue-600" {...token.props}>
-		{@render children()}
-	</h1>
-{/snippet}
-
-<Streamdown {content} heading={customHeading} />
+<Streamdown {content}>
+	{#snippet heading({ children })}
+		<h1 class="mb-4 text-4xl font-bold text-blue-600">
+			{@render children()}
+		</h1>
+	{/snippet}
+</Streamdown>
 ```
 
 ### Security Configuration
@@ -359,73 +366,32 @@ This heading will use a custom component!`;
 
 ## 📋 Props API
 
-| Prop                       | Type                                                             | Default          | Description                                                                                                                                        |
-| -------------------------- | ---------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `content`                  | `string`                                                         | -                | **Required.** The markdown content to render                                                                                                       |
-| `class`                    | `string`                                                         | -                | CSS class names for the wrapper element                                                                                                            |
-| `parseIncompleteMarkdown`  | `boolean`                                                        | `true`           | Parse and fix incomplete markdown syntax                                                                                                           |
-| `defaultOrigin`            | `string`                                                         | -                | Default origin for relative URLs                                                                                                                   |
-| `allowedLinkPrefixes`      | `string[]`                                                       | `['*']`          | Allowed URL prefixes for links                                                                                                                     |
-| `allowedImagePrefixes`     | `string[]`                                                       | `['*']`          | Allowed URL prefixes for images                                                                                                                    |
-| `skipHtml`                 | `boolean`                                                        | -                | Skip HTML parsing entirely                                                                                                                         |
-| `unwrapDisallowed`         | `boolean`                                                        | -                | Unwrap instead of removing disallowed elements                                                                                                     |
-| `urlTransform`             | `UrlTransform \| null`                                           | -                | Custom URL transformation function                                                                                                                 |
-| `theme`                    | `DeepPartial<Theme>`                                                 | -                | Custom theme overrides                                                                                                                             |
-| `baseTheme`                | `'tailwind' \| 'shadcn'`                                         | `'tailwind'`     | Base theme to use before applying overrides                                                                                                        |
-| `mergeTheme`               | `boolean`                                                        | `true`           | Whether to merge theme with base theme                                                                                                             |
-| `shikiTheme`               | `BundledTheme`                                                   | `'github-light'` | Code highlighting theme                                                                                                                            |
-| `mermaidConfig`            | `MermaidConfig`                                                  | -                | Mermaid diagram configuration                                                                                                                      |
-| `katexConfig`              | `KatexOptions \| ((inline: boolean) => KatexOptions)`            | -                | KaTeX math rendering options                                                                                                                       |
-| `animation`                | `AnimationConfig`                                                | -                | Animation configuration for streaming content                                                                                                      |
-| `animation.enabled`        | `boolean`                                                        | `false`          | Enable/disable animations                                                                                                                          |
-| `animation.type`           | `'fade' \| 'blur' \| 'typewriter' \| 'slideUp' \| 'slideDown'`   | `'blur'`         | Animation style for text appearance                                                                                                                |
-| `animation.duration`       | `number`                                                         | `500`            | Animation duration in milliseconds                                                                                                                 |
-| `animation.timingFunction` | `'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'linear'` | `'ease-in'`      | CSS timing function for animations                                                                                                                 |
-| `animation.tokenize`       | `'word' \| 'char'`                                               | `'word'`         | Tokenization method for text animations                                                                                                            |
-| `animation.animateOnMount` | `boolean`                                                        | `false`          | Run the token animation on mount or not, useful if you render the Streamdown component in the same time as the first token is receive from the LLM |
-
-### Custom Component Props
-
-**Every single markdown element** can be customized with Svelte snippets, giving you
-complete control over styling and behavior:
-
-Each snippet receives `{ children, token }` where `token` is a typed token object containing the parsed markdown token with its properties and children is a snippet to be rendered.
-
-```svelte
-<script>
-	import { Streamdown } from 'svelte-streamdown';
-
-	let content = `# Fully Customizable
-
-This heading uses a custom component with your design system!`;
-</script>
-
-{#snippet customHeading({ children, token })}
-	<h1
-		class="text-gradient mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-4xl font-bold text-transparent"
-		{...token.props}
-	>
-		{@render children()}
-	</h1>
-{/snippet}
-
-{#snippet customCode({ children, token })}
-	<code class="rounded bg-gray-100 px-2 py-1 font-mono text-sm dark:bg-gray-800" {...token.props}>
-		{@render children()}
-	</code>
-{/snippet}
-
-{#snippet customBlockquote({ children, token })}
-	<blockquote
-		class="border-l-4 border-blue-500 pl-4 text-gray-600 italic dark:text-gray-300"
-		{...token.props}
-	>
-		{@render children()}
-	</blockquote>
-{/snippet}
-
-<Streamdown {content} heading={customHeading} code={customCode} blockquote={customBlockquote} />
-```
+| Prop                       | Type                                                                             | Default          | Description                                                                                                                                        |
+| -------------------------- | -------------------------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `content`                  | `string`                                                                         | -                | **Required.** The markdown content to render                                                                                                       |
+| `class`                    | `string`                                                                         | -                | CSS class names for the wrapper element                                                                                                            |
+| `parseIncompleteMarkdown`  | `boolean`                                                                        | `true`           | Parse and fix incomplete markdown syntax                                                                                                           |
+| `defaultOrigin`            | `string`                                                                         | -                | Default origin for relative URLs                                                                                                                   |
+| `allowedLinkPrefixes`      | `string[]`                                                                       | `['*']`          | Allowed URL prefixes for links                                                                                                                     |
+| `allowedImagePrefixes`     | `string[]`                                                                       | `['*']`          | Allowed URL prefixes for images                                                                                                                    |
+| `skipHtml`                 | `boolean`                                                                        | -                | Skip HTML parsing entirely                                                                                                                         |
+| `unwrapDisallowed`         | `boolean`                                                                        | -                | Unwrap instead of removing disallowed elements                                                                                                     |
+| `urlTransform`             | `UrlTransform \| null`                                                           | -                | Custom URL transformation function                                                                                                                 |
+| `theme`                    | `DeepPartial<Theme>`                                                             | -                | Custom theme overrides                                                                                                                             |
+| `baseTheme`                | `'tailwind' \| 'shadcn'`                                                         | `'tailwind'`     | Base theme to use before applying overrides                                                                                                        |
+| `mergeTheme`               | `boolean`                                                                        | `true`           | Whether to merge theme with base theme                                                                                                             |
+| `shikiTheme`               | `BundledTheme`                                                                   | `'github-light'` | Code highlighting theme                                                                                                                            |
+| `mermaidConfig`            | `MermaidConfig`                                                                  | -                | Mermaid diagram configuration                                                                                                                      |
+| `katexConfig`              | `KatexOptions \| ((inline: boolean) => KatexOptions)`                            | -                | KaTeX math rendering options                                                                                                                       |
+| `animation`                | `AnimationConfig`                                                                | -                | Animation configuration for streaming content                                                                                                      |
+| `animation.enabled`        | `boolean`                                                                        | `false`          | Enable/disable animations                                                                                                                          |
+| `animation.type`           | `'fade' \| 'blur' \| 'typewriter' \| 'slideUp' \| 'slideDown'`                   | `'blur'`         | Animation style for text appearance                                                                                                                |
+| `animation.duration`       | `number`                                                                         | `500`            | Animation duration in milliseconds                                                                                                                 |
+| `animation.timingFunction` | `'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'linear'`                 | `'ease-in'`      | CSS timing function for animations                                                                                                                 |
+| `animation.tokenize`       | `'word' \| 'char'`                                                               | `'word'`         | Tokenization method for text animations                                                                                                            |
+| `animation.animateOnMount` | `boolean`                                                                        | `false`          | Run the token animation on mount or not, useful if you render the Streamdown component in the same time as the first token is receive from the LLM |
+| `extensions`               | `Array<Extension>`                                                               | `[]`             | Custom marked tokenizers to render special markdown blocks or inline tokens                                                                        |
+| `children`                 | `Snippet<[{token:GenericToken, streamdown: StreamdownContext, children: Snippet` | `undefined`      | Snippet used to render element that are not supported by Streamdown and tokenized by your custom extensions                                        |
 
 #### All Available Customizable Elements:
 
@@ -435,15 +401,15 @@ This heading uses a custom component with your design system!`;
 
 **Lists**: `ul`, `ol`, `li`
 
-**Code**: `code`, `inlineCode`, `pre`
+**Code**: `code`, `codeSpan`
 
-**Tables**: `table`, `thead`, `tbody`, `tr`, `th`, `td`
+**Tables**: `table`, `thead`, `tbody`, `tr`, `th`, `td`, `tfoot`
 
-**Special Content**: `blockquote`, `hr`, `alert`, `mermaid`, `math`, `inlineMath`
+**Special Content**: `blockquote`, `hr`, `alert`, `mermaid`, `math`, `footnoteRef`
 
 **Note**: The above elements are **supported by Streamdown** and should be customized using individual props or the theme system.
 
-## 🎨 Advanced Theming System
+## 🎨 Theming System
 
 ### Built-in Themes
 
@@ -548,6 +514,66 @@ Each component supports multiple themeable parts:
 
 Themes are intelligently merged using Tailwind's class merging utility, so you only need to override the specific parts you want to customize while keeping the default styling for everything else.
 
+## 💉 Extensibility
+
+Streamdown is extensible through the use of custom extensions.
+
+An extension is an object that has a `name`, a `level` and a `tokenizer` function.
+
+- `name`: The name of the extension
+- `level`: The level of the extension, can be `block` or `inline`
+- `tokenizer`: The tokenizer function, see [marked](https://github.com/markedjs/marked) for more information
+
+To render the extension custom tokens, you can then simply use the `children` snippet.
+
+### Example
+
+```svelte
+<script lang="ts">
+	import { Streamdown, type Extension } from 'svelte-streamdown';
+	const markedCollapsible: Extension = {
+		name: 'collapsible',
+		level: 'block',
+		tokenizer(this, src) {
+			// Match [detail]...[detail] blocks (case insensitive)
+			const detailMatch = src.match(/^\[detail\](.*?)\[detail\]/is);
+
+			if (detailMatch) {
+				const content = detailMatch[1] || '';
+				const tokens = this.lexer.blockTokens(content);
+
+				return {
+					type: 'detail',
+					raw: detailMatch[0], // The entire matched string including tags
+					tokens
+				};
+			}
+
+			return undefined;
+		}
+	};
+</script>
+
+<Streamdown
+	extensions={[markedCollapsible]}
+	content={`
+[detail]	
+This is a collapsible **section**
+[detail]`}
+>
+	{#snippet children({ token, streamdown, children })}
+		{#if token.type === 'detail'}
+			<details>
+				<summary> Detail </summary>
+				<div>
+					{@render children()}
+				</div>
+			</details>
+		{/if}
+	{/snippet}
+</Streamdown>
+```
+
 ## 🛠️ Development
 
 ### Setup

package/dist/Block.svelte

@@ -14,8 +14,8 @@
 		insideFootnote?: boolean;
 	} = $props();
 
-	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim())));
 	const streamdown = useStreamdown();
+	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim()), streamdown.extensions));
 </script>
 
 {#snippet renderChildren(tokens: StreamdownToken[])}

package/dist/Elements/Element.svelte

@@ -223,6 +223,40 @@
 	<Alert {token} {children} />
 {:else if token.type === 'footnoteRef'}
 	<FootnoteRef {token} />
+{:else if token.type === 'footnote'}
+	<!-- TODO Footnotes are rendered inside the FootnoteRef popover -->
+{:else if token.type === 'descriptionList'}
+	<Slot props={{ children, token }} render={streamdown.snippets.descriptionList}>
+		<dl class={streamdown.theme.descriptionList.base}>
+			{@render children()}
+		</dl>
+	</Slot>
+{:else if token.type === 'description'}
+	<Slot props={{ children, token }} render={streamdown.snippets.description}>
+		<div class={streamdown.theme.description.base}>
+			{@render children()}
+		</div>
+	</Slot>
+{:else if token.type === 'descriptionTerm'}
+	<Slot props={{ children, token }} render={streamdown.snippets.descriptionTerm}>
+		<dt class={streamdown.theme.descriptionTerm.base}>
+			{@render children()}
+		</dt>
+	</Slot>
+{:else if token.type === 'descriptionDetail'}
+	<Slot props={{ children, token }} render={streamdown.snippets.descriptionDetail}>
+		<dd class={streamdown.theme.descriptionDetail.base}>
+			{@render children()}
+		</dd>
+	</Slot>
+{:else if token.type === 'def'}
+	<!-- TODO This does not seems to be tokenized for now -->
+{:else if token.type === 'escape'}
+	<!-- TODO This does not seems to be tokenized for now -->
+{:else if token.type === 'space'}
+	<!-- TODO This does not seems to be tokenized for now -->
+{:else if token.type === 'text'}
+	{@render children()}
 {:else if token.type === 'html'}
 	{#if streamdown.renderHtml}
 		{@const content =
@@ -230,6 +264,6 @@
 		{@html content}
 	{/if}
 {:else}
-	<!-- For tokens we don't handle specifically, render children or fallback -->
-	{@render children?.()}
+	<!-- For tokens we don't handle specifically, it may certainely be a custom extension to to the children props to handle -->
+	{@render streamdown.children?.({ token, children, streamdown })}
 {/if}

package/dist/Elements/index.d.ts

@@ -6,4 +6,3 @@ export { default as Link } from './Link.svelte';
 export { default as Math } from './Math.svelte';
 export { default as Mermaid } from './Mermaid.svelte';
 export { default as Slot } from './Slot.svelte';
-export { default as Table } from './Table.svelte';

package/dist/Elements/index.js

@@ -6,4 +6,3 @@ export { default as Link } from './Link.svelte';
 export { default as Math } from './Math.svelte';
 export { default as Mermaid } from './Mermaid.svelte';
 export { default as Slot } from './Slot.svelte';
-export { default as Table } from './Table.svelte';

package/dist/Streamdown.svelte

@@ -25,6 +25,8 @@
 		animation,
 		element = $bindable(),
 		icons,
+		children,
+		extensions,
 		...snippets
 	}: StreamdownProps = $props();
 
@@ -99,6 +101,12 @@
 				mermaid: mermaidControls
 			};
 		},
+		get children() {
+			return children;
+		},
+		get extensions() {
+			return extensions;
+		},
 		get icons() {
 			return icons;
 		}
@@ -106,7 +114,7 @@
 
 	const id = $props.id();
 
-	const blocks = $derived(parseBlocks(content));
+	const blocks = $derived(parseBlocks(content, streamdown.extensions));
 </script>
 
 <div bind:this={element} class={className}>

package/dist/context.svelte.d.ts

@@ -28,10 +28,11 @@ export declare class StreamdownContext {
     });
 }
 export declare const useStreamdown: () => StreamdownContext;
-import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH } from './marked/index.js';
+import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken } from './marked/index.js';
 import type { Tokens } from 'marked';
 import type { ListItemToken, ListToken } from './marked/marked-list.js';
 import type { Footnote, FootnoteRef, FootnoteToken } from './marked/marked-footnotes.js';
+import type { DescriptionDetailToken, DescriptionListToken, DescriptionTermToken, DescriptionToken } from './marked/marked-dl.js';
 type TokenSnippet = {
     heading: Tokens.Heading;
     paragraph: Tokens.Paragraph;
@@ -62,6 +63,10 @@ type TokenSnippet = {
     footnotePopover: FootnoteToken;
     sup: SubSupToken;
     sub: SubSupToken;
+    descriptionList: DescriptionListToken;
+    description: DescriptionToken;
+    descriptionTerm: DescriptionTermToken;
+    descriptionDetail: DescriptionDetailToken;
 };
 type PredefinedElements = keyof TokenSnippet;
 export type Snippets = {
@@ -123,5 +128,11 @@ export type StreamdownProps = {
         caution?: Snippet;
         important?: Snippet;
     };
+    extensions?: Extension[];
+    children?: Snippet<[{
+        streamdown: StreamdownContext;
+        token: GenericToken;
+        children: Snippet;
+    }]>;
 } & Partial<Snippets>;
 export {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Streamdown } from './Streamdown.svelte';
 export { useStreamdown, type StreamdownProps } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
-export { lex, parseBlocks, type StreamdownToken } from './marked/index.js';
+export { type Extension, type StreamdownToken } from './marked/index.js';
+export { lex, parseBlocks } from './marked/index.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { default as Streamdown } from './Streamdown.svelte';
 export { useStreamdown } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme } from './theme.js';
+export {} from './marked/index.js';
 export { lex, parseBlocks } from './marked/index.js';

package/dist/marked/index.d.ts

@@ -1,4 +1,4 @@
-import { type MarkedToken, type Tokens } from 'marked';
+import { type MarkedToken, type Token, type TokenizerStartFunction, type TokenizerThis, type Tokens, type TokensList } from 'marked';
 import { type AlertToken } from './marked-alert.js';
 import { type FootnoteToken } from './marked-footnotes.js';
 import { type MathToken } from './marked-math.js';
@@ -7,8 +7,21 @@ import { type ListItemToken, type ListToken } from './marked-list.js';
 import { type BrToken } from './marked-br.js';
 import { type HrToken } from './marked-hr.js';
 import { type TableToken, type THead, type TBody, type TFoot, type THeadRow, type TRow, type TH, type TD } from './marked-table.js';
-export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD;
+import { type DescriptionDetailToken, type DescriptionListToken, type DescriptionTermToken, type DescriptionToken } from './marked-dl.js';
+export type GenericToken = {
+    type: string;
+    raw: string;
+    tokens?: Token[];
+} & Record<string, any>;
+export type Extension = {
+    name: string;
+    level: 'block' | 'inline';
+    tokenizer: (this: TokenizerThis, src: string, tokens: Token[] | TokensList) => GenericToken | undefined;
+    start?: TokenizerStartFunction;
+    applyInBlockParsing?: boolean;
+};
+export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken;
 export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
-export declare const lex: (markdown: string) => StreamdownToken[];
-export declare const parseBlocks: (markdown: string) => string[];
+export declare const lex: (markdown: string, extensions?: Extension[]) => StreamdownToken[];
+export declare const parseBlocks: (markdown: string, extensions?: Extension[]) => string[];
 export type { MathToken, AlertToken, FootnoteToken, SubSupToken, BrToken, HrToken };

package/dist/marked/index.js

@@ -2,22 +2,13 @@ import { Lexer } from 'marked';
 import { markedAlert } from './marked-alert.js';
 import { markedFootnote } from './marked-footnotes.js';
 import { markedMath } from './marked-math.js';
-import { markedSubSup } from './marked-subsup.js';
+import { markedSub, markedSup } from './marked-subsup.js';
 import { markedList } from './marked-list.js';
 import { markedBr } from './marked-br.js';
 import { markedHr } from './marked-hr.js';
 import { markedTable } from './marked-table.js';
-const extensions = [
-    markedTable(),
-    markedFootnote(),
-    markedAlert(),
-    markedMath(),
-    markedSubSup(),
-    markedList(),
-    markedBr(),
-    markedHr()
-];
-const parseExtensions = (...ext) => {
+import { markedDl, markedDt } from './marked-dl.js';
+const parseExtensions = (...extensions) => {
     const options = {
         gfm: true,
         extensions: {
@@ -29,35 +20,33 @@ const parseExtensions = (...ext) => {
             startInline: []
         }
     };
-    ext.forEach(({ extensions }) => {
-        extensions.forEach(({ level, name, tokenizer, ...rest }) => {
-            if ('start' in rest && rest.start) {
-                if (level === 'block') {
-                    options.extensions.startBlock.push(rest.start);
-                }
-                else {
-                    options.extensions.startInline.push(rest.start);
-                }
+    extensions.forEach(({ level, name, tokenizer, ...rest }) => {
+        if ('start' in rest && rest.start) {
+            if (level === 'block') {
+                options.extensions.startBlock.push(rest.start);
             }
-            if (tokenizer) {
-                if (level === 'block') {
-                    options.extensions.block.push(tokenizer);
-                }
-                else {
-                    options.extensions.inline.push(tokenizer);
-                }
+            else {
+                options.extensions.startInline.push(rest.start);
             }
-        });
+        }
+        if (tokenizer) {
+            if (level === 'block') {
+                options.extensions.block.push(tokenizer);
+            }
+            else {
+                options.extensions.inline.push(tokenizer);
+            }
+        }
     });
     return options;
 };
-const blockLexer = new Lexer(parseExtensions(markedHr(), markedFootnote(), markedTable()));
-export const lex = (markdown) => {
-    return new Lexer(parseExtensions(markedHr(), markedTable(), markedFootnote(), markedAlert(), markedMath(), markedSubSup(), markedList(), markedBr()))
+export const lex = (markdown, extensions = []) => {
+    return new Lexer(parseExtensions(markedHr, markedTable, ...markedFootnote(), markedAlert, ...markedMath, markedSub, markedSup, markedList, markedBr, markedDl, markedDt, ...extensions))
         .lex(markdown)
         .filter((token) => token.type !== 'space' && token.type !== 'footnote');
 };
-export const parseBlocks = (markdown) => {
+export const parseBlocks = (markdown, extensions = []) => {
+    const blockLexer = new Lexer(parseExtensions(markedHr, ...markedFootnote(), markedDl, markedTable, ...extensions.filter(({ level, applyInBlockParsing }) => level === 'block' && applyInBlockParsing)));
     return blockLexer.blockTokens(markdown, []).reduce((acc, block) => {
         if (block.type === 'space' || block.type === 'footnote') {
             return acc;

package/dist/marked/marked-alert.d.ts

@@ -1,14 +1,8 @@
+import type { Extension } from './index.js';
 import type { Tokenizer, Tokens } from 'marked';
-import type { TokenizerExtensionFunction } from 'marked';
 type variantType = 'note' | 'tip' | 'important' | 'warning' | 'caution';
 export declare function createSyntaxPattern(type: variantType): string;
-export declare function markedAlert(): {
-    extensions: Array<{
-        name: string;
-        level: 'block' | 'inline';
-        tokenizer: TokenizerExtensionFunction;
-    }>;
-};
+export declare const markedAlert: Extension;
 export declare function processAlertToken(token: Tokens.Blockquote, tokenizer: Tokenizer): void;
 export type AlertToken = {
     type: 'alert';

package/dist/marked/marked-alert.js

@@ -3,26 +3,20 @@ const variants = ['note', 'tip', 'important', 'warning', 'caution'];
 export function createSyntaxPattern(type) {
     return `^\\s*[\\*_]*\\[!${type.toUpperCase()}\\][\\*_]*\\s*`;
 }
-export function markedAlert() {
-    const defaultLexer = new Lexer({ gfm: true });
-    const defaultTokenizer = defaultLexer.options.tokenizer;
-    return {
-        extensions: [
-            {
-                name: 'alert',
-                level: 'block',
-                tokenizer(src) {
-                    const cap = defaultTokenizer.rules.block.blockquote.exec(src);
-                    if (cap) {
-                        const blockquoteToken = defaultTokenizer.blockquote(src);
-                        blockquoteToken && processAlertToken(blockquoteToken, this.lexer.options.tokenizer);
-                        return blockquoteToken;
-                    }
-                }
-            }
-        ]
-    };
-}
+const defaultLexer = new Lexer({ gfm: true });
+const defaultTokenizer = defaultLexer.options.tokenizer;
+export const markedAlert = {
+    name: 'alert',
+    level: 'block',
+    tokenizer(src) {
+        const cap = defaultTokenizer.rules.block.blockquote.exec(src);
+        if (cap) {
+            const blockquoteToken = defaultTokenizer.blockquote(src);
+            blockquoteToken && processAlertToken(blockquoteToken, this.lexer.options.tokenizer);
+            return blockquoteToken;
+        }
+    }
+};
 export function processAlertToken(token, tokenizer) {
     const matchedVariant = variants.find((type) => new RegExp(createSyntaxPattern(type), 'i').test(('text' in token && token.text) || ''));
     if (!matchedVariant) {

package/dist/marked/marked-br.d.ts

@@ -1,12 +1,6 @@
-import type { TokenizerExtensionFunction } from 'marked';
+import type { Extension } from './index.js';
 export interface BrToken {
     type: 'br';
     raw: string;
 }
-export declare function markedBr(): {
-    extensions: Array<{
-        name: string;
-        level: 'inline';
-        tokenizer: TokenizerExtensionFunction;
-    }>;
-};
+export declare const markedBr: Extension;

package/dist/marked/marked-br.js

@@ -1,21 +1,15 @@
-export function markedBr() {
-    return {
-        extensions: [
-            {
-                name: 'br',
-                level: 'inline',
-                tokenizer(src) {
-                    // Match HTML <br> tags (with or without closing slash, case insensitive)
-                    const match = src.match(/^<br\s*\/?>/i);
-                    if (match) {
-                        return {
-                            type: 'br',
-                            raw: match[0]
-                        };
-                    }
-                    return undefined;
-                }
-            }
-        ]
-    };
-}
+export const markedBr = {
+    name: 'br',
+    level: 'inline',
+    tokenizer(src) {
+        // Match HTML <br> tags (with or without closing slash, case insensitive)
+        const match = src.match(/^<br\s*\/?>/i);
+        if (match) {
+            return {
+                type: 'br',
+                raw: match[0]
+            };
+        }
+        return undefined;
+    }
+};