diff --git a/.changeset/healthy-brooms-travel.md b/.changeset/healthy-brooms-travel.md
new file mode 100644
index 000000000000..7ff906011791
--- /dev/null
+++ b/.changeset/healthy-brooms-travel.md
@@ -0,0 +1,5 @@
+---
+'@modern-js/main-doc': patch
+---
+
+docs(main-doc): 导出 LoaderData 类型 检查代码高亮
diff --git a/packages/document/main-doc/docs/en/tutorials/first-app/c05-loader.mdx b/packages/document/main-doc/docs/en/tutorials/first-app/c05-loader.mdx
index 736d1df744b6..94ce956a6b50 100644
--- a/packages/document/main-doc/docs/en/tutorials/first-app/c05-loader.mdx
+++ b/packages/document/main-doc/docs/en/tutorials/first-app/c05-loader.mdx
@@ -23,7 +23,7 @@ Create `src/routes/page.data.ts`:
 ```tsx
 import { name, internet } from 'faker';
 
-type LoaderData = {
+export type LoaderData = {
   code: number;
   data: {
     name: string;
@@ -56,8 +56,9 @@ Data Loader doesn't just work for SSR. In CSR projects, Data Loader can also avo
 
 Modern.js also provides a hooks API called `useLoaderData`, we modify the exported component of `src/routes/page.tsx`:
 
-```tsx {1,4,13}
+```tsx {1,2,5,13}
 import { useLoaderData } from '@modern-js/runtime/router';
+import type { LoaderData } from './page.data';
 
 function Index() {
   const { data } = useLoaderData() as LoaderData;
diff --git a/packages/document/main-doc/docs/zh/tutorials/first-app/c05-loader.mdx b/packages/document/main-doc/docs/zh/tutorials/first-app/c05-loader.mdx
index 4ebb8928ef6f..baca5de7c516 100644
--- a/packages/document/main-doc/docs/zh/tutorials/first-app/c05-loader.mdx
+++ b/packages/document/main-doc/docs/zh/tutorials/first-app/c05-loader.mdx
@@ -23,7 +23,7 @@ pnpm add @types/faker@5 -D
 ```tsx
 import { name, internet } from 'faker';
 
-type LoaderData = {
+export type LoaderData = {
   code: number;
   data: {
     name: string;
@@ -56,8 +56,9 @@ Data Loader 并非只为 SSR 工作。在 CSR 项目中，Data Loader 也可以
 
 Modern.js 也提供了一个叫 `useLoaderData` 的 hooks API，我们修改 `src/routes/page.tsx` 导出的组件：
 
-```tsx {1,4,13}
+```tsx {1,2,5,13}
 import { useLoaderData } from '@modern-js/runtime/router';
+import type { LoaderData } from './page.data';
 
 function Index() {
   const { data } = useLoaderData() as LoaderData;