fix: fix code block line number highlights were not showing correctly (…

…#142) Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>
vuejs · Nov 24, 2020 · 0c644fc · 0c644fc
1 parent 1836934
commit 0c644fc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -28,7 +28,7 @@ This section will help you build a basic VuePress documentation site from ground
 
 - **Step. 5:** Add some scripts to `package.json`.
 
-  ```json
+  ```json{3,5,7}
   {
     "scripts": {
       "docs:dev": "vitepress dev docs",

diff --git a/src/client/theme-default/styles/code.css b/src/client/theme-default/styles/code.css
@@ -1,6 +1,6 @@
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
-  font-size: 0.85em;
+  font-size: var(--code-font-size);
   color: var(--c-text-light);
   background-color: rgba(27, 31, 35, 0.05);
   padding: 0.25rem 0.5rem;
@@ -59,9 +59,9 @@ div[class*='language-'] {
 /* Line highlighting */
 
 .highlight-lines {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
   user-select: none;
-  padding-top: 1.3rem;
+  padding-top: var(--code-padding-vertical);
   position: absolute;
   top: 0;
   left: 0;
@@ -87,8 +87,8 @@ div[class*='language-'].line-numbers-mode {
   text-align: center;
   color: #888;
   line-height: 1.5;
-  font-size: 0.9em;
-  padding: 1.3rem 0;
+  font-size: var(--code-font-size);
+  padding: var(--code-padding-vertical) 0;
   border-right: 1px solid rgba(0,0,0,50%);
   z-index: 4;
 }

diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
@@ -1,4 +1,4 @@
-/** Base styles */
+/** Base Styles */
 :root {
 
   /**
@@ -46,6 +46,8 @@
 
   --c-bg: var(--c-white);
 
+  --code-padding-vertical: 1.5rem;
+  --code-font-size: .85em;
   --code-bg-color: #282c34;
 
 }