diff --git a/bower.json b/bower.json
index 2707046de..e04aac9eb 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,6 @@
 {
   "name": "semantic-ui-ember",
   "dependencies": {
-    "highlightjs": "^9.4.0",
     "semantic-ui": "2.2.11"
   }
 }
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 6842ff509..1e217073e 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -7,7 +7,8 @@ module.exports = function(defaults) {
     // Add options here
     'ember-cli-babel': {
       includePolyfill: false
-    }
+    },
+    snippetSearchPaths: ['tests/dummy/app']
   });
 
   /*
@@ -17,9 +18,6 @@ module.exports = function(defaults) {
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
 
-  // Import Highlight.js
-  app.import(app.bowerDirectory + "/highlightjs/highlight.pack.min.js");
-
   app.import(app.bowerDirectory + "/highlightjs/styles/github-gist.css");
   app.import(app.bowerDirectory + "/highlightjs/styles/hybrid.css");
 
diff --git a/package.json b/package.json
index a0f4a58cf..64a127f40 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "ember-cli-shims": "^1.0.2",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
+    "ember-code-snippet": "^1.9.0",
     "ember-composable-helpers": "2.0.3",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "2.0.0",
diff --git a/tests/dummy/app/components/ui-code-snippet.js b/tests/dummy/app/components/ui-code-snippet.js
new file mode 100644
index 000000000..6805fd234
--- /dev/null
+++ b/tests/dummy/app/components/ui-code-snippet.js
@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['annotation', 'transition'],
+  classNameBindings: ['showing:visible:hidden']
+});
diff --git a/tests/dummy/app/templates/components/ui-code-snippet.hbs b/tests/dummy/app/templates/components/ui-code-snippet.hbs
new file mode 100644
index 000000000..770b00caa
--- /dev/null
+++ b/tests/dummy/app/templates/components/ui-code-snippet.hbs
@@ -0,0 +1,3 @@
+<div class="ui instructive bottom attached segment">
+  {{code-snippet name=name}}
+</div>
diff --git a/tests/dummy/app/templates/modules/sidebar.hbs b/tests/dummy/app/templates/modules/sidebar.hbs
index 16d240e61..63b5b8b89 100644
--- a/tests/dummy/app/templates/modules/sidebar.hbs
+++ b/tests/dummy/app/templates/modules/sidebar.hbs
@@ -1,3 +1,5 @@
+
+
 <div class="ui masthead vertical segment">
   <div class="ui container">
     <div class="introduction">
@@ -35,7 +37,8 @@
     as |showing setCopyCode|}}
 
     {{#ui-html showing=showing}}
-      <div class="ui button" {{action 'toggle' 'sub-sidebar'}}>
+      {{! BEGIN-SNIPPET sidebar.example }}
+      <div class="ui button" {{action "toggle" "sub-sidebar"}}>
         Toggle
       </div>
       <div class="ui pushable segment component context">
@@ -50,26 +53,10 @@
           </div>
         </div>
       </div>
+      {{! END-SNIPPET }}
     {{/ui-html}}
 
-    {{#ui-annotation showing=showing setCopyCode=setCopyCode}}
-<div class="ui button" onclick="\{{action 'toggle' 'sub-sidebar'}}">
-  Toggle
-</div>
-<div class="ui pushable segment component context">
-  \{{#ui-sidebar class="inverted menu left inline vertical" context=".component.context" id="sub-sidebar"}}
-    <a class="item">Item 1</a>
-    <a class="item">Item 2</a>
-    <a class="item">Item 3</a>
-  \{{/ui-sidebar}}
-  <div class="pusher">
-    <div class="ui basic segment" style="min-height: 300px;">
-      Sub Content Here
-    </div>
-  </div>
-</div>
-    {{/ui-annotation}}
-
+    {{ui-code-snippet showing=showing name="sidebar.example.hbs"}}
   {{/ui-example}}
 
 </div>