From bd4ccb33e01f9b48475ff226aa4f12590c1c6d47 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Wed, 15 Mar 2017 20:53:21 -0700 Subject: [PATCH] Add basic prismjs --- app/components/highlight-syntax.js | 19 +++ app/styles/_code.scss | 112 +++++++++++++++++- app/templates/components/comment-item.hbs | 4 +- .../components/editor-with-preview.hbs | 6 +- bower.json | 3 +- package.json | 1 + yarn.lock | 41 +++++++ 7 files changed, 181 insertions(+), 5 deletions(-) create mode 100644 app/components/highlight-syntax.js 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"