npm - @modern-js/main-doc - Versions diffs - 2.0.2 → 2.1.0 - Mend

@modern-js/main-doc 2.0.2 → 2.1.0

Files changed (525) hide show

package/zh/guides/basic-features/html.md CHANGED Viewed

@@ -68,7 +68,7 @@ import {
   Head,
   Body,
   Scripts,
-  DocumentContext
+  DocumentContext,
 } from '@modern-js/runtime/document';
 export default function Document(): React.ReactElement {
@@ -103,41 +103,48 @@ export default function Document(): React.ReactElement {
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport"
-        content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="renderer" content="webkit">
-    <meta name="layoutmode" content="standard">
-    <meta name="imagemode" content="force">
-    <meta name="wap-font-scale" content="no">
-    <meta name="format-detection" content="telephone=no">
-    <script>...</script>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="renderer" content="webkit" />
+    <meta name="layoutmode" content="standard" />
+    <meta name="imagemode" content="force" />
+    <meta name="wap-font-scale" content="no" />
+    <meta name="format-detection" content="telephone=no" />
+    <script>
+      ...
+    </script>
     <script defer src="/static/js/lib-react.js"></script>
     <script defer src="/static/js/lib-polyfill.js"></script>
     <script defer src="/static/js/lib-router.js"></script>
-    <script defer
-        src="/static/js/vendors-node_modules_pnpm_loadable_component_5_15_2_react_18_2_0_node_modules_loadable_compon-3fb0cf.js"></script>
-    <script defer
-        src="/static/js/packages_runtime_plugin-router-legacy_dist_js_treeshaking_runtime_index_js-packages_runtime_p-28f4c9.js"></script>
+    <script
+      defer
+      src="/static/js/vendors-node_modules_pnpm_loadable_component_5_15_2_react_18_2_0_node_modules_loadable_compon-3fb0cf.js"
+    ></script>
+    <script
+      defer
+      src="/static/js/packages_runtime_plugin-router-legacy_dist_js_treeshaking_runtime_index_js-packages_runtime_p-28f4c9.js"
+    ></script>
     <script defer src="/static/js/sub.js"></script>
     <link href="https://www.baidu.com" />
-</head>
+  </head>
-<body>
+  <body>
     <div id="root">
-        <!--<?- html ?>-->
-        <h1 style="color:red">以下为构建时传过来的参数：</h1>
-        <h2> entryName：sub</h2>
-        <h2> title：</h2>
-        <h2> rootId: root</h2>
+      <!--<?- html ?>-->
+      <h1 style="color:red">以下为构建时传过来的参数：</h1>
+      <h2>entryName：sub</h2>
+      <h2>title：</h2>
+      <h2>rootId: root</h2>
     </div>
     <h1>bottom</h1>
     <!--<?- chunksMap.js ?>-->
     <!--<?- SSRDataScript ?>-->
-</body>
+  </body>
 </html>
 ```
@@ -161,26 +168,27 @@ Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <%= meta %>
-  <title><%= title %></title>
-  <%= topTemplate %>
-  <script>
-    window.__assetPrefix__ = '<%= assetPrefix %>';
-  </script>
-  <%= headTemplate %>
-  <!-- webpack inject css -->
-</head>
-<body>
-  <noscript>
-    We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.
-  </noscript>
-  <div id="<%= mountId %>"></div>
-  <%= bodyTemplate %>
-  <!-- webpack inject js -->
-  <!--<?- bottomTemplate ?>-->
-</body>
+  <head>
+    <%= meta %>
+    <title><%= title %></title>
+    <%= topTemplate %>
+    <script>
+      window.__assetPrefix__ = '<%= assetPrefix %>';
+    </script>
+    <%= headTemplate %>
+    <!-- webpack inject css -->
+  </head>
+  <body>
+    <noscript>
+      We're sorry but react app doesn't work properly without JavaScript
+      enabled. Please enable it to continue.
+    </noscript>
+    <div id="<%= mountId %>"></div>
+    <%= bodyTemplate %>
+    <!-- webpack inject js -->
+    <!--<?- bottomTemplate ?>-->
+  </body>
 </html>
 ```
@@ -220,7 +228,7 @@ Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中
 例如，如下设置的 HTML 片段仅对入口 `entry1` 生效：
-```html
+```bash
 .
 ├── config/
 │   └── html/

package/zh/guides/basic-features/index.md CHANGED Viewed

@@ -5,8 +5,3 @@ type: ref
 # 基础功能
 本节涵盖了使用应用工程的基础功能。

package/zh/guides/basic-features/mock.md CHANGED Viewed

@@ -50,15 +50,15 @@ const Mock = require('mockjs');
 module.exports = {
   '/api/getInfo': Mock.mock({
-     'data|1-10': [{ name: '@cname' }]
-   }), /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */
+    'data|1-10': [{ name: '@cname' }],
+  }) /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */,
 };
 ```
 :::info 更多随机数据生成库
-* [Chancejs](https://github.com/chancejs/chancejs)
-* [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)
+- [Chancejs](https://github.com/chancejs/chancejs)
+- [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)
 :::

package/zh/guides/basic-features/proxy.md CHANGED Viewed

@@ -7,8 +7,8 @@ sidebar_position: 5
 Modern.js 在 [`tools.devServer`](/docs/configure/app/tools/dev-server) 中提供了配置开发环境代理的方式。例如，将本地开发接口，代理到线上某个地址：
-```typescript title="modern.config.ts"
-import { defineConfig }  from '@modern-js/app-tools';
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   tools: {
@@ -40,7 +40,7 @@ import GlobalProxy from '@site-docs/components/global-proxy.md'
 通过配置 [`bff.proxy`](/docs/configure/app/bff/proxy) 可以代理 BFF API 请求到指定的服务上，上述两种代理不同，它同样可以用在生产环境：
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   bff: {
     proxy: {
@@ -53,8 +53,7 @@ export default defineConfig({
 例如代码中使用一体化 BFF 调用时，最终请求 `http://localhost:8080/api/v1/topics` 会自动代理到 `https://cnodejs.org/api/v1/topics`：
 ```js
-import getTopics from '@api/v1/topics'
+import getTopics from '@api/v1/topics';
 getTopics();
 ```

package/zh/guides/basic-features/routes.md CHANGED Viewed

@@ -26,7 +26,6 @@ Modern.js 支持了业界流行的约定式路由模式：**嵌套路由**，使
 +------------------+                  +-----------------+
 ```
 ### 路由文件约定
 在`routes/` 目录下，目录名会作为路由 url 的映射，Modern.js 有两个文件约定 `layout.[jt]sx` 和 `page.[jt]sx`（后面简写为 `.tsx`）。这两个文件决定了应用的布局层次，其中 `layout.tsx` 中作为布局组件，`page.tsx` 作为内容组件，是整条路由的叶子节点（一条路由有且仅有一个叶子节点，且必须以叶子节点结尾）。
@@ -42,6 +41,7 @@ Modern.js 支持了业界流行的约定式路由模式：**嵌套路由**，使
 ```
 会产出下面两条路由：
 - `/`
 - `/user`
@@ -91,8 +91,8 @@ export default () => {
     <>
       <Outlet></Outlet>
     </>
-  )
-}
+  );
+};
 ```
 :::note
@@ -122,6 +122,7 @@ export default () => {
 ```
 2. 当路由为 `/blog` 时，`routes/layout.tsx` 中的 `<Outlet>` 代表的是 `routes/blog/page.tsx` 中导出的组件，生成以下 UI 结构：
 ```tsx
 <Layout>
   <BlogPage />
@@ -165,7 +166,7 @@ export default () => {
 ### 无路径布局
-当目录名以 __ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
+当目录名以 \_\_ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
 ```
 .
@@ -180,7 +181,7 @@ export default () => {
     └── page.tsx
 ```
-Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组件会作为 `login/page.tsx` 和 `signup/page.tsx` 的布局组件，但__auth 不会作为路由路径片段。
+Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组件会作为 `login/page.tsx` 和 `signup/page.tsx` 的布局组件，但`__auth` 不会作为路由路径片段。
 当需要为某些类型的路由，做独立的布局，或是想要将路由做归类时，这一功能非常有用。
@@ -202,11 +203,11 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```tsx
 <RootLayout>
-   <UserProfileEdit />   // routes/user.profile.[id].edit/page.tsx
+  <UserProfileEdit /> // routes/user.profile.[id].edit/page.tsx
 </RootLayout>
 ```
-### Loading
+### (WIP)Loading
 `routes/` 下每一层目录中，开发者可以创建 `loading.tsx` 文件，默认导出一个 `<Loading>` 组件。
@@ -225,6 +226,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```
 当定义 `loading.tsx` 时，就相当于以下布局：
 ```tsx title="当路由为 / 时"
 <Layout>
   <Suspense fallback={<Loading/>}>
@@ -235,7 +237,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```tsx title="当路由为 /blog 时"
 <Layout>
-  <Suspense fallback={<Loading/>}>
+  <Suspense fallback={<Loading />}>
     <BlogPage />
   </Suspense>
 </Layout>
@@ -243,11 +245,12 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```tsx title="当路由为 /blog/123 时"
 <Layout>
-  <Suspense fallback={<Loading/>}>
+  <Suspense fallback={<Loading />}>
     <BlogIdPage />
   </Suspense>
 </Layout>
 ```
 :::info
 当目录的 layout 组件不存在时，该目录下的 loading 组件也不会生效。
 Modern.js 建议必须有根 layout 和根 loading。
@@ -257,7 +260,6 @@ Modern.js 建议必须有根 layout 和根 loading。
 同理，当路由从 `/` 或者 `/blog` 跳转到 `/blog/123` 时，如果 `blog/[id]/page` 组件的 JS Chunk 还未加载，也会先展示 `loading.tsx` 中导出的组件 UI。
 ### 错误处理
 `routes/` 下每一层目录中，开发者同样可以定义一个 `error.tsx` 文件，默认导出一个 `<ErrorBoundary>` 组件。
@@ -267,6 +269,7 @@ Modern.js 建议必须有根 layout 和根 loading。
 `<ErrorBoundary>` 可以返回出错时的 UI 视图，当前层级未声明 `<ErrorBoundary>` 组件时，错误会向上冒泡到更上层的组件，直到被捕获或抛出错误。同时，当组件出错时，只会影响捕获到该错误的路由组件及子组件，其他组件的状态和视图不受影响，可以继续交互。
 <!-- Todo API 路由-->
 在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/docs/apis/app/runtime/router/#useparams) 获取的错误的具体信息：
 ```tsx
@@ -275,14 +278,98 @@ const ErrorBoundary = () => {
   const error = useRouteError();
   return (
     <div>
-        <h1>{error.status}</h1>
-        <h2>{error.message}</h2>
+      <h1>{error.status}</h1>
+      <h2>{error.message}</h2>
     </div>
-  )
-}
+  );
+};
 export default ErrorBoundary;
 ```
+### 运行时配置
+在每个根 `Layout` 组件中(`routes/layout.ts`)，可以动态地定义应用运行时配置：
+```ts title="src/routes/layout.tsx"
+// 定义运行时配置
+import type { AppConfig } from '@modern-js/runtime';
+export const config = (): AppConfig => {
+  return {
+    router: {
+      supportHtml5History: false
+    }
+  }
+};
+```
+### 渲染前的钩子
+在有些场景下，需要在应用渲染前做一些操作，可以在 `routes/layout.tsx` 中定义 `init` 钩子，`init` 在客户端和服务端均会执行，基本使用示例如下：
+```ts title="src/routes/layout.tsx"
+import type { RuntimeContext } from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  // do something
+};
+```
+通过 `init` 钩子可以挂载一些全局的数据，在应用的其他地方可以访问 `runtimeContext` 变量：
+:::note
+该功能在应用需要页面前置的数据、自定义数据注入或是框架迁移（如 Next.js）时会非常有用。
+:::
+```ts title="src/routes/layout.tsx"
+import {
+  RuntimeContext,
+} from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  return {
+    message: 'Hello World',
+  }
+}
+```
+```tsx title="src/routes/page.tsx"
+import { useRuntimeContext } from '@modern-js/runtime';
+export default () => {
+  const { context } = useRuntimeContext();
+  const { message } = context.getInitData();
+  return <div>{message}</div>;
+}
+```
+配合 SSR 功能时，浏览器端可以获取到 SSR 时 `init` 返回的数据，开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据，例如：
+```tsx title="src/routes/layout.tsx"
+import {
+  RuntimeContext,
+} from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  if (process.env.JUPITER_TARGET === 'node') {
+    return {
+      message: 'Hello World By Server',
+    }
+  } else {
+    const { context } = runtimeContext;
+    const data = context.getInitData();
+    // 如果没有获取到期望的数据
+    if (!data.message) {
+      return {
+        message: 'Hello World By Client'
+      }
+    }
+  }
+}
+```
 ## 自控式路由
 以 `src/App.tsx` 为约定的入口，Modern.js 不会多路由做额外的操作，开发者可以自行使用 React Router 6 的 API 进行开发，例如：
@@ -316,8 +403,8 @@ export default () => {
 export default defineConfig({
   runtime: {
     router: true,
-  }
-})
+  },
+});
 ```
 Modern.js 从 `@modern-js/runtime/router` 命名空间暴露了 React Router 的 API 供开发者使用，保证开发者和 Modern.js 中使用同一份代码。另外，这种情况下，React Router 的代码会被打包到 JS 产物中。如果项目已经有自己的路由方案，或者不需要使用客户端路由，可以关闭这个功能。
@@ -326,6 +413,6 @@ Modern.js 从 `@modern-js/runtime/router` 命名空间暴露了 React Router 的
 export default defineConfig({
   runtime: {
     router: false,
-  }
-})
+  },
+});
 ```

package/zh/guides/concept/entries.md CHANGED Viewed

@@ -59,7 +59,6 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
 Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入口，默认路由为 `/`，其他入口默认路由为 `/{entryName}`。
 :::
 ## 入口类型
 不同的入口类型具有不同的编译和运行时行为。在 Modern.js 创建项目时，开发者可以手动选择创建**框架模式**或是**构建模式**的项目。完成创建后，可以看到不同模式的项目样板文件是不同的。
@@ -75,7 +74,7 @@ Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入
 1. 具有 `routes/` 目录
 2. 具有 `App.[jt]sx?` 文件
 3. 具有 `index.[jt]sx?` 文件
-2. 具有 `pages/` 目录（兼容 Modern.js 1.0）
+4. 具有 `pages/` 目录（兼容 Modern.js 1.0）
 当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
@@ -106,10 +105,9 @@ Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入
 如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 还是会根据 runtime 的设置情况生成 createApp 包裹后的代码。在渲染过程中，将 createApp 包裹后的组件作为参数传递给 index 文件导出的函数，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
 ```tsx
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
 import { bootstrap } from '@modern-js/runtime';
 export default (App: React.ComponentType) => {
   // do something before bootstrap...
   bootstrap(App, 'root', undefined, ReactDOM);
@@ -137,16 +135,16 @@ let AppWrapper = null;
 function render() {
   AppWrapper = createApp({
     // runtime 的插件参数...
-  })(App)
+  })(App);
   if (IS_BROWSER) {
     customBootstrap(AppWrapper);
   }
-  return AppWrapper
+  return AppWrapper;
 }
 AppWrapper = render();
-export default AppWrapper;;
+export default AppWrapper;
 ```
 ### 构建模式入口

package/zh/guides/get-started/quick-start.md CHANGED Viewed

@@ -28,7 +28,6 @@ npx @modern-js/create myapp
 ## 初始化项目
 import InitApp from '@site-docs/components/init-app.md'
 <InitApp />
@@ -46,7 +45,7 @@ import DebugApp from '@site-docs/components/debug-app.md'
 可以通过配置文件来开启功能，或覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
 ```ts
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
+import appTools, { defineConfig } from '@modern-js/app-tools';
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
@@ -57,7 +56,7 @@ export default defineConfig({
   server: {
     ssr: true,
   },
-  plugins: [AppToolsPlugin()],
+  plugins: [appTools()],
 });
 ```
@@ -89,7 +88,7 @@ info    File sizes after production build:
   dist/static/js/async/509.fcb06e14.js      283 B        230 B
  Client ✔ done in 3.57s
- ```
+```
 构建产物默认生成到 `dist/`，目录结构如下：

package/zh/guides/topic-detail/changesets/add.md CHANGED Viewed

@@ -46,7 +46,6 @@ pnpm run change
 ---
 feat: test module solution changeset
 ```
 该文件中包含了 changeset 的所有信息。
@@ -115,11 +114,10 @@ pnpm run change -- --empty
 如果当前变更是修改仓库的一些基础设施，比如 CI、测试等，就不需要添加 changeset 或者可以添加一个空的 changeset。
--  一个 pull reuqest 可以提交多个 changeset
+- 一个 pull reuqest 可以提交多个 changeset
 当一个 pull request 存在多个功能开发或者问题修复时，可以多次执行 `pnpm run change` 添加多个 changeset 文件，每个文件选择对应功能的包和添加变更信息即可。
 - 创建 changeset 时，需要选择该功能相关的所有包
 在 Monorepo 中创建 changeset 时，需要选中和该功能相关的所有变更包，避免出现发版时部分包未发布的情况。

package/zh/guides/topic-detail/changesets/changelog.md CHANGED Viewed

@@ -22,8 +22,8 @@ Changelog 信息主要包含以下两种信息：
 - changeset
-```typescript
-export type VersionType = "major" | "minor" | "patch" | "none";
+```ts
+export type VersionType = 'major' | 'minor' | 'patch' | 'none';
 export type Release = { name: string; type: VersionType };
@@ -47,7 +47,7 @@ Changelog 内容。
 `@changesets/cli/changelog` 默认处理逻辑为将 `summary` 信息按照换行符 `\n` 分割，第一样前面增加 `-` 作为列表开头，其他内容作为第一行内容的补充整理在列表下方。
-```typescript
+```ts
 async function getReleaseLine(changeset, type) {
   const [firstLine, ...futureLines] = changeset.summary
     .split('\n')
@@ -75,18 +75,18 @@ async function getReleaseLine(changeset, type) {
 - dependenciesUpdated
-```typescript
+```ts
 type ModCompWithPackage = {
-    name: string; // 依赖模块名称
-    type: VersionType; // 依赖模块的升级类型
-    oldVersion: string; // 依赖模块当前版本号
-    newVersion: string; // 依赖模块新版本号
-    changesets: string[]; // 关联的 changeset id 列表
-    packageJson: PackageJSON; // 依赖模块完整的 package.json 内容
-    dir: string; // 依赖模块的路径(绝对路径)
+  name: string; // 依赖模块名称
+  type: VersionType; // 依赖模块的升级类型
+  oldVersion: string; // 依赖模块当前版本号
+  newVersion: string; // 依赖模块新版本号
+  changesets: string[]; // 关联的 changeset id 列表
+  packageJson: PackageJSON; // 依赖模块完整的 package.json 内容
+  dir: string; // 依赖模块的路径(绝对路径)
 };
-type DependenciesUpdated = ModCompWithPackage[]
+type DependenciesUpdated = ModCompWithPackage[];
 ```
 #### 返回值
@@ -97,23 +97,23 @@ Changelog 内容。
 `@changesets/cli/changelog` 默认会使用 changesets 信息展示对应的 `Updated dependencies + commit id`，以列表形式展示。然后根据 `dependenciesUpdated` 信息展示对应的依赖包包名和新版本号，作为列表的子列表项。
-```typescript
+```ts
 async function getDependencyReleaseLine(changesets, dependenciesUpdated) {
-    console.log("getDependencyReleaseLine", changesets, dependenciesUpdated)
-    if (dependenciesUpdated.length === 0) return "";
+  console.log('getDependencyReleaseLine', changesets, dependenciesUpdated);
+  if (dependenciesUpdated.length === 0) return '';
-    const changesetLinks = changesets.map(
-      changeset =>
-        `- Updated dependencies${
-          changeset.commit ? ` [${changeset.commit}]` : ""
-        }`
-    );
+  const changesetLinks = changesets.map(
+    changeset =>
+      `- Updated dependencies${
+        changeset.commit ? ` [${changeset.commit}]` : ''
+      }`,
+  );
-    const updatedDepenenciesList = dependenciesUpdated.map(
-      dependency => `  - ${dependency.name}@${dependency.newVersion}`
-    );
+  const updatedDepenenciesList = dependenciesUpdated.map(
+    dependency => `  - ${dependency.name}@${dependency.newVersion}`,
+  );
-    return [...changesetLinks, ...updatedDepenenciesList].join("\n");
+  return [...changesetLinks, ...updatedDepenenciesList].join('\n');
 }
 ```
@@ -140,7 +140,7 @@ changelog 配置如果为相对路径为 `.changesets` 目录下的相对路径
 例如创建 `.changeset/my-changelog-config.js` 文件，定义如下内容：
-```typescript title=".changeset/my-changelog-config.js"
+```ts title=".changeset/my-changelog-config.js"
 async function getReleaseLine(changeset, type) {}
 async function getDependencyReleaseLine(changesets, dependenciesUpdated) {}
@@ -149,7 +149,6 @@ module.exports = {
   getReleaseLine,
   getDependencyReleaseLine,
 };
 ```
 `changlog` 配置为 `./my-changelog-config.js` 即可:
@@ -167,7 +166,7 @@ module.exports = {
 #### 使用 `npx @modern-js/create` 创建模块工程方案。
-``` md
+```md
 ? 请选择你想创建的工程类型 模块
 ? 请填写项目名称 custom-changelog
 ? 请选择开发语言 TS
@@ -176,7 +175,7 @@ module.exports = {
 #### 实现自定义内容。
-```typescript title="src/index.ts"
+```ts title="src/index.ts"
 export async function getReleaseLine() {}
 export async function getDependencyReleaseLine() {}
@@ -201,7 +200,7 @@ export async function getDependencyReleaseLine() {}
 #### 执行 `pnpm run new` 创建模块子项目。
-``` md
+```md
 ? 请选择你想创建的工程类型 模块
 ? 请填写子项目名称 custom-changelog
 ? 请填写子项目目录名称 custom-changelog
@@ -210,7 +209,7 @@ export async function getDependencyReleaseLine() {}
 #### 实现自定义内容。
-```typescript title="src/index.ts"
+```ts title="src/index.ts"
 export async function getReleaseLine() {}
 export async function getDependencyReleaseLine() {}