hanzoai/docs
2
0
Fork 0
mirror of https://github.com/hanzo-docs/docs.git synced 2026-10-26 23:49:51 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(mdx): support VS Code-style #region extraction for <include /> (#2791)

Browse Source 
* feat(include): support VS Code-style #region extraction for code files

* chore: add changeset for include code region support

* improve perf & fix bugs

* Docs: introduce region support

---------

Co-authored-by: Fuma Nama <[email protected]>
This commit is contained in:
Light
2025-12-20 18:06:57 +08:00
committed by GitHub
co-authored by Fuma Nama
parent e1d70a234e
commit 8ce2c70fc5
8 changed files with 932 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/hot-eggs-itch.md
+5
View File
@@ -0,0 +1,5 @@
---
'fumadocs-mdx': minor
---
Add VS Code-style #region / #endregion support to <include /> for code files
apps/docs/content/docs/mdx/include.mdx
+18
View File
@@ -55,6 +55,24 @@ For other types of files, it will become a codeblock:
::include[page.md]{lang=md meta='title="lib.md"'}
```
You can include only a region of content:
```ts title="code.ts"
export function fn() {
//#region a
console.log('one');
//#endregion
}
```
```mdx tab="MDX"
<include>./code.ts#a</include>
```
```md tab="Markdown"
::include[./code.ts#a]
```
### `cwd`
Resolve relative paths from cwd instead of the current file:
packages/mdx/src/loaders/mdx/remark-include.ts
+93 -2
View File
@@ -11,6 +11,93 @@ import type { Directives } from 'mdast-util-directive';
import { remarkMarkAndUnravel } from '@/loaders/mdx/remark-unravel';
import { flattenNode } from './mdast-utils';
/**
* VS Code–style region extraction
* Adapted from VitePress:
* https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/snippet.ts
*/
// region marker regexes
const REGION_MARKERS = [
{
start: /^\s*\/\/\s*#?region\b\s*(.*?)\s*$/,
end: /^\s*\/\/\s*#?endregion\b\s*(.*?)\s*$/,
},
{
start: /^\s*<!--\s*#?region\b\s*(.*?)\s*-->/,
end: /^\s*<!--\s*#?endregion\b\s*(.*?)\s*-->/,
},
{
start: /^\s*\/\*\s*#region\b\s*(.*?)\s*\*\//,
end: /^\s*\/\*\s*#endregion\b\s*(.*?)\s*\*\//,
},
{
start: /^\s*#[rR]egion\b\s*(.*?)\s*$/,
end: /^\s*#[eE]nd ?[rR]egion\b\s*(.*?)\s*$/,
},
{
start: /^\s*#\s*#?region\b\s*(.*?)\s*$/,
end: /^\s*#\s*#?endregion\b\s*(.*?)\s*$/,
},
{
start: /^\s*(?:--|::|@?REM)\s*#region\b\s*(.*?)\s*$/,
end: /^\s*(?:--|::|@?REM)\s*#endregion\b\s*(.*?)\s*$/,
},
{
start: /^\s*#pragma\s+region\b\s*(.*?)\s*$/,
end: /^\s*#pragma\s+endregion\b\s*(.*?)\s*$/,
},
{
start: /^\s*\(\*\s*#region\b\s*(.*?)\s*\*\)/,
end: /^\s*\(\*\s*#endregion\b\s*(.*?)\s*\*\)/,
},
];
function dedent(lines: string[]): string {
const minIndent = lines.reduce((min, line) => {
const match = line.match(/^(\s*)\S/);
return match ? Math.min(min, match[1].length) : min;
}, Infinity);
return minIndent === Infinity
? lines.join('\n')
: lines.map((l) => l.slice(minIndent)).join('\n');
}
function extractCodeRegion(content: string, regionName: string): string {
const lines = content.split('\n');
for (let i = 0; i < lines.length; i++) {
for (const re of REGION_MARKERS) {
let match = re.start.exec(lines[i]);
if (match?.[1] !== regionName) continue;
let depth = 1;
const extractedLines: string[] = [];
for (let j = i + 1; j < lines.length; j++) {
match = re.start.exec(lines[j]);
if (match) {
depth++;
continue;
}
match = re.end.exec(lines[j]);
if (match) {
if (match[1] === regionName) depth = 0;
else if (match[1] === '') depth--;
else continue;
if (depth > 0) continue;
return dedent(extractedLines);
} else {
extractedLines.push(lines[j]);
}
}
}
}
throw new Error(`Region "${regionName}" not found`);
}
export interface Params {
lang?: string;
meta?: string;
@@ -126,14 +213,18 @@ export function remarkInclude(this: Processor): Transformer<Root, Root> {
const ext = path.extname(targetPath);
_compiler?.addDependency(targetPath);
// For non-Markdown files, support VS Code–style region extraction
if (params.lang || (ext !== '.md' && ext !== '.mdx')) {
const lang = params.lang ?? ext.slice(1);
let value = content;
if (heading) {
value = extractCodeRegion(content, heading.trim());
}
return {
type: 'code',
lang,
meta: params.meta,
value: content,
value,
data: {},
} satisfies Code;
}
packages/mdx/test/fixtures/remark-include/code.ts
Vendored
+15
View File
@@ -0,0 +1,15 @@
//#region a
console.log('hello world');
//#endregion
export function fn() {
//#region b
console.log('one');
//#region c
return function nested() {
console.log('two');
//#endregion
console.log('three');
};
//#endregion
}
packages/mdx/test/fixtures/remark-include/index.in.mdast
Vendored
+204 -34
View File
@@ -26,21 +26,27 @@
{
"children": [
{
"attributes": [],
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./test.mdx",
},
],
"name": "include",
"position": undefined,
"type": "text",
"value": "./test.mdx",
"type": "mdxJsxTextElement",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
"type": "paragraph",
},
],
"position": undefined,
"type": "paragraph",
"type": "blockquote",
},
{
"children": [
@@ -56,21 +62,27 @@
{
"children": [
{
"attributes": [],
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./test.mdx#heading",
},
],
"name": "include",
"position": undefined,
"type": "text",
"value": "./test.mdx#heading",
"type": "mdxJsxTextElement",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
"type": "paragraph",
},
],
"position": undefined,
"type": "paragraph",
"type": "blockquote",
},
{
"children": [
@@ -86,21 +98,27 @@
{
"children": [
{
"attributes": [],
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./test.mdx#section-in-jsx",
},
],
"name": "include",
"position": undefined,
"type": "text",
"value": "./test.mdx#section-in-jsx",
"type": "mdxJsxTextElement",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
"type": "paragraph",
},
],
"position": undefined,
"type": "paragraph",
"type": "blockquote",
},
{
"children": [
@@ -116,21 +134,27 @@
{
"children": [
{
"attributes": [],
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./test.mdx#section-in-directive",
},
],
"name": "include",
"position": undefined,
"type": "text",
"value": "./test.mdx#section-in-directive",
"type": "mdxJsxTextElement",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
"type": "paragraph",
},
],
"position": undefined,
"type": "paragraph",
"type": "blockquote",
},
{
"children": [
@@ -156,23 +180,29 @@
"type": "paragraph",
},
{
"attributes": {},
"children": [
{
"attributes": {},
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "./test.mdx#section-in-directive",
},
],
"position": undefined,
"type": "text",
"value": "./test.mdx#section-in-directive",
"type": "paragraph",
},
],
"name": "include",
"position": undefined,
"type": "paragraph",
"type": "containerDirective",
},
],
"name": "include",
"position": undefined,
"type": "containerDirective",
"type": "blockquote",
},
{
"children": [
@@ -186,17 +216,157 @@
"type": "paragraph",
},
{
"attributes": {},
"children": [
{
"attributes": {},
"children": [
{
"position": undefined,
"type": "text",
"value": "./test.mdx#section-in-directive",
},
],
"name": "include",
"position": undefined,
"type": "leafDirective",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "./test.mdx#section-in-directive",
"value": "Code",
},
],
"name": "include",
"depth": 2,
"position": undefined,
"type": "leafDirective",
"type": "heading",
},
{
"children": [
{
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./code.ts",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
},
],
"position": undefined,
"type": "paragraph",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "With Region:",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./code.ts#a",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
},
],
"position": undefined,
"type": "paragraph",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "With Nested Region:",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./code.ts#b",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
},
],
"position": undefined,
"type": "paragraph",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./code.ts#c",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
},
],
"position": undefined,
"type": "paragraph",
},
],
"position": undefined,
"type": "blockquote",
},
],
"position": undefined,
packages/mdx/test/fixtures/remark-include/index.mdx
Vendored
+22 -8
View File
@@ -2,28 +2,42 @@
Full:
<include>./test.mdx</include>
> <include>./test.mdx</include>
First Heading:
<include>./test.mdx#heading</include>
> <include>./test.mdx#heading</include>
In JSX:
<include>./test.mdx#section-in-jsx</include>
> <include>./test.mdx#section-in-jsx</include>
In Directive:
<include>./test.mdx#section-in-directive</include>
> <include>./test.mdx#section-in-directive</include>
## Using Directives
In Directive:
:::include
./test.mdx#section-in-directive
:::
> :::include
> ./test.mdx#section-in-directive
> :::
Inline Directive:
::include[./test.mdx#section-in-directive]
> ::include[./test.mdx#section-in-directive]
## Code
> <include>./code.ts</include>
With Region:
> <include>./code.ts#a</include>
With Nested Region:
> <include>./code.ts#b</include>
> <include>./code.ts#c</include>
packages/mdx/test/fixtures/remark-include/index.out.mdast
Vendored
+480 -274
View File
@@ -28,118 +28,124 @@
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Hello World [#heading]",
},
],
"depth": 1,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Hey there!",
},
],
"position": undefined,
"type": "paragraph",
},
{
"attributes": [
{
"name": "id",
"position": {
"end": {
"column": 29,
"line": 5,
"offset": 66,
"children": [
{
"position": undefined,
"type": "text",
"value": "Hello World [#heading]",
},
"start": {
"column": 10,
"line": 5,
"offset": 47,
],
"depth": 1,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Hey there!",
},
],
"position": undefined,
"type": "paragraph",
},
{
"attributes": [
{
"name": "id",
"position": {
"end": {
"column": 29,
"line": 5,
"offset": 66,
},
"start": {
"column": 10,
"line": 5,
"offset": 47,
},
},
"type": "mdxJsxAttribute",
"value": "section-in-jsx",
},
],
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "This is My Test.",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Nested Heading",
},
],
"depth": 3,
"position": undefined,
"type": "heading",
},
{
"lang": "ts",
"meta": null,
"position": undefined,
"type": "code",
"value": "console.log('Hello World');",
},
],
"name": "section",
"position": undefined,
"type": "mdxJsxFlowElement",
},
{
"attributes": {
"id": "section-in-directive",
},
"type": "mdxJsxAttribute",
"value": "section-in-jsx",
},
],
"children": [
{
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Heading in Directive",
},
],
"depth": 3,
"position": undefined,
"type": "text",
"value": "This is My Test.",
"type": "heading",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "some content inside.",
},
],
"position": undefined,
"type": "text",
"value": "Nested Heading",
"type": "paragraph",
},
],
"depth": 3,
"name": "section",
"position": undefined,
"type": "heading",
},
{
"lang": "ts",
"meta": null,
"position": undefined,
"type": "code",
"value": "console.log('Hello World');",
"type": "containerDirective",
},
],
"name": "section",
"position": undefined,
"type": "mdxJsxFlowElement",
},
{
"attributes": {
"id": "section-in-directive",
},
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Heading in Directive",
},
],
"depth": 3,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "some content inside.",
},
],
"position": undefined,
"type": "paragraph",
},
],
"name": "section",
"position": undefined,
"type": "containerDirective",
"type": "root",
},
],
"position": undefined,
"type": "root",
"type": "blockquote",
},
{
"children": [
@@ -157,51 +163,154 @@
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Hello World",
},
],
"data": {
"hProperties": {
"id": "heading",
},
},
"depth": 1,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Hey there!",
},
],
"position": undefined,
"type": "paragraph",
},
{
"attributes": [
{
"name": "id",
"position": {
"end": {
"column": 29,
"line": 5,
"offset": 66,
"children": [
{
"position": undefined,
"type": "text",
"value": "Hello World",
},
"start": {
"column": 10,
"line": 5,
"offset": 47,
],
"data": {
"hProperties": {
"id": "heading",
},
},
"type": "mdxJsxAttribute",
"value": "section-in-jsx",
"depth": 1,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Hey there!",
},
],
"position": undefined,
"type": "paragraph",
},
{
"attributes": [
{
"name": "id",
"position": {
"end": {
"column": 29,
"line": 5,
"offset": 66,
},
"start": {
"column": 10,
"line": 5,
"offset": 47,
},
},
"type": "mdxJsxAttribute",
"value": "section-in-jsx",
},
],
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "This is My Test.",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Nested Heading",
},
],
"data": {
"hProperties": {
"id": "nested-heading",
},
},
"depth": 3,
"position": undefined,
"type": "heading",
},
{
"lang": "ts",
"meta": null,
"position": undefined,
"type": "code",
"value": "console.log('Hello World');",
},
],
"name": "section",
"position": undefined,
"type": "mdxJsxFlowElement",
},
{
"attributes": {
"id": "section-in-directive",
},
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Heading in Directive",
},
],
"data": {
"hProperties": {
"id": "heading-in-directive",
},
},
"depth": 3,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "some content inside.",
},
],
"position": undefined,
"type": "paragraph",
},
],
"name": "section",
"position": undefined,
"type": "containerDirective",
},
],
"position": undefined,
"type": "root",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "In JSX:",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"children": [
{
"children": [
@@ -239,14 +348,27 @@
"value": "console.log('Hello World');",
},
],
"name": "section",
"position": undefined,
"type": "mdxJsxFlowElement",
"type": "root",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "In Directive:",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"attributes": {
"id": "section-in-directive",
},
"children": [
{
"children": [
@@ -277,110 +399,12 @@
"type": "paragraph",
},
],
"name": "section",
"position": undefined,
"type": "containerDirective",
"type": "root",
},
],
"position": undefined,
"type": "root",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "In JSX:",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "This is My Test.",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Nested Heading",
},
],
"data": {
"hProperties": {
"id": "nested-heading",
},
},
"depth": 3,
"position": undefined,
"type": "heading",
},
{
"lang": "ts",
"meta": null,
"position": undefined,
"type": "code",
"value": "console.log('Hello World');",
},
],
"position": undefined,
"type": "root",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "In Directive:",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Heading in Directive",
},
],
"data": {
"hProperties": {
"id": "heading-in-directive",
},
},
"depth": 3,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "some content inside.",
},
],
"position": undefined,
"type": "paragraph",
},
],
"position": undefined,
"type": "root",
"type": "blockquote",
},
{
"children": [
@@ -406,40 +430,46 @@
"type": "paragraph",
},
{
"attributes": {},
"children": [
{
"attributes": {},
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Heading in Directive",
},
],
"data": {
"hProperties": {
"id": "heading-in-directive",
},
},
"depth": 3,
"position": undefined,
"type": "text",
"value": "Heading in Directive",
"type": "heading",
},
],
"data": {
"hProperties": {
"id": "heading-in-directive",
},
},
"depth": 3,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "some content inside.",
},
],
"position": undefined,
"type": "text",
"value": "some content inside.",
"type": "paragraph",
},
],
"name": "include",
"position": undefined,
"type": "paragraph",
"type": "root",
},
],
"name": "include",
"position": undefined,
"type": "root",
"type": "blockquote",
},
{
"children": [
@@ -453,40 +483,216 @@
"type": "paragraph",
},
{
"attributes": {},
"children": [
{
"attributes": {},
"children": [
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Heading in Directive",
},
],
"data": {
"hProperties": {
"id": "heading-in-directive",
},
},
"depth": 3,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "some content inside.",
},
],
"position": undefined,
"type": "paragraph",
},
],
"name": "include",
"position": undefined,
"type": "root",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "Code",
},
],
"depth": 2,
"position": undefined,
"type": "heading",
},
{
"children": [
{
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./code.ts",
},
],
"name": "include",
"position": undefined,
"type": "text",
"value": "Heading in Directive",
"type": "mdxJsxTextElement",
},
],
"data": {
"hProperties": {
"id": "heading-in-directive",
},
},
"depth": 3,
"data": {},
"lang": "ts",
"meta": undefined,
"position": undefined,
"type": "heading",
"type": "code",
"value": "//#region a
console.log('hello world');
//#endregion
export function fn() {
//#region b
console.log('one');
//#region c
return function nested() {
console.log('two');
//#endregion
console.log('three');
};
//#endregion
}
",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "With Region:",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./code.ts#a",
},
],
"name": "include",
"position": undefined,
"type": "text",
"value": "some content inside.",
"type": "mdxJsxTextElement",
},
],
"data": {},
"lang": "ts",
"meta": undefined,
"position": undefined,
"type": "paragraph",
"type": "code",
"value": "console.log('hello world');",
},
],
"name": "include",
"position": undefined,
"type": "root",
"type": "blockquote",
},
{
"children": [
{
"position": undefined,
"type": "text",
"value": "With Nested Region:",
},
],
"position": undefined,
"type": "paragraph",
},
{
"children": [
{
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./code.ts#b",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
},
],
"data": {},
"lang": "ts",
"meta": undefined,
"position": undefined,
"type": "code",
"value": "console.log('one');
return function nested() {
console.log('two');
console.log('three');
};",
},
],
"position": undefined,
"type": "blockquote",
},
{
"children": [
{
"children": [
{
"attributes": [],
"children": [
{
"position": undefined,
"type": "text",
"value": "./code.ts#c",
},
],
"name": "include",
"position": undefined,
"type": "mdxJsxTextElement",
},
],
"data": {},
"lang": "ts",
"meta": undefined,
"position": undefined,
"type": "code",
"value": "return function nested() {
console.log('two');",
},
],
"position": undefined,
"type": "blockquote",
},
],
"position": undefined,
packages/mdx/test/fixtures/remark-include/index.out.mdx
Vendored
+95 -53
View File
@@ -2,74 +2,116 @@
Full:
# Hello World \[#heading]
Hey there!
<section id="section-in-jsx">
This is My Test.
### Nested Heading
```ts
console.log('Hello World');
```
</section>
:::section{#section-in-directive}
### Heading in Directive
some content inside.
:::
> # Hello World \[#heading]
>
> Hey there!
>
> <section id="section-in-jsx">
> This is My Test.
>
> ### Nested Heading
>
> ```ts
> console.log('Hello World');
> ```
> </section>
>
> :::section{#section-in-directive}
> ### Heading in Directive
>
> some content inside.
> :::
First Heading:
# Hello World
Hey there!
<section id="section-in-jsx">
This is My Test.
### Nested Heading
```ts
console.log('Hello World');
```
</section>
:::section{#section-in-directive}
### Heading in Directive
some content inside.
:::
> # Hello World
>
> Hey there!
>
> <section id="section-in-jsx">
> This is My Test.
>
> ### Nested Heading
>
> ```ts
> console.log('Hello World');
> ```
> </section>
>
> :::section{#section-in-directive}
> ### Heading in Directive
>
> some content inside.
> :::
In JSX:
This is My Test.
### Nested Heading
```ts
console.log('Hello World');
```
> This is My Test.
>
> ### Nested Heading
>
> ```ts
> console.log('Hello World');
> ```
In Directive:
### Heading in Directive
some content inside.
> ### Heading in Directive
>
> some content inside.
## Using Directives
In Directive:
### Heading in Directive
some content inside.
> ### Heading in Directive
>
> some content inside.
Inline Directive:
### Heading in Directive
> ### Heading in Directive
>
> some content inside.
some content inside.
## Code
> ```ts
> //#region a
> console.log('hello world');
> //#endregion
>
> export function fn() {
> //#region b
> console.log('one');
> //#region c
> return function nested() {
> console.log('two');
> //#endregion
> console.log('three');
> };
> //#endregion
> }
>
> ```
With Region:
> ```ts
> console.log('hello world');
> ```
With Nested Region:
> ```ts
> console.log('one');
> return function nested() {
> console.log('two');
> console.log('three');
> };
> ```
> ```ts
> return function nested() {
> console.log('two');
> ```