@umijs/plugin-docs 4.0.0-rc.13 → 4.0.0-rc.14

package/client/theme-doc/Layout.tsx

@@ -44,7 +44,10 @@ export default (props: any) => {
         location: props.location,
       }}
     >
-      <div className="flex flex-col dark:bg-gray-900 min-h-screen transition-all">
+      <div
+        className="flex flex-col dark:bg-gray-900 min-h-screen transition-all"
+        id={isHomePage ? 'home-page' : 'doc-page'}
+      >
         <div
           id="head-container"
           className="z-30 sticky top-0 dark:before:bg-gray-800 before:bg-white before:bg-opacity-[.85]

package/client/theme-doc/Logo.tsx

@@ -14,7 +14,10 @@ export default () => {
           <img src={Logo} className="w-8 h-8" alt="logo" />
         )}
         {typeof Logo === 'function' && <Logo />}
-        <div className="text-xl font-extrabold ml-2 dark:text-white">
+        <div
+          id="header-title"
+          className="text-xl font-extrabold ml-2 dark:text-white"
+        >
           {themeConfig.title}
         </div>
       </div>

package/client/theme-doc/NavBar.tsx

@@ -1,27 +1,70 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useThemeContext } from './context';
 import useLanguage from './useLanguage';
 
 export default () => {
-  const { components, themeConfig } = useThemeContext()!;
-  const lang = useLanguage();
+  const { themeConfig } = useThemeContext()!;
   return (
     <ul className="flex">
-      {themeConfig.navs.map((nav: any) => {
-        return (
-          <li key={nav.path} className="ml-4 dark:text-white">
+      {themeConfig.navs.map((nav: any) => (
+        <NavItem nav={nav} key={nav.path} />
+      ))}
+    </ul>
+  );
+};
+
+interface NavItemProps {
+  nav: {
+    path: string;
+    title: string;
+    dropdown?: {
+      title: string;
+      path: string;
+    }[];
+  };
+}
+
+function NavItem(props: NavItemProps) {
+  const { components } = useThemeContext()!;
+  const { nav } = props;
+  const lang = useLanguage();
+  const [isExpanded, setExpanded] = useState(false);
+  return (
+    <li
+      className="ml-8 dark:text-white relative"
+      onMouseEnter={() => nav.dropdown && setExpanded(true)}
+      onMouseLeave={() => nav.dropdown && setExpanded(false)}
+    >
+      <components.Link
+        to={
+          lang.isFromPath ? lang.currentLanguage?.locale + nav.path : nav.path
+        }
+      >
+        {lang.render(nav.title)}
+      </components.Link>
+      {nav.dropdown && (
+        <div
+          style={{ maxHeight: isExpanded ? nav.dropdown.length * 48 : 0 }}
+          className="absolute transition-all duration-300 w-32 rounded-lg
+       cursor-pointer shadow overflow-hidden top-8"
+        >
+          {nav.dropdown.map((n) => (
             <components.Link
+              key={n.path}
               to={
-                lang.isFromPath
-                  ? lang.currentLanguage?.locale + nav.path
-                  : nav.path
+                lang.isFromPath ? lang.currentLanguage?.locale + n.path : n.path
               }
             >
-              {lang.render(nav.title)}
+              <p
+                className="p-2 bg-white dark:bg-gray-700 dark:text-white
+            hover:bg-gray-50 transition duration-300"
+              >
+                {n.title}
+              </p>
             </components.Link>
-          </li>
-        );
-      })}
-    </ul>
+          ))}
+        </div>
+      )}
+    </li>
   );
-};
+}

package/client/theme-doc/Search.tsx

@@ -3,9 +3,11 @@ import key from 'keymaster';
 import React, { Fragment, useEffect, useState } from 'react';
 import { useThemeContext } from './context';
 import useLanguage from './useLanguage';
+import getLinkFromTitle from './utils/getLinkFromTitle';
 
 export default () => {
-  const { render } = useLanguage();
+  const { components } = useThemeContext()!;
+  const { isFromPath, currentLanguage, render } = useLanguage();
   const [isFocused, setIsFocused] = useState(false);
   const [keyword, setKeyword] = useState('');
 
@@ -34,6 +36,7 @@ export default () => {
   }
 
   useEffect(() => {
+    if (!themeConfig.searchHotKey) return;
     key.filter = () => true;
 
     // 在页面中按下 ⌘+k 可以打开搜索框
@@ -63,6 +66,7 @@ export default () => {
   return (
     <Fragment>
       <div
+        id="search-input-wrapper"
         className="rounded-lg w-40 lg:w-64 flex items-center pr-2 flex-row hover:bg-gray-50
      transition duration-300 bg-gray-100 border border-white focus-within:border-gray-100
      focus-within:bg-white dark:bg-gray-700 dark:border-gray-700 relative
@@ -72,18 +76,22 @@ export default () => {
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           value={keyword}
+          autoComplete="off"
           onChange={(e) => setKeyword(e.target.value)}
           id="search-input"
           className="w-full bg-transparent outline-none text-sm px-4 py-2"
           placeholder={render('Search anything ...')}
         />
-        <div
-          className="bg-gray-200 rounded px-2 h-6 flex flex-row text-gray-400
+        {themeConfig.searchHotKey && (
+          <div
+            className="bg-gray-200 rounded px-2 h-6 flex flex-row text-gray-400
          items-center justify-center border border-gray-300 text-xs"
-        >
-          {isMac ? macSearchKey : windowsSearchKey}
-        </div>
+          >
+            {isMac ? macSearchKey : windowsSearchKey}
+          </div>
+        )}
         <div
+          id="search-results-wrapper"
           className={cx(
             'absolute transition-all duration-500 top-12 w-96 rounded-lg',
             'cursor-pointer shadow overflow-hidden',
@@ -91,8 +99,8 @@ export default () => {
           )}
         >
           {result.map((r, i) => (
-            <a
-              href={r.href}
+            <components.Link
+              to={(isFromPath ? currentLanguage?.locale : '') + r.href}
               key={i}
               className="group outline-none search-result"
               onFocus={() => setIsFocused(true)}
@@ -104,7 +112,7 @@ export default () => {
               >
                 {r.path}
               </p>
-            </a>
+            </components.Link>
           ))}
         </div>
       </div>
@@ -122,9 +130,15 @@ function search(routes: any, keyword: string): SearchResultItem[] {
 
   const result: SearchResultItem[] = [];
 
+  function addResult(newResult: { path: string; href: string }) {
+    const { path, href } = newResult;
+    if (result.find((r) => r.path === path)) return;
+    result.push({ path, href });
+  }
+
   Object.keys(routes).map((path) => {
     if (path.toLowerCase().includes(keyword.toLowerCase())) {
-      result.push({
+      addResult({
         path: path.split('/').slice(1).join(' > '),
         href: '/' + path,
       });
@@ -132,16 +146,21 @@ function search(routes: any, keyword: string): SearchResultItem[] {
 
     const route = routes[path];
     if (!route.titles) return;
-    route.titles
-      .filter((t: any) => t.level <= 2)
-      .map((title: any) => {
-        if (title.title.toLowerCase().includes(keyword.toLowerCase())) {
-          result.push({
-            path: path.split('/').slice(1).join(' > ') + ' > ' + title.title,
-            href: '/' + path + '#' + title.title,
-          });
-        }
-      });
+    route.titles.map((title: any) => {
+      if (title.title.toLowerCase().includes(keyword.toLowerCase())) {
+        addResult({
+          path:
+            path
+              .split('/')
+              .map((s) => s.replace(/\.[a-z]{2}-[A-Z]{2}\/?/g, ''))
+              .slice(1)
+              .join(' > ') +
+            ' > ' +
+            title.title,
+          href: '/' + path + '#' + getLinkFromTitle(title.title),
+        });
+      }
+    });
   });
 
   if (result.length > 8) return result.slice(0, 8);

package/client/theme-doc/Sidebar.tsx

@@ -49,7 +49,8 @@ export default (props: SidebarProps) => {
                 if (to === window.location.pathname) {
                   return (
                     <div
-                      key={child}
+                      id="active-nav-item"
+                      key={route.path}
                       className="my-2 hover:text-blue-400 transition-all
                        bg-blue-50 text-blue-400 px-4 py-1
                        rounded-lg cursor-default dark:bg-blue-900 dark:text-blue-200"
@@ -61,6 +62,7 @@ export default (props: SidebarProps) => {
 
                 return (
                   <components.Link
+                    key={route.path}
                     to={route.path}
                     onClick={() =>
                       props.setMenuOpened && props.setMenuOpened((o) => !o)

package/client/theme-doc/Toc.tsx

@@ -2,13 +2,8 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { useThemeContext } from './context';
 import useLanguage from './useLanguage';
-
-function getLinkFromTitle(title: string) {
-  return title
-    .toLowerCase()
-    .replace(/\s/g, '-')
-    .replace(/[（）]/g, '');
-}
+import getLinkFromTitle from './utils/getLinkFromTitle';
+import getTocTitle from './utils/getTocTitle';
 
 export default () => {
   const { location, appData, themeConfig } = useThemeContext()!;
@@ -30,7 +25,7 @@ export default () => {
   return (
     <div
       className="w-full lg:m-12 mb-12 border
-      border-gray-100 p-4 rounded-xl z-20"
+      border-gray-200 dark:border-neutral-700 py-4 rounded-lg z-20"
     >
       {/* @ts-ignore */}
       <Helmet>
@@ -38,22 +33,24 @@ export default () => {
           {route.titles[0].title} | {themeConfig.title}
         </title>
       </Helmet>
-      <p className="text-lg font-extrabold dark:text-white">
-        {route.titles[0].title}
+      <p className="text-lg font-extrabold text-gray-800 dark:text-neutral-50 pb-2 border-b border-gray-200 dark:border-neutral-700">
+        <span className="px-4">{route.titles[0].title}</span>
       </p>
-      <ul className="max-h-[calc(100vh-360px)] overflow-y-auto py-2">
+      <ul className="max-h-[calc(100vh-360px)] overflow-y-auto px-4">
         {titles.map((item: any) => {
           return (
             <li
               style={{ paddingLeft: `${item.level - 2}rem` }}
-              className="mt-3 text-gray-600 cursor-pointer dark:text-gray-400
+              className="mt-3 text-gray-600 cursor-pointer dark:text-neutral-400
               hover:text-blue-500 transition duration-300 dark:hover:text-blue-500"
             >
               <a
-                className={item.level > 2 ? 'text-sm' : ''}
+                className={`${
+                  item.level > 2 ? 'text-sm' : 'text-base'
+                } break-all 2xl:break-words`}
                 href={'#' + getLinkFromTitle(item.title)}
               >
-                {item.title}
+                {getTocTitle(item.title)}
               </a>
             </li>
           );

package/client/theme-doc/components/Features.tsx

@@ -8,7 +8,7 @@ function Features(
   props: PropsWithChildren<{ title?: string; subtitle?: string }>,
 ) {
   return (
-    <div className="w-screen py-36 features dark:features-dark min-h-screen">
+    <div className="w-full py-36 features dark:features-dark min-h-screen">
       {(props.title || props.subtitle) && (
         <div className="mb-24 px-4">
           {props.title && (

package/client/theme-doc/context.ts

@@ -22,6 +22,7 @@ interface IContext {
     navs: {
       path: string;
       title: string;
+      dropdown?: { title: string; path: string }[];
       children: any[];
     }[];
     announcement?: {

package/client/theme-doc/tailwind.css

@@ -51,33 +51,82 @@ article h2 a {
   @apply no-underline dark:text-white;
 }
 
+/* 行内代码 */
 article code {
-  @apply text-sky-800 dark:text-sky-300 bg-slate-800 bg-opacity-5 dark:bg-opacity-100 border border-black border-opacity-5 rounded-md;
+  @apply text-sky-600 dark:text-sky-300 bg-slate-800 bg-opacity-5 dark:bg-opacity-100 border border-black border-opacity-5 rounded-md;
   font-size: 0.9em;
   padding: 2px 0.25em;
   box-decoration-break: clone;
   font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
 }
 
-article inlinecode {
-  @apply bg-black bg-opacity-5 border border-black border-opacity-5 rounded-md px-1.5 py-0.5 text-xs dark:text-white dark:bg-gray-700;
+/* 行内高亮代码 */
+article span[data-rehype-pretty-code-fragment] code {
+  @apply bg-zinc-900 dark:bg-zinc-900;
 }
 
+/* 代码块 */
 article pre {
-  /* content-visibility: auto; */
   contain: paint;
-  @apply p-4 bg-zinc-900 dark:bg-zinc-900 rounded-xl my-4 overflow-x-auto font-medium subpixel-antialiased dark:text-white transition;
+  @apply my-4 bg-zinc-900 dark:bg-zinc-900 text-neutral-300 dark:text-neutral-300 rounded-md font-medium subpixel-antialiased transition;
+}
+article pre > code {
+  @apply grid leading-relaxed p-4 text-sm text-neutral-300 dark:text-neutral-300 bg-transparent dark:bg-transparent rounded-none border-none min-w-full overflow-x-auto;
+}
+article div[data-rehype-pretty-code-fragment] {
+  @apply my-4;
+}
+
+/* 代码块的标题部分 */
+article
+  div[data-rehype-pretty-code-fragment]
+  > div[data-rehype-pretty-code-title] {
+  @apply pb-1 text-sm text-zinc-400 dark:text-neutral-400 text-center;
+}
+
+/* 代码块的代码部分 */
+article div[data-rehype-pretty-code-fragment] > pre {
+  @apply pt-6 my-0;
+}
+article div[data-rehype-pretty-code-fragment] > pre > code {
+  @apply my-0 pt-0 px-0;
 }
 
-article pre code {
-  line-height: 1.25rem;
-  @apply relative p-0 text-sm text-neutral-300 dark:text-neutral-300 bg-transparent dark:bg-transparent rounded-none border-none inline-block min-w-full transition;
+/* 代码块的使用语言 */
+article div[data-rehype-pretty-code-fragment] > pre::before {
+  @apply fixed top-0 right-0 px-2 text-sm uppercase bg-neutral-300 text-zinc-900 bg-opacity-80 dark:bg-opacity-60 rounded-sm;
+  content: attr(data-language);
 }
 
-article pre code .line.highlighted {
-  @apply before:block before:absolute before:h-5 before:bg-gray-500 before:bg-opacity-10 before:-inset-x-4 before:pointer-events-none before:select-none dark:text-white transition;
+/* 代码块的代码行 */
+article div[data-rehype-pretty-code-fragment] > pre > code .line {
+  @apply pl-3 pr-4;
 }
 
+/* 代码块的行内高亮文字 */
+article div[data-rehype-pretty-code-fragment] > pre > code .line .word {
+  @apply px-1.5 inline-block bg-neutral-300 bg-opacity-20 rounded-sm;
+}
+
+/* 代码块的行号 */
+article div[data-rehype-pretty-code-fragment] > pre > code {
+  counter-reset: line;
+}
+article div[data-rehype-pretty-code-fragment] > pre > code > .line::before {
+  @apply text-neutral-600 w-4 mr-4 inline-block text-right;
+  counter-increment: line;
+  content: counter(line);
+}
+
+/* 代码块的高亮行 */
+article div[data-rehype-pretty-code-fragment] pre > code > .line {
+  @apply border-l-2 border-transparent;
+}
+article div[data-rehype-pretty-code-fragment] pre > code > .line.highlighted {
+  @apply bg-neutral-100 dark:bg-neutral-300 bg-opacity-10 dark:bg-opacity-10 border-l-blue-400 dark:border-l-sky-600;
+}
+
+/* 链接 */
 article a {
   @apply mx-1 text-cyan-600 dark:text-fuchsia-200 hover:text-cyan-900 dark:hover:text-fuchsia-400 transition;
   background-image: linear-gradient(
@@ -85,9 +134,26 @@ article a {
     rgba(130, 199, 255, 0.28) 55%
   );
 }
+.dark article a {
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(238, 157, 234, 0.28) 55%
+  );
+}
 
-article a code {
+/* 行内代码块链接 */
+article a > code {
   @apply text-cyan-600 dark:text-fuchsia-200 hover:text-cyan-900 dark:hover:text-fuchsia-400 transition;
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(130, 199, 255, 0.28) 55%
+  );
+}
+.dark article a > code {
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(238, 157, 234, 0.28) 55%
+  );
 }
 
 article table {

package/client/theme-doc/tailwind.out.css

@@ -673,6 +673,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   top: 3rem;
 }
 
+.top-8 {
+  top: 2rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -731,6 +735,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 1rem;
 }
 
+.ml-8 {
+  margin-left: 2rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -875,6 +883,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 2rem;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
 .w-40 {
   width: 10rem;
 }
@@ -1034,6 +1046,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   overflow-y: scroll;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1058,6 +1074,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-width: 2px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1068,9 +1088,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-100 {
+.border-gray-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
 .border-b-gray-100 {
@@ -1174,6 +1194,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 0.25rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -1218,6 +1243,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 9rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pb-12 {
   padding-bottom: 3rem;
 }
@@ -1246,6 +1275,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.75rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -1284,6 +1318,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
@@ -1571,6 +1610,8 @@ article h2 a {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+/* 行内代码 */
+
 article code {
   border-radius: 0.375rem;
   border-width: 1px;
@@ -1579,7 +1620,7 @@ article code {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.05;
   --tw-text-opacity: 1;
-  color: rgb(7 89 133 / var(--tw-text-opacity));
+  color: rgb(2 132 199 / var(--tw-text-opacity));
 }
 
 .dark article code {
@@ -1596,39 +1637,30 @@ article code {
   font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
 }
 
-article inlinecode {
-  border-radius: 0.375rem;
-  border-width: 1px;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.05;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-  --tw-bg-opacity: 0.05;
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
+/* 行内高亮代码 */
+
+article span[data-rehype-pretty-code-fragment] code {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
 }
 
-.dark article inlinecode {
+.dark article span[data-rehype-pretty-code-fragment] code {
   --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
 }
 
+/* 代码块 */
+
 article pre {
-  /* content-visibility: auto; */
   contain: paint;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  overflow-x: auto;
-  border-radius: 0.75rem;
+  border-radius: 0.375rem;
   --tw-bg-opacity: 1;
   background-color: rgb(24 24 27 / var(--tw-bg-opacity));
-  padding: 1rem;
   font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(212 212 212 / var(--tw-text-opacity));
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
@@ -1642,63 +1674,155 @@ article pre {
   --tw-bg-opacity: 1;
   background-color: rgb(24 24 27 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(212 212 212 / var(--tw-text-opacity));
 }
 
-article pre code {
-  position: relative;
-  display: inline-block;
+article pre > code {
+  display: grid;
   min-width: 100%;
+  overflow-x: auto;
   border-radius: 0px;
   border-style: none;
   background-color: transparent;
-  padding: 0px;
+  padding: 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  line-height: 1.625;
   --tw-text-opacity: 1;
   color: rgb(212 212 212 / var(--tw-text-opacity));
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
 }
 
-.dark article pre code {
+.dark article pre > code {
   background-color: transparent;
   --tw-text-opacity: 1;
   color: rgb(212 212 212 / var(--tw-text-opacity));
 }
 
-article pre code .line.highlighted {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+article div[data-rehype-pretty-code-fragment] {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
-article pre code .line.highlighted::before {
-  pointer-events: none;
-  position: absolute;
-  left: -1rem;
-  right: -1rem;
-  display: block;
-  height: 1.25rem;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-  content: var(--tw-content);
-  --tw-bg-opacity: 0.1;
+/* 代码块的标题部分 */
+
+article
+  div[data-rehype-pretty-code-fragment]
+  > div[data-rehype-pretty-code-title] {
+  padding-bottom: 0.25rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(161 161 170 / var(--tw-text-opacity));
 }
 
-.dark article pre code .line.highlighted {
+.dark article
+  div[data-rehype-pretty-code-fragment]
+  > div[data-rehype-pretty-code-title] {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+
+/* 代码块的代码部分 */
+
+article div[data-rehype-pretty-code-fragment] > pre {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding-top: 1.5rem;
+}
+
+article div[data-rehype-pretty-code-fragment] > pre > code {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+}
+
+/* 代码块的使用语言 */
+
+article div[data-rehype-pretty-code-fragment] > pre::before {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  border-radius: 0.125rem;
+  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.8;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-transform: uppercase;
+  --tw-text-opacity: 1;
+  color: rgb(24 24 27 / var(--tw-text-opacity));
+}
+
+.dark article div[data-rehype-pretty-code-fragment] > pre::before {
+  --tw-bg-opacity: 0.6;
+}
+
+article div[data-rehype-pretty-code-fragment] > pre::before {
+  content: attr(data-language);
+}
+
+/* 代码块的代码行 */
+
+article div[data-rehype-pretty-code-fragment] > pre > code .line {
+  padding-left: 0.75rem;
+  padding-right: 1rem;
+}
+
+/* 代码块的行内高亮文字 */
+
+article div[data-rehype-pretty-code-fragment] > pre > code .line .word {
+  display: inline-block;
+  border-radius: 0.125rem;
+  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.2;
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+/* 代码块的行号 */
+
+article div[data-rehype-pretty-code-fragment] > pre > code {
+  counter-reset: line;
+}
+
+article div[data-rehype-pretty-code-fragment] > pre > code > .line::before {
+  margin-right: 1rem;
+  display: inline-block;
+  width: 1rem;
+  text-align: right;
+  --tw-text-opacity: 1;
+  color: rgb(82 82 82 / var(--tw-text-opacity));
+  counter-increment: line;
+  content: counter(line);
+}
+
+/* 代码块的高亮行 */
+
+article div[data-rehype-pretty-code-fragment] pre > code > .line {
+  border-left-width: 2px;
+  border-color: transparent;
+}
+
+article div[data-rehype-pretty-code-fragment] pre > code > .line.highlighted {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(96 165 250 / var(--tw-border-opacity));
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.1;
+}
+
+.dark article div[data-rehype-pretty-code-fragment] pre > code > .line.highlighted {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(2 132 199 / var(--tw-border-opacity));
+  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.1;
 }
 
+/* 链接 */
+
 article a {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1733,7 +1857,16 @@ article a {
   );
 }
 
-article a code {
+.dark article a {
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(238, 157, 234, 0.28) 55%
+  );
+}
+
+/* 行内代码块链接 */
+
+article a > code {
   --tw-text-opacity: 1;
   color: rgb(8 145 178 / var(--tw-text-opacity));
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
@@ -1743,21 +1876,35 @@ article a code {
   transition-duration: 150ms;
 }
 
-article a code:hover {
+article a > code:hover {
   --tw-text-opacity: 1;
   color: rgb(22 78 99 / var(--tw-text-opacity));
 }
 
-.dark article a code {
+.dark article a > code {
   --tw-text-opacity: 1;
   color: rgb(245 208 254 / var(--tw-text-opacity));
 }
 
-.dark article a code:hover {
+.dark article a > code:hover {
   --tw-text-opacity: 1;
   color: rgb(232 121 249 / var(--tw-text-opacity));
 }
 
+article a > code {
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(130, 199, 255, 0.28) 55%
+  );
+}
+
+.dark article a > code {
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(238, 157, 234, 0.28) 55%
+  );
+}
+
 article table {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -2016,6 +2163,11 @@ h6 {
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
+.dark .dark\:border-neutral-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity));
+}
+
 .dark .dark\:border-gray-500 {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
@@ -2066,9 +2218,14 @@ h6 {
   color: rgb(191 219 254 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-400 {
+.dark .dark\:text-neutral-50 {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(250 250 250 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-neutral-400 {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
 }
 
 .dark .dark\:text-gray-200 {
@@ -2076,6 +2233,11 @@ h6 {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2239,3 +2401,9 @@ h6 {
     padding-right: 16rem;
   }
 }
+
+@media (min-width: 1536px) {
+  .\32xl\:break-words {
+    overflow-wrap: break-word;
+  }
+}

package/client/theme-doc/utils/getLinkFromTitle.ts

@@ -0,0 +1,15 @@
+export default function getLinkFromTitle(title: string) {
+  return (
+    title
+      .toLowerCase()
+      .trim()
+      // not remove html tags
+      // .replace(/<[!\/a-z].*?>/gi, '')
+      // remove unwanted chars
+      .replace(
+        /[\u2000-\u206F\u2E00-\u2E7F\\'!！"#$%&()（）*+,，.。/:：;；<=>?？@[\]^`{|}~]/g,
+        '',
+      )
+      .replace(/\s/g, '-')
+  );
+}

package/client/theme-doc/utils/getTocTitle.ts

@@ -0,0 +1,9 @@
+export const getTocTitle = (title: string) => {
+  return title
+    .trim()
+    .replace(/\\{/g, '{')
+    .replace(/\\}/g, '}')
+    .replace(/[`]/g, '');
+};
+
+export default getTocTitle;

package/dist/compiler.js

@@ -30,9 +30,16 @@ const rehypePrettyCodeOptions = {
             node.children = [{ type: 'text', value: ' ' }];
         }
     },
+    // 允许高亮代码行
+    // 对于高亮的代码行，设置为 highlighted 样式表类
     onVisitHighlightedLine(node) {
         node.properties.className.push('highlighted');
     },
+    // 允许高亮代码文字
+    // 对于高亮的代码文字，设置为 word 样式表类
+    onVisitHighlightedWord(node) {
+        node.properties.className = ['word'];
+    },
 };
 function compile(opts) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -50,9 +57,14 @@ function MDXContent(props = {}) {
   useEffect(() => {
     if (window.location.hash.length !== 0) {
       const hash = window.location.hash;
-      window.location.hash = '';
-      window.location.hash = hash;
+      document.getElementById(hash.slice(1))?.scrollIntoView();
+    } else {
+      window.scrollTo(0, 0);
     }
+    document.getElementById('active-nav-item')?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });
   }, []);
 
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugin-docs",
-  "version": "4.0.0-rc.13",
+  "version": "4.0.0-rc.14",
   "description": "@umijs/plugin-docs",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/plugin-docs#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -19,11 +19,11 @@
   "scripts": {
     "build": "pnpm tsc",
     "build:css": "tailwindcss -i ./client/theme-doc/tailwind.css -o ./client/theme-doc/tailwind.out.css",
-    "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
+    "build:deps": "umi-scripts bundleDeps",
     "build:extra": "pnpm build:css && pnpm build:deps",
     "dev": "pnpm build -- --watch",
     "dev:css": "pnpm build:css -- --watch",
-    "test": "jest -c ../../jest.turbo.config.ts"
+    "test": "umi-scripts jest-turbo"
   },
   "dependencies": {
     "keymaster": "1.6.2",
@@ -39,7 +39,7 @@
     "rehype-slug": "5.0.1",
     "remark-gfm": "^3.0.1",
     "tailwindcss": "^3.0.23",
-    "umi": "4.0.0-rc.13"
+    "umi": "4.0.0-rc.14"
   },
   "publishConfig": {
     "access": "public"