From 63b5a9eeea8a79583a794bad4286793aef4bbdc5 Mon Sep 17 00:00:00 2001
From: Rod Leviton <rod@rodleviton.com>
Date: Fri, 13 Jan 2017 21:28:15 +1100
Subject: [PATCH] feat(style): update syntax highlighting to highlightjs

---
 css/components/code.styl        | 11 ++++++-----
 index.js                        |  5 +++--
 templates/partials/snippet.html | 24 ++++++++++++------------
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/css/components/code.styl b/css/components/code.styl
index 246231f..84ab9e7 100644
--- a/css/components/code.styl
+++ b/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%)
diff --git a/index.js b/index.js
index d6fa923..e536f4b 100644
--- a/index.js
+++ b/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({
diff --git a/templates/partials/snippet.html b/templates/partials/snippet.html
index 8d836de..451cd87 100644
--- a/templates/partials/snippet.html
+++ b/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>