diff --git a/assets/scss/components/code-highlight.scss b/assets/scss/components/code-highlight.scss
index c0f2a27..f223756 100644
--- a/assets/scss/components/code-highlight.scss
+++ b/assets/scss/components/code-highlight.scss
@@ -1,64 +1,76 @@
 $ht-code-border-radius: .4em;
 .highlight {
-    width: 55%;
+    width: 50%;
     overflow-x: scroll;
-    border-radius: $ht-code-border-radius;
+    // border-radius: $ht-code-border-radius;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    margin-right: 2.5%;
+    margin-left: 2.5%;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    code {
+        font-size: 1rem;
+        display: block;
+    }
+
+    &>.chroma {
+        margin: 0;
+    }
+
+    &>.chroma .hl {
+        // border-radius: $ht-code-border-radius / 2;
+        display: block;
+
+        &::before{
+            content: "> ";
+            position: absolute;
+            left: 0;
+            color: #111;
+        }
+    }
 
     &>div.chroma>table.lntable{
-        margin: $ht-code-border-radius 0 $ht-code-border-radius 0;
+        overflow: initial;
+        // margin: $ht-code-border-radius 0 $ht-code-border-radius 0;
         & td:first-of-type {
             & span:not(& span>span) {
                 padding: 0 .75em 0 .5em;
             }
         }
-    }
-    &>.chroma>code {
 
+        pre {
+            margin-block-start: 0.5em;
+            margin-block-end: 0.5em;
+        }
+    }
+
+    &>.chroma>code {
         width: max-content;
         margin-top: .5em;
         margin-bottom: .5em;
         margin-left: .5em;
+
         &>span.hl{
             margin-left: -.5em;
             padding-left: .5em;
         }
     }
-
-    .chroma .hl {
-        // border-radius: $ht-code-border-radius / 2;
-        display: block;
-    }
-
-    &::-webkit-scrollbar {
-        border-radius: $ht-code-border-radius;
-        width: 10px;
-        height: 1rem;
-    }
-    &::-webkit-scrollbar-thumb {
-        border-radius: $ht-code-border-radius;
-    }
 }
 
+
 @media screen and (max-width: 760px) {
-    .highlight {
+    .highlight .chroma {
         width: 90%;
     }
 }
 
-.highlight .lntable {
-    overflow: initial;
-}
-
-.highlight pre {
-    margin: 0;
-}
-
-.highlight pre code {
-    display: block;
-    font-size: 1rem;
-}
-
 // fix #48 => https://github.com/slashformotion/hugo-tufte/issues/48
 ul>li>div.highlight {
     width: 100%;
-}
\ No newline at end of file
+}
diff --git a/assets/scss/syntax/highlight-dark.scss b/assets/scss/syntax/highlight-dark.scss
index 1016174..ac10397 100644
--- a/assets/scss/syntax/highlight-dark.scss
+++ b/assets/scss/syntax/highlight-dark.scss
@@ -1,12 +1,3 @@
 $ht-code-bgcolor: #282a36;
 
 @import "syntax-dark.scss";
-
-.highlight {
-    &::-webkit-scrollbar {
-        background: $ht-code-bgcolor;
-    }
-    &::-webkit-scrollbar-thumb {
-        background: scale-color($ht-code-bgcolor, $lightness: 23%, $saturation: -40%);
-    }
-}
\ No newline at end of file
diff --git a/assets/scss/syntax/highlight-light.scss b/assets/scss/syntax/highlight-light.scss
index 5a1303d..472f4b7 100644
--- a/assets/scss/syntax/highlight-light.scss
+++ b/assets/scss/syntax/highlight-light.scss
@@ -1,12 +1,3 @@
 $ht-code-bgcolor: #dde2ff;
 
 @import "syntax-light.scss";
-
-.highlight {
-    &::-webkit-scrollbar {
-        background: $ht-code-bgcolor;
-    }
-    &::-webkit-scrollbar-thumb {
-        background: scale-color($ht-code-bgcolor, $lightness: -13%, $saturation: -80%);
-    }
-}
\ No newline at end of file
diff --git a/assets/scss/syntax/syntax-dark.scss b/assets/scss/syntax/syntax-dark.scss
index 6ac2598..3a4640a 100644
--- a/assets/scss/syntax/syntax-dark.scss
+++ b/assets/scss/syntax/syntax-dark.scss
@@ -1,91 +1,92 @@
 /* Dracula Theme v1.2.5
- *
- * https://github.com/zenorocha/dracula-theme
- *
- * Copyright 2016, All rights reserved
- *
- * Code licensed under the MIT license
- * http://zenorocha.mit-license.org
- *
- * @author Rob G <wowmotty@gmail.com>
- * @author Chris Bracco <chris@cbracco.me>
- * @author Zeno Rocha <hi@zenorocha.com>
- */
+*
+* https://github.com/zenorocha/dracula-theme
+*
+* Copyright 2016, All rights reserved
+*
+* Code licensed under the MIT license
+* http://zenorocha.mit-license.org
+*
+* @author Rob G <wowmotty@gmail.com>
+* @author Chris Bracco <chris@cbracco.me>
+* @author Zeno Rocha <hi@zenorocha.com>
+*/
 
- .highlight .hl { background-color: scale-color($ht-code-bgcolor, $lightness: 32%, $saturation: -40%) }
- .highlight  { background: $ht-code-bgcolor; color: #f8f8f2 }
- .highlight .c { color: #6272a4 } /* Comment */
- .highlight .err { color: #f8f8f2 } /* Error */
- .highlight .g { color: #f8f8f2 } /* Generic */
- .highlight .k { color: #ff79c6 } /* Keyword */
- .highlight .l { color: #f8f8f2 } /* Literal */
- .highlight .n { color: #f8f8f2 } /* Name */
- .highlight .o { color: #ff79c6 } /* Operator */
- .highlight .x { color: #f8f8f2 } /* Other */
- .highlight .p { color: #f8f8f2 } /* Punctuation */
- .highlight .ch { color: #6272a4 } /* Comment.Hashbang */
- .highlight .cm { color: #6272a4 } /* Comment.Multiline */
- .highlight .cp { color: #ff79c6 } /* Comment.Preproc */
- .highlight .cpf { color: #6272a4 } /* Comment.PreprocFile */
- .highlight .c1 { color: #6272a4 } /* Comment.Single */
- .highlight .cs { color: #6272a4 } /* Comment.Special */
- .highlight .gd { color: #8b080b } /* Generic.Deleted */
- .highlight .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */
- .highlight .gr { color: #f8f8f2 } /* Generic.Error */
- .highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */
- .highlight .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */
- .highlight .go { color: #44475a } /* Generic.Output */
- .highlight .gp { color: #f8f8f2 } /* Generic.Prompt */
- .highlight .gs { color: #f8f8f2 } /* Generic.Strong */
- .highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */
- .highlight .gt { color: #f8f8f2 } /* Generic.Traceback */
- .highlight .kc { color: #ff79c6 } /* Keyword.Constant */
- .highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */
- .highlight .kn { color: #ff79c6 } /* Keyword.Namespace */
- .highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */
- .highlight .kr { color: #ff79c6 } /* Keyword.Reserved */
- .highlight .kt { color: #8be9fd } /* Keyword.Type */
- .highlight .ld { color: #f8f8f2 } /* Literal.Date */
- .highlight .m { color: #bd93f9 } /* Literal.Number */
- .highlight .s { color: #f1fa8c } /* Literal.String */
- .highlight .na { color: #50fa7b } /* Name.Attribute */
- .highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */
- .highlight .nc { color: #50fa7b } /* Name.Class */
- .highlight .no { color: #f8f8f2 } /* Name.Constant */
- .highlight .nd { color: #f8f8f2 } /* Name.Decorator */
- .highlight .ni { color: #f8f8f2 } /* Name.Entity */
- .highlight .ne { color: #f8f8f2 } /* Name.Exception */
- .highlight .nf { color: #50fa7b } /* Name.Function */
- .highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */
- .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
- .highlight .nx { color: #f8f8f2 } /* Name.Other */
- .highlight .py { color: #f8f8f2 } /* Name.Property */
- .highlight .nt { color: #ff79c6 } /* Name.Tag */
- .highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */
- .highlight .ow { color: #ff79c6 } /* Operator.Word */
- .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
- .highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */
- .highlight .mf { color: #bd93f9 } /* Literal.Number.Float */
- .highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */
- .highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */
- .highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */
- .highlight .sa { color: #f1fa8c } /* Literal.String.Affix */
- .highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */
- .highlight .sc { color: #f1fa8c } /* Literal.String.Char */
- .highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */
- .highlight .sd { color: #f1fa8c } /* Literal.String.Doc */
- .highlight .s2 { color: #f1fa8c } /* Literal.String.Double */
- .highlight .se { color: #f1fa8c } /* Literal.String.Escape */
- .highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */
- .highlight .si { color: #f1fa8c } /* Literal.String.Interpol */
- .highlight .sx { color: #f1fa8c } /* Literal.String.Other */
- .highlight .sr { color: #f1fa8c } /* Literal.String.Regex */
- .highlight .s1 { color: #f1fa8c } /* Literal.String.Single */
- .highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */
- .highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */
- .highlight .fm { color: #50fa7b } /* Name.Function.Magic */
- .highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */
- .highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */
- .highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */
- .highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */
- .highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */
\ No newline at end of file
+.highlight .lnt { color: #6272a4 } /* line number */
+.highlight .hl { background-color: scale-color($ht-code-bgcolor, $lightness: 32%, $saturation: -40%) }
+.highlight  { background: $ht-code-bgcolor; color: #f8f8f2 }
+.highlight .c { color: #6272a4 } /* Comment */
+.highlight .err { color: #f8f8f2 } /* Error */
+.highlight .g { color: #f8f8f2 } /* Generic */
+.highlight .k { color: #ff79c6 } /* Keyword */
+.highlight .l { color: #f8f8f2 } /* Literal */
+.highlight .n { color: #f8f8f2 } /* Name */
+.highlight .o { color: #ff79c6 } /* Operator */
+.highlight .x { color: #f8f8f2 } /* Other */
+.highlight .p { color: #f8f8f2 } /* Punctuation */
+.highlight .ch { color: #6272a4 } /* Comment.Hashbang */
+.highlight .cm { color: #6272a4 } /* Comment.Multiline */
+.highlight .cp { color: #ff79c6 } /* Comment.Preproc */
+.highlight .cpf { color: #6272a4 } /* Comment.PreprocFile */
+.highlight .c1 { color: #6272a4 } /* Comment.Single */
+.highlight .cs { color: #6272a4 } /* Comment.Special */
+.highlight .gd { color: #8b080b } /* Generic.Deleted */
+.highlight .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */
+.highlight .gr { color: #f8f8f2 } /* Generic.Error */
+.highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */
+.highlight .go { color: #44475a } /* Generic.Output */
+.highlight .gp { color: #f8f8f2 } /* Generic.Prompt */
+.highlight .gs { color: #f8f8f2 } /* Generic.Strong */
+.highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #f8f8f2 } /* Generic.Traceback */
+.highlight .kc { color: #ff79c6 } /* Keyword.Constant */
+.highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */
+.highlight .kn { color: #ff79c6 } /* Keyword.Namespace */
+.highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */
+.highlight .kr { color: #ff79c6 } /* Keyword.Reserved */
+.highlight .kt { color: #8be9fd } /* Keyword.Type */
+.highlight .ld { color: #f8f8f2 } /* Literal.Date */
+.highlight .m { color: #bd93f9 } /* Literal.Number */
+.highlight .s { color: #f1fa8c } /* Literal.String */
+.highlight .na { color: #50fa7b } /* Name.Attribute */
+.highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */
+.highlight .nc { color: #50fa7b } /* Name.Class */
+.highlight .no { color: #f8f8f2 } /* Name.Constant */
+.highlight .nd { color: #f8f8f2 } /* Name.Decorator */
+.highlight .ni { color: #f8f8f2 } /* Name.Entity */
+.highlight .ne { color: #f8f8f2 } /* Name.Exception */
+.highlight .nf { color: #50fa7b } /* Name.Function */
+.highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */
+.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+.highlight .nx { color: #f8f8f2 } /* Name.Other */
+.highlight .py { color: #f8f8f2 } /* Name.Property */
+.highlight .nt { color: #ff79c6 } /* Name.Tag */
+.highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */
+.highlight .ow { color: #ff79c6 } /* Operator.Word */
+.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+.highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */
+.highlight .mf { color: #bd93f9 } /* Literal.Number.Float */
+.highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */
+.highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */
+.highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */
+.highlight .sa { color: #f1fa8c } /* Literal.String.Affix */
+.highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */
+.highlight .sc { color: #f1fa8c } /* Literal.String.Char */
+.highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */
+.highlight .sd { color: #f1fa8c } /* Literal.String.Doc */
+.highlight .s2 { color: #f1fa8c } /* Literal.String.Double */
+.highlight .se { color: #f1fa8c } /* Literal.String.Escape */
+.highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */
+.highlight .si { color: #f1fa8c } /* Literal.String.Interpol */
+.highlight .sx { color: #f1fa8c } /* Literal.String.Other */
+.highlight .sr { color: #f1fa8c } /* Literal.String.Regex */
+.highlight .s1 { color: #f1fa8c } /* Literal.String.Single */
+.highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */
+.highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #50fa7b } /* Name.Function.Magic */
+.highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */
+.highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */
+.highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */
+.highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */
+.highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */
diff --git a/assets/scss/syntax/syntax-light.scss b/assets/scss/syntax/syntax-light.scss
index b27f7ff..0a199a0 100644
--- a/assets/scss/syntax/syntax-light.scss
+++ b/assets/scss/syntax/syntax-light.scss
@@ -1,5 +1,6 @@
-.highlight .hl { background-color: #ffffd4 }
-.highlight  { background: $ht-code-bgcolor;}
+// .highlight .hl { background-color: #ffffd4 }
+// .highlight  { background: $ht-code-bgcolor;}
+.highlight .lnt { color: #6a737d } /* line number */
 .highlight .c { color: #6a737d } /* Comment */
 .highlight .err {  } /* Error */
 .highlight .k { color: #d73a49 } /* Keyword */
@@ -66,4 +67,4 @@
 .highlight .vg { color: #24292e } /* Name.Variable.Global */
 .highlight .vi { color: #24292e } /* Name.Variable.Instance */
 .highlight .vm { color: #005cc5 } /* Name.Variable.Magic */
-.highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */
\ No newline at end of file
+.highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */
diff --git a/assets/scss/vendor/tufte.scss b/assets/scss/vendor/tufte.scss
index 5ce8afb..a40eadf 100644
--- a/assets/scss/vendor/tufte.scss
+++ b/assets/scss/vendor/tufte.scss
@@ -347,6 +347,7 @@ h3 .code {
 }
 
 pre.code {
+    font-size: 0.9rem;
     width: 52.5%;
     padding-left: 2.5%;
     overflow-x: scroll;