fix(theme): restore styles for code blocks

[brc-dd]

fixes: #1169, fixes #1175

x-ref: #1152

[brc-dd]

@Jinjiang Hi! Can you check if this doesn't causes any other UI issues? I have restored the styles to what we had before #1152 and modified them for .highlighted.

[Jinjiang]

@brc-dd my bad 😅 thanks for pointing this out.

I'm still checking other use cases. So fat it looks great!

After trying a little bit, I found another simple way to solve this is having a outer padding + inner negative margin:

diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 84e9d08..1038045 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -312,6 +312,7 @@
 .vp-doc [class*='language-'] code {
   display: flex;
   width: max-content;
+  padding: 0 24px;
   min-width: 100%;
   flex-direction: column;
   line-height: var(--vp-code-line-height);
@@ -321,6 +322,7 @@
 }
 
 .vp-doc [class*='language-'] code .line {
+  margin: 0 -24px;
   padding: 0 24px;
 }

Just FYI. I'm still checking other use cases. 🙏

[brc-dd]

After trying a little bit, I found another simple way to solve this is having a outer padding + inner negative margin:

But with keeping display flex on code, we can't have empty spans in it, or can we? (newlines were getting ignored earlier)