Add basic prismjs

app/components/highlight-syntax.js

@@ -0,0 +1,19 @@
+import Ember from 'ember';
+
+const {
+  Component
+ } = Ember;
+
+export default Component.extend({
+  didRender() {
+    this._super(...arguments);
+    let element = this._getElement();
+    if (element) {
+      Prism.highlightElement(element);
+    }
+  },
+
+  _getElement(){
+    return this.$('[class*=language-]')[0];
+  }
+});

app/styles/_code.scss

@@ -20,7 +20,9 @@ $code-theme--light--green: #229151;
 $code-theme--light--orange: #B75F25;
 
 code,
-pre {
+pre,
+code[class*="language-"],
+pre[class*="language-"] {
   background   : $code-theme--light--gray;
   border-radius: 4px;
   font-family  : Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@@ -43,9 +45,12 @@ code {
 
 .code-theme--dark {
   code,
-  pre {
+  pre,
+  code[class*="language-"],
+  pre[class*="language-"] {
     background: $code-theme--dark--black;
     color     : $code-theme--dark--white;
+    text-shadow: none;
   }
 
   .highlight .bp {
@@ -372,3 +377,106 @@ code {
   .highlight .vi { color: #226699; } /* Name.Variable.Instance */
   .highlight .w { color: #bbbbbb; } /* Text.Whitespace */
 }
+
+
+
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7C7C7C;
+}
+
+.token.punctuation {
+	color: #333;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+    color: #C02B20;
+}
+
+.token.class-name {
+	color: #FFFFB6;
+	text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+    color: #99CC99;
+}
+
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.number {
+	color: #007400;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #007400;
+}
+
+.token.variable {
+	color: #333;
+}
+
+.token.operator {
+    color: #333;
+}
+
+.token.entity {
+    color: #FFFFB6;
+    /* text-decoration: underline; */
+}
+
+.token.url {
+    color: #96CBFE;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #007400;
+}
+
+.token.atrule,
+.token.attr-value {
+    color: #F9EE98;
+}
+
+.token.function {
+	color: #2774D3;
+}
+
+.token.regex {
+    color: #E9C062;
+}
+
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

app/templates/components/comment-item.hbs

@@ -36,7 +36,9 @@
     {{/if}}
   </div>
   <div class="comment-body">
-    {{{processedBody}}}
+    {{#highlight-syntax}}
+      {{{processedBody}}}
+    {{/highlight-syntax}}
   </div>
 {{/if}}
 </div>

app/templates/components/editor-with-preview.hbs

@@ -21,5 +21,9 @@
       value=input}}
   </div>
 {{else}}
-  <div class="body-preview">{{{preview}}}</div>
+  <div class="body-preview">
+    {{#highlight-syntax}}
+      {{{preview}}}
+    {{/highlight-syntax}}
+  </div>
 {{/if}}

bower.json

@@ -8,6 +8,7 @@
     "bourbon": "^4.3.1",
     "neat": "^1.8.0",
     "raven-js": "~3.3",
-    "dragula": "^3.5.4"
+    "dragula": "^3.5.4",
+    "prism": "^1.6.0"
   }
 }

package.json

@@ -77,6 +77,7 @@
     "ember-normalize": "1.0.0",
     "ember-page-title": "^3.1.2",
     "ember-power-select": "1.5.0",
+    "ember-prism": "0.0.8",
     "ember-radio-button": "^1.0.7",
     "ember-resolver": "^2.0.3",
     "ember-route-action-helper": "^2.0.0",