Optimize Syntax Highlighting #111
Conversation
addon/services/ember-freestyle.js
Outdated
| ensureHljs() { | ||
| if (!hljsPromise) { | ||
| hljsPromise = new Promise((resolve) => { | ||
| return Ember.$.getScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js').done((script) => { |
There was a problem hiding this comment.
We might want to consider adding a timeout and/or offline check, so that styleguides are usable offline (without syntax highlighting).
There was a problem hiding this comment.
Or maybe this will just work as is. We could add a catch that logs the fact that syntax highlighting is not available.
There was a problem hiding this comment.
The components render without syntax highlighting and happily wait for the ensureHljs promise to resolve. The highlight.js highlight call is chained off of that, so it all seems to work safely and nicely.
A log message indicating that syntax highlighting isn't available because of a timeout could be nice.
|
|
||
| const { computed } = Ember; | ||
|
|
||
| export default MDTextComponent.extend({ |
There was a problem hiding this comment.
Would you consider this component public API? We could consider leaving a stub version of the component that throws an error instructing the user what to use instead.
There was a problem hiding this comment.
This component never made it into a released version. Earlier versions of freestyle were using the md-text component provided by (my fork of) ember-remarkable.
I switched over to this approach to get off of my ember-remarkable fork before realizing ember-cli-showdown + highlight.js-via-CDN would come together so nicely.
|
Huge win! |
chrislopresto
force-pushed
the
showdown
branch
3 times, most recently
from
8b4d4b9 to
bd171a4
Compare
This PR swaps out https://github.com/johnotander/ember-remarkable for https://github.com/gcollazo/ember-cli-showdown. This allows us to accomplish a few more things in this PR:
This reduces the vendor.js payload size by a lot. Here's the before / after for the addon's dummy app:
master
❯ ember build dist --environment=production
File sizes:
showdown
❯ ember build dist --environment=production
File sizes:
Resolves #13
Resolves #14
Resolves #31
Resolves #80
Resolves #81
Resolves #84
Resolves #105
/cc @lukemelia