diff --git a/app/components/highlight-syntax.js b/app/components/highlight-syntax.js
new file mode 100644
index 000000000..9c90a4c52
--- /dev/null
+++ b/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];
+ }
+});
diff --git a/app/styles/_code.scss b/app/styles/_code.scss
index a049e9ce8..3eb2cd176 100644
--- a/app/styles/_code.scss
+++ b/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;
+}
diff --git a/app/templates/components/comment-item.hbs b/app/templates/components/comment-item.hbs
index 4ba5eb90c..750d78264 100644
--- a/app/templates/components/comment-item.hbs
+++ b/app/templates/components/comment-item.hbs
@@ -36,7 +36,9 @@
{{/if}}
- {{{processedBody}}}
+ {{#highlight-syntax}}
+ {{{processedBody}}}
+ {{/highlight-syntax}}
{{/if}}
diff --git a/app/templates/components/editor-with-preview.hbs b/app/templates/components/editor-with-preview.hbs
index 6175e3e32..b0a7496f3 100644
--- a/app/templates/components/editor-with-preview.hbs
+++ b/app/templates/components/editor-with-preview.hbs
@@ -22,5 +22,9 @@
value=input}}
{{else}}
- {{{preview}}}
+
+ {{#highlight-syntax}}
+ {{{preview}}}
+ {{/highlight-syntax}}
+
{{/if}}
diff --git a/bower.json b/bower.json
index cb1ac65af..faa98b9b7 100644
--- a/bower.json
+++ b/bower.json
@@ -6,6 +6,7 @@
"zxcvbn": "^4.4.2",
"typed.js": "^1.1.1",
"raven-js": "~3.3",
- "dragula": "^3.5.4"
+ "dragula": "^3.5.4",
+ "prism": "^1.6.0"
}
}
diff --git a/package.json b/package.json
index e6338b8d9..57dd04747 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
"ember-normalize": "1.0.0",
"ember-page-title": "3.2.0",
"ember-power-select": "^1.9.5",
+ "ember-prism": "0.1.1",
"ember-radio-button": "^1.0.7",
"ember-resolver": "^4.0.0",
"ember-route-action-helper": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index a054e4a16..4ce35a0c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2025,6 +2025,14 @@ cli-width@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+clipboard@^1.5.5:
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
+ dependencies:
+ good-listener "^1.2.2"
+ select "^1.1.2"
+ tiny-emitter "^2.0.0"
+
cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -2407,6 +2415,10 @@ delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+delegate@^3.1.2:
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.3.tgz#9a8251a777d7025faa55737bc3b071742127a9fd"
+
delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3508,6 +3520,15 @@ ember-power-select@^1.9.5:
ember-text-measurer "^0.3.3"
ember-truth-helpers "^1.3.0"
+ember-prism@0.1.1:
+ version "0.1.1"
+ resolved "https://registry.yarnpkg.com/ember-prism/-/ember-prism-0.1.1.tgz#8abdbae9474313f7547c003d9753132a3c644f02"
+ dependencies:
+ ember-cli-babel "^6.0.0"
+ ember-cli-htmlbars "^1.1.1"
+ ember-cli-node-assets "^0.2.2"
+ prismjs "^1.6.0"
+
ember-qunit@^2.1.3:
version "2.2.0"
resolved "https://registry.yarnpkg.com/ember-qunit/-/ember-qunit-2.2.0.tgz#3cdf400031c93a38de781a7304819738753b7f99"
@@ -4617,6 +4638,12 @@ globule@^1.0.0:
lodash "~4.17.4"
minimatch "~3.0.2"
+good-listener@^1.2.2:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+ dependencies:
+ delegate "^3.1.2"
+
graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -6569,6 +6596,12 @@ printf@^0.2.3:
version "0.2.5"
resolved "https://registry.yarnpkg.com/printf/-/printf-0.2.5.tgz#c438ca2ca33e3927671db4ab69c0e52f936a4f0f"
+prismjs@^1.6.0:
+ version "1.7.0"
+ resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.7.0.tgz#6c03898d388762f460cb06d2773c7f4e6d2cd614"
+ optionalDependencies:
+ clipboard "^1.5.5"
+
private@^0.1.6, private@^0.1.7, private@~0.1.5:
version "0.1.7"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
@@ -7133,6 +7166,10 @@ scss-tokenizer@^0.2.3:
js-base64 "^2.1.8"
source-map "^0.4.2"
+select@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.1.1, semver@^5.3.0:
version "5.4.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
@@ -7733,6 +7770,10 @@ thunkify@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/thunkify/-/thunkify-2.1.2.tgz#faa0e9d230c51acc95ca13a361ac05ca7e04553d"
+tiny-emitter@^2.0.0:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+
tiny-lr@^1.0.3:
version "1.0.5"
resolved "https://registry.yarnpkg.com/tiny-lr/-/tiny-lr-1.0.5.tgz#21f40bf84ebd1f853056680375eef1670c334112"