Revamp how to apply HLjs

- Remove `<span class="line"></span>` that cause more issue than fix it
- Rewrite JS that apply _HighlightJS_

fixes #154

3 files changed, 10 insertions, 2 deletions

diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss
index 617eccf..85bb90c 100755
--- a/src/scss/base/_base.scss
+++ b/src/scss/base/_base.scss
@@ -135,7 +135,7 @@ pre > code {
     // To override cursor attribute of `.tag` components
     cursor:      text;
     overflow-x:  auto;
-    line-height: map-get($highlight, line-height) + 0.4em;
+    line-height: map-get($highlight, line-height) + 0.4rem;
     font-size:   map-get($highlight, font-size);
 }
 
diff --git a/src/scss/components/_code.scss b/src/scss/components/_code.scss
index f108d94..265ba03 100755
--- a/src/scss/components/_code.scss
+++ b/src/scss/components/_code.scss
@@ -51,6 +51,12 @@ figure.highlight,
     .gutter {
         border-right: map-get($highlight, border);
         padding:      0.3em 15px;
+        line-height:    map-get($highlight, line-height);
+        font-size:      map-get($highlight, font-size);
+
+        pre {
+            color: #aaaaaa;
+        }
     }
     // Code container
     .code {
@@ -58,6 +64,8 @@ figure.highlight,
         width:   100%;
 
         pre {
+            line-height:    map-get($highlight, line-height);
+            font-size:      map-get($highlight, font-size);
             max-width:  calc(#{map-get($main-content, 'max-width')} - 50px);
             overflow-x: auto;
             overflow-y: hidden;
diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss
index 6c4f4dc..3c60521 100755
--- a/src/scss/utils/_variables.scss
+++ b/src/scss/utils/_variables.scss
@@ -168,7 +168,7 @@ $highlight: (
     'background':  #f7f8f8,
     'font-size':   1.4rem,
     'border':      1px solid,
-    'line-height': 1.3em
+    'line-height': 2.3rem
 );
 
 // Highlight colors