feat(style): update syntax highlighting to highlightjs

css/components/code.styl

@@ -28,8 +28,9 @@
 .window-bar
   transition: 0.25s ease-in-out
   height 38px
-  background #1D1F21
-  border-radius: 6px
+  background $white-smoke
+  border-top-left-radius 6px
+  border-top-right-radius 6px
 
 .window-bar .circles
   margin 10px 15px 0 15px
@@ -46,12 +47,12 @@
 
 .window-bar .circle-red
   background-color #FF5A57
-  border-color #E53C3C
+  border-color darken(#E53C3C, 5%)
 
 .window-bar .circle-yellow
   background-color #FFBE3E
-  border-color #E4A132
+  border-color darken(#FFBE3E, 5%)
 
 .window-bar .circle-green
   background-color #00CC50
-  border-color #00B140
+  border-color darken(#00CC50, 5%)

index.js

@@ -9,13 +9,14 @@ import smoothScroll from './js/libs/smooth-scroll';
 import accordion from './js/libs/accordion';
 
 // Syntax highlighting
-import 'highlightjs';
+import hljs from 'highlightjs';
 
 // Base theme
 import './css/index.styl';
 
-
 (() => {
+  hljs.initHighlighting();
+
   accordion.init();
 
   gumshoe.init({

templates/partials/snippet.html

@@ -1,15 +1,15 @@
 <div class="{$ styles['code-snippet'] $}">
-    <div class="{$ styles['example-wrapper'] $}">
-        {$ template $}
-    </div>
-    <div class="{$ styles['window-bar'] $} sd-accordion">
-        <div class="{$ styles.circles $}">
-            <span class="{$ styles.circle $} {$ styles['circle-red'] $}"></span>
-            <span class="{$ styles.circle $} {$ styles['circle-yellow'] $}"></span>
-            <span class="{$ styles.circle $} {$ styles['circle-green'] $}"></span>
-        </div>
-    </div>
-    <div class="{$ styles['code-wrapper'] $} sd-panel">
-        <pre class="line-numbers"><code class="language-markup">{$ encode(template) $}</code></pre>
+  <div class="{$ styles['example-wrapper'] $}">
+    {$ template $}
+  </div>
+  <div class="{$ styles['window-bar'] $}">
+    <div class="{$ styles.circles $}">
+      <span class="{$ styles.circle $} {$ styles['circle-red'] $}"></span>
+      <span class="{$ styles.circle $} {$ styles['circle-yellow'] $}"></span>
+      <span class="{$ styles.circle $} {$ styles['circle-green'] $}"></span>
     </div>
+  </div>
+  <div class="{$ styles['code-wrapper'] $}">
+    <pre class="{$ styles.pre $}"><code class="html language-html">{$ encode(template) $}</code></pre>
+  </div>
 </div>