diff --git a/www/src/components/Warpper.tsx b/www/src/components/Warpper.tsx
index 49e238cab..05bf5a59f 100644
--- a/www/src/components/Warpper.tsx
+++ b/www/src/components/Warpper.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import BackToUp from '@uiw/react-back-to-top';
 import { useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
+import { ScrollRestoration } from 'react-router-dom';
 
 const Container = styled.div`
   width: 100%;
@@ -20,6 +21,7 @@ export const Warpper: FC<PropsWithChildren<{}>> = (props) => {
       <BackToUp element={element} style={{ position: 'fixed' }}>
         Top
       </BackToUp>
+      <ScrollRestoration />
     </Container>
   );
 };
diff --git a/www/src/components/useMdData.tsx b/www/src/components/useMdData.tsx
index efc119fc3..3b4966cb8 100644
--- a/www/src/components/useMdData.tsx
+++ b/www/src/components/useMdData.tsx
@@ -11,11 +11,6 @@ export const useMdData = (path: MdDataHandle) => {
   });
   const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    const $main = document.getElementsByTagName('main') as HTMLCollectionOf<HTMLDivElement>;
-    $main[0] && $main[0].scrollTo(0, 0);
-  }, [path]);
-
   useEffect(() => {
     setLoading(() => true);
     const getMd = async () => {
diff --git a/www/src/pages/examples/Example431.tsx b/www/src/pages/examples/Example431.tsx
index 4dfc6e915..310672405 100644
--- a/www/src/pages/examples/Example431.tsx
+++ b/www/src/pages/examples/Example431.tsx
@@ -11,7 +11,7 @@ export const PageExample431 = () => {
       <CodeMirror
         value={`console.log('hello')`}
         theme="none"
-        height="400px"
+        height="400px !important"
         width="100%"
         style={{ margin: '0 0 23px 0', flex: 1 }}
         extensions={[langs.markdown()]}
diff --git a/www/src/pages/extensions/basic-setup/example.tsx b/www/src/pages/extensions/basic-setup/example.tsx
index f7e57eb8e..ba6acb9bc 100644
--- a/www/src/pages/extensions/basic-setup/example.tsx
+++ b/www/src/pages/extensions/basic-setup/example.tsx
@@ -38,7 +38,7 @@ export const BasicSetupExample = (props: BasicSetupExampleProps) => {
         value={props.source}
         theme={theme}
         basicSetup={basicSetup}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[langs.markdown()]}
       />
diff --git a/www/src/pages/extensions/classname/example.tsx b/www/src/pages/extensions/classname/example.tsx
index f238a2148..8728f65fd 100644
--- a/www/src/pages/extensions/classname/example.tsx
+++ b/www/src/pages/extensions/classname/example.tsx
@@ -21,7 +21,7 @@ export const ClassNameExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
       <CodeMirror
         value={source}
         theme={theme}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[
           langs.markdown(),
diff --git a/www/src/pages/extensions/color/example.tsx b/www/src/pages/extensions/color/example.tsx
index f77633446..8ca10a71e 100644
--- a/www/src/pages/extensions/color/example.tsx
+++ b/www/src/pages/extensions/color/example.tsx
@@ -23,7 +23,7 @@ export const ColorExample = () => {
       <CodeMirror
         value={codeSample}
         theme={theme}
-        height="400px"
+        height="400px !important"
         // editable={readOnly}
         // readOnly={readOnly}
         {...porps}
diff --git a/www/src/pages/extensions/events/example.tsx b/www/src/pages/extensions/events/example.tsx
index f1d8fceeb..7013ea2f3 100644
--- a/www/src/pages/extensions/events/example.tsx
+++ b/www/src/pages/extensions/events/example.tsx
@@ -21,7 +21,7 @@ export const EventsExample: FC<PropsWithChildren<{ source?: string }>> = ({ sour
       <CodeMirror
         value={source}
         theme={theme}
-        height="200px"
+        height="200px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[
           langs.markdown(),
diff --git a/www/src/pages/extensions/hyper-link/example.tsx b/www/src/pages/extensions/hyper-link/example.tsx
index bf2a36bfd..5d0b64009 100644
--- a/www/src/pages/extensions/hyper-link/example.tsx
+++ b/www/src/pages/extensions/hyper-link/example.tsx
@@ -13,7 +13,7 @@ export const HyperLinkExample = () => {
       <CodeMirror
         value={markdownString}
         theme={theme}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[langs.markdown(), hyperLink]}
       />
diff --git a/www/src/pages/extensions/langs/example.tsx b/www/src/pages/extensions/langs/example.tsx
index a0c4fb69d..b492abaca 100644
--- a/www/src/pages/extensions/langs/example.tsx
+++ b/www/src/pages/extensions/langs/example.tsx
@@ -33,7 +33,7 @@ export const LangsExample: FC<PropsWithChildren<{ source?: string }>> = (props)
       <CodeMirror
         value={source}
         theme={theme}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[loadLanguage(language)!].filter(Boolean)}
       />
diff --git a/www/src/pages/extensions/line-numbers-relative/example.tsx b/www/src/pages/extensions/line-numbers-relative/example.tsx
index 886cd7f7e..cdba0a817 100644
--- a/www/src/pages/extensions/line-numbers-relative/example.tsx
+++ b/www/src/pages/extensions/line-numbers-relative/example.tsx
@@ -12,7 +12,7 @@ export const LineNumbersRelativeExample: FC<PropsWithChildren<{ source?: string
       <CodeMirror
         value={source}
         theme={theme}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[langs.markdown(), lineNumbersRelative]}
       />
diff --git a/www/src/pages/extensions/mentions/example.tsx b/www/src/pages/extensions/mentions/example.tsx
index 40b476143..f14521fea 100644
--- a/www/src/pages/extensions/mentions/example.tsx
+++ b/www/src/pages/extensions/mentions/example.tsx
@@ -58,7 +58,7 @@ export const MentionsExample: FC<PropsWithChildren<{ source?: string }>> = ({ so
       <CodeMirror
         value={source}
         theme={theme}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[langs.markdown(), mentions(users)]}
       />
diff --git a/www/src/pages/extensions/themes/example.tsx b/www/src/pages/extensions/themes/example.tsx
index 8ec7ef1d7..8b6bbc2c4 100644
--- a/www/src/pages/extensions/themes/example.tsx
+++ b/www/src/pages/extensions/themes/example.tsx
@@ -30,7 +30,7 @@ export const ThemesAllExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
       <CodeMirror
         value={source}
         theme={themeCurrent as ReactCodeMirrorProps['theme']}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[langs.markdown()]}
       />
diff --git a/www/src/pages/extensions/zebra-stripes/index.tsx b/www/src/pages/extensions/zebra-stripes/index.tsx
index a6191e404..e6a805e6c 100644
--- a/www/src/pages/extensions/zebra-stripes/index.tsx
+++ b/www/src/pages/extensions/zebra-stripes/index.tsx
@@ -22,7 +22,7 @@ export const ZebraStripesExample: FC<PropsWithChildren<{ source?: string }>> = (
       <CodeMirror
         value={source}
         theme={theme}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[langs.markdown(), zebra]}
       />
@@ -39,7 +39,7 @@ export const ZebraStripesExample: FC<PropsWithChildren<{ source?: string }>> = (
       <CodeMirror
         value={source}
         theme={theme}
-        height="300px"
+        height="300px !important"
         style={{ margin: '0 0 23px 0' }}
         extensions={[
           langs.markdown(),
diff --git a/www/src/pages/home/Example.tsx b/www/src/pages/home/Example.tsx
index 72e2b9217..414062b30 100644
--- a/www/src/pages/home/Example.tsx
+++ b/www/src/pages/home/Example.tsx
@@ -90,7 +90,7 @@ export default function Example() {
     <Warpper className="wmde-markdown-var">
       <CodemirrorWarpper
         value={code}
-        height={height}
+        height={`${height} !important`}
         theme={alls[theme as keyof typeof alls] || theme}
         editable={editable}
         extensions={extensions}
diff --git a/www/src/pages/theme/editor/index.tsx b/www/src/pages/theme/editor/index.tsx
index 4c23a61a3..012524e04 100644
--- a/www/src/pages/theme/editor/index.tsx
+++ b/www/src/pages/theme/editor/index.tsx
@@ -81,7 +81,7 @@ export function ThemeEditor() {
     selectionMatch: '#D6D6D6',
     gutterBackground: '#FFFFFF',
     gutterForeground: '#4D4D4C',
-    gutterBorder: '#ddd',
+    gutterBorder: '#dddddd',
     gutterActiveForeground: '',
     lineHighlight: '#EFEFEF',
   });
@@ -220,7 +220,7 @@ export function ThemeEditor() {
             theme={myTheme}
             extensions={[extension, color]}
             value={lang === 'code' ? themeCode({ ...settings, ...styles, dark: theme }) : code}
-            height="100%"
+            height="100% !important"
             style={{ minHeight: '100%' }}
           />
         )}
diff --git a/www/src/pages/theme/home/index.tsx b/www/src/pages/theme/home/index.tsx
index fd5d5b9be..d6ddce1a7 100644
--- a/www/src/pages/theme/home/index.tsx
+++ b/www/src/pages/theme/home/index.tsx
@@ -84,7 +84,7 @@ export function ThemesHome() {
                 <Title>{toTitleCase(name)}</Title>
                 <CodeEditor
                   value={codeString}
-                  height="165px"
+                  height="165px !important"
                   theme={themeData[name as keyof typeof themeData]}
                   extensions={[color, langs.jsx()]}
                 />
diff --git a/www/src/pages/theme/themes/Sample.tsx b/www/src/pages/theme/themes/Sample.tsx
index 11e64630f..f7e83765e 100644
--- a/www/src/pages/theme/themes/Sample.tsx
+++ b/www/src/pages/theme/themes/Sample.tsx
@@ -39,37 +39,42 @@ export const Sample: FC<PropsWithoutRef<SampleProps>> = ({ theme, ...props }) =>
   return (
     <Warpper {...props}>
       <Title>JavaScript</Title>
-      <CodeMirror value={jsStr} height="300px" theme={theme} extensions={[color, langs.javascript()]} />
+      <CodeMirror value={jsStr} height="300px !important" theme={theme} extensions={[color, langs.javascript()]} />
       <Title>JSX</Title>
-      <CodeMirror value={jsxStr} height="300px" theme={theme} extensions={[color, langs.jsx()]} />
+      <CodeMirror value={jsxStr} height="300px !important" theme={theme} extensions={[color, langs.jsx()]} />
       <Title>TypeScript</Title>
-      <CodeMirror value={typescriptStr} height="300px" theme={theme} extensions={[color, langs.typescript()]} />
+      <CodeMirror
+        value={typescriptStr}
+        height="300px !important"
+        theme={theme}
+        extensions={[color, langs.typescript()]}
+      />
       <Title>TSX</Title>
-      <CodeMirror value={tsxStr} height="300px" theme={theme} extensions={[color, langs.tsx()]} />
+      <CodeMirror value={tsxStr} height="300px !important" theme={theme} extensions={[color, langs.tsx()]} />
       <Title>JSON</Title>
-      <CodeMirror value={jsonStr} height="300px" theme={theme} extensions={[color, langs.json()]} />
+      <CodeMirror value={jsonStr} height="300px !important" theme={theme} extensions={[color, langs.json()]} />
       <Title>HTML</Title>
-      <CodeMirror value={htmlStr} height="300px" theme={theme} extensions={[color, langs.html()]} />
+      <CodeMirror value={htmlStr} height="300px !important" theme={theme} extensions={[color, langs.html()]} />
       <Title>Markdown</Title>
-      <CodeMirror value={markdownStr} height="300px" theme={theme} extensions={[color, langs.markdown()]} />
+      <CodeMirror value={markdownStr} height="300px !important" theme={theme} extensions={[color, langs.markdown()]} />
       <Title>CSS</Title>
-      <CodeMirror value={cssStr} height="300px" theme={theme} extensions={[color, langs.css()]} />
+      <CodeMirror value={cssStr} height="300px !important" theme={theme} extensions={[color, langs.css()]} />
       <Title>PHP</Title>
-      <CodeMirror value={phpStr} height="300px" theme={theme} extensions={[color, langs.php()]} />
+      <CodeMirror value={phpStr} height="300px !important" theme={theme} extensions={[color, langs.php()]} />
       <Title>JAVA</Title>
-      <CodeMirror value={javaStr} height="300px" theme={theme} extensions={[color, langs.java()]} />
+      <CodeMirror value={javaStr} height="300px !important" theme={theme} extensions={[color, langs.java()]} />
       <Title>Rust</Title>
-      <CodeMirror value={rustStr} height="300px" theme={theme} extensions={[color, langs.rust()]} />
+      <CodeMirror value={rustStr} height="300px !important" theme={theme} extensions={[color, langs.rust()]} />
       <Title>Go</Title>
-      <CodeMirror value={goStr} height="300px" theme={theme} extensions={[color, langs.go()]} />
+      <CodeMirror value={goStr} height="300px !important" theme={theme} extensions={[color, langs.go()]} />
       <Title>MySQL</Title>
-      <CodeMirror value={mysqlStr} height="300px" theme={theme} extensions={[color, langs.mysql()]} />
+      <CodeMirror value={mysqlStr} height="300px !important" theme={theme} extensions={[color, langs.mysql()]} />
       <Title>Python</Title>
-      <CodeMirror value={pythonStr} height="300px" theme={theme} extensions={[color, langs.python()]} />
+      <CodeMirror value={pythonStr} height="300px !important" theme={theme} extensions={[color, langs.python()]} />
       <Title>Shell</Title>
-      <CodeMirror value={shellStr} height="300px" theme={theme} extensions={[color, langs.shell()]} />
+      <CodeMirror value={shellStr} height="300px !important" theme={theme} extensions={[color, langs.shell()]} />
       <Title>Swift</Title>
-      <CodeMirror value={swiftStr} height="300px" theme={theme} extensions={[color, langs.swift()]} />
+      <CodeMirror value={swiftStr} height="300px !important" theme={theme} extensions={[color, langs.swift()]} />
     </Warpper>
   );
 };