From 0c644fc34ec1108e94ec828a751ace7bfa55df85 Mon Sep 17 00:00:00 2001
From: Matias Capeletto <matias.capeletto@gmail.com>
Date: Tue, 24 Nov 2020 03:31:47 +0100
Subject: [PATCH] fix: fix code block line number highlights were not showing
 correctly (#142)

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>
---
 docs/guide/getting-started.md            |  2 +-
 src/client/theme-default/styles/code.css | 10 +++++-----
 src/client/theme-default/styles/vars.css |  4 +++-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 1bc4a3e7..f023bf28 100644
--- 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
index 33c4633a..c3a23cb0 100644
--- 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
index b37ec47a..7d9f2dc0 100644
--- 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;
 
 }