feat: modify document prompt style (#3826)

Author: wuyiping0628

examples/sites/demos/pc/webdoc/import-components-en.md

@@ -45,8 +45,10 @@ For more information about automatic on-demand imports, please refer to [unplugi
 ## Multi-component introduction
 
 <div class="tip custom-block">
-<p>Warm reminder: Exporting components with Tiny prefix is ​​supported since 3.17.0. If using previous versions, you need to use aliases.</p>
-<p>For example:<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+  <div class="custom-block-content">
+    <p>Warm reminder: Exporting components with Tiny prefix is ​​supported since 3.17.0. If using previous versions, you need to use aliases.</p>
+    <p>For example:<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+  </div>
 </div>
 
 Multi-component reference is from the dependency package.`@opentiny/vue`Multiple components are referenced in. The following is an example (in the following figure)`Button`and`Alert`Component as an example):

examples/sites/demos/pc/webdoc/import-components.md

@@ -88,8 +88,10 @@ public-hoist-pattern[]=@opentiny/*
 ## 多组件引入
 
 <div class="tip custom-block">
-<p>温馨提示：带有 Tiny 前缀的组件导出自 3.17.0 开始支持。若使用之前版本，需使用别名。</p>
-<p>例如：<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+  <div class="custom-block-content">
+    <p>温馨提示：带有 Tiny 前缀的组件导出自 3.17.0 开始支持。若使用之前版本，需使用别名。</p>
+    <p>例如：<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+  </div>
 </div>
 
 多组件引用即从依赖包 `@opentiny/vue` 中引用多个组件，参考示例如下（以 `TinyButton` 和 `TinyAlert` 组件为例）：

examples/sites/demos/pc/webdoc/installation-en.md

@@ -48,9 +48,11 @@ export default defineConfig({
 ```
 
 <div class="tip custom-block">
-<p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
-For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
-<p><code> @opentiny/vue </code> supports multiple modes. If your project is not a mobile project, you can declare the value of <code>TINY_MODE</code> in <code>process.env</code> in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, <code>'process.env': {... env,TINY_MODE:'pc'}</code>. </p>
+  <div class="custom-block-content">
+    <p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
+    For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
+    <p><code> @opentiny/vue </code> supports multiple modes. If your project is not a mobile project, you can declare the value of <code>TINY_MODE</code> in <code>process.env</code> in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, <code>'process.env': {... env,TINY_MODE:'pc'}</code>. </p>
+  </div>
 </div>
 
 ## Import through CDN

examples/sites/demos/pc/webdoc/installation.md

@@ -48,9 +48,11 @@ export default defineConfig({
 ```
 
 <div class="tip custom-block">
-  <p>为了避免<code> @opentiny/vue </code> 的月度版本 (minor) 升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
-    比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
-  <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { TINY_MODE:'pc' }</code>。</p>
+  <div class="custom-block-content">
+    <p>为了避免<code> @opentiny/vue </code> 的月度版本 (minor) 升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
+      比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
+    <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { TINY_MODE:'pc' }</code>。</p>
+  </div>
 </div>
 
 ## 通过 CDN 方式引入 (v3.16.0 及之前的版本可用)

examples/sites/demos/pc/webdoc/theme-en.md

@@ -1,7 +1,9 @@
 # Theme configuration
 
 <div class="tip custom-block">
-  This section of the document only supports theme customization after <code> @opentiny/vue@3.19.0 </code>. For historical theme configuration, see <a href='# Historical version of the theme configuration '> Archive information </a> at the bottom of the current document.
+  <div class="custom-block-content">
+    This section of the document only supports theme customization after <code> @opentiny/vue@3.19.0 </code>. For historical theme configuration, see <a href='# Historical version of the theme configuration '> Archive information </a> at the bottom of the current document.
+  </div>
 </div>
 
 537/5000
@@ -71,10 +73,10 @@ themeTool.changeTheme({
 ```
 
 <div class="info custom-block">
-In many historical projects, many developers will write component styles by <code>important</code> and <code>:deep()</code> to override certain component library styles. These styles are scattered throughout the components. When later versions of the component library are upgraded, the component structure or class name may be adjusted, resulting in an override failure. <br><br>
-
-You are advised to use <code>TinyThemeTool</code> to override component styles. In this way, modified CSS rules are centralized to facilitate subsequent maintenance. Users can also introduce 'CSS files' to override styles, but make sure that the styles in them take precedence over the component library.
-
+  <div class="custom-block-content">
+    In many historical projects, many developers will write component styles by <code>important</code> and <code>:deep()</code> to override certain component library styles. These styles are scattered throughout the components. When later versions of the component library are upgraded, the component structure or class name may be adjusted, resulting in an override failure. <br><br>
+    You are advised to use <code>TinyThemeTool</code> to override component styles. In this way, modified CSS rules are centralized to facilitate subsequent maintenance. Users can also introduce 'CSS files' to override styles, but make sure that the styles in them take precedence over the component library.
+    </div>
 </div>
 
 ## Micro Frontends scene

examples/sites/demos/pc/webdoc/theme.md

@@ -1,7 +1,9 @@
 # 主题配置
 
 <div class="warning custom-block">
-  本节文档仅支持 <code> @opentiny/vue@3.19.0 </code> 及其之后版本的主题定制，更早的历史版本的主题配置，请参阅当前文档底部的 <a href='#历史版本的主题配置'>历史版本的主题配置</a>
+  <div class="custom-block-content">
+    本节文档仅支持 <code> @opentiny/vue@3.19.0 </code> 及其之后版本的主题定制，更早的历史版本的主题配置，请参阅当前文档底部的 <a href='#历史版本的主题配置'>历史版本的主题配置</a>
+  </div>
 </div>
 
 为了给开发者带来更好的用户体验，从 <code> @opentiny/vue@3.19.0 </code> 版本开始，组件库的整体风格切换为 `Opentiny Design` 新风格。
@@ -73,10 +75,10 @@ themeTool.changeTheme({
 ```
 
 <div class="tip custom-block">
-在一些用户项目中，许多开发者会在编写组件和页面的样式时，通过<code>important</code> 和 <code>:deep()</code> 来覆盖某些组件库的样式，这些样式就会散落在各个组件里。在组件库后续版本升级时，可能会调整组件结构或类名，造成样式覆盖失效，不建议这样做。 <br><br>
-
-我们建议用户使用 <code>TinyThemeTool</code> 的方法来覆盖组件样式，这样 CSS 规则会集中在一起，方便后续维护。除此之外，用户也可以将自定义样式统一写在一个 `CSS文件` 中并引入项目，但要保证其中的样式优先级高于组件库的优先级。
-
+  <div class="custom-block-content">
+    在一些用户项目中，许多开发者会在编写组件和页面的样式时，通过<code>important</code> 和 <code>:deep()</code> 来覆盖某些组件库的样式，这些样式就会散落在各个组件里。在组件库后续版本升级时，可能会调整组件结构或类名，造成样式覆盖失效，不建议这样做。 <br><br>
+    我们建议用户使用 <code>TinyThemeTool</code> 的方法来覆盖组件样式，这样 CSS 规则会集中在一起，方便后续维护。除此之外，用户也可以将自定义样式统一写在一个 `CSS文件` 中并引入项目，但要保证其中的样式优先级高于组件库的优先级。
+  </div>
 </div>
 
 ## 微前端场景
@@ -116,8 +118,11 @@ const themeTool = new TinyThemeTool(tinyOldTheme)
 ```
 
 <div class="warning custom-block">
-  <p> 旧主题不能 100% 还原历史版本的所有细节，如果用户升级后有较大的影响，可以跟我们反馈，也可以回退使用<code> @opentiny/vue@3.18.0 </code> 版本。</p>
-  <p> 如果需要切换 <code>Aurora</code> 主题，可以从上面导出 <code>tinyAuroraTheme</code> 的主题。 </p>
+  <div class="custom-block-content">
+    <p> 旧主题不能 100% 还原历史版本的所有细节，如果用户升级后有较大的影响，可以跟我们反馈，也可以回退使用<code> @opentiny/vue@3.18.0 </code> 版本。</p>
+    <br>
+    <p> 如果需要切换 <code>Aurora</code> 主题，可以从上面导出 <code>tinyAuroraTheme</code> 的主题。 </p>
+  </div>
 </div>
 
 ## 历史版本的主题配置