fix(theme): restore styles for code blocks (#1170)

vuejs · Aug 16, 2022 · 2c89afb · 2c89afb
1 parent bf90061
commit 2c89afb
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
@@ -310,23 +310,23 @@
 }
 
 .vp-doc [class*='language-'] code {
-  display: flex;
-  width: max-content;
+  display: block;
+  padding: 0 24px;
+  width: fit-content;
   min-width: 100%;
-  flex-direction: column;
   line-height: var(--vp-code-line-height);
   font-size: var(--vp-code-font-size);
   color: var(--vp-code-block-color);
   transition: color 0.5s;
 }
 
-.vp-doc [class*='language-'] code .line {
-  padding: 0 24px;
-}
-
 .vp-doc [class*='language-'] code .highlighted {
   background-color: var(--vp-code-line-highlight-color);
   transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
 }
 
 .vp-doc div[class*='language-'].line-numbers-mode {