RFC? Prism Support? #56
Conversation
|
If prism is strictly better we can just switch. Or we can split ember-code-snippet into two separate libraries. One would focus only on code highlighting, the other would focus on discovering and packaging up the snippets. |
|
Funnily enough, yesterday I was looking for this exact thing. We've found Prism is better for handlebars syntax highlighting as it adds more styleable classes than highlightjs does. HighlightJS Prism |
| @@ -39,10 +39,12 @@ export default Ember.Component.extend({ | |||
| }), | |||
|
|
|||
| didInsertElement: function(){ | |||
| Highlight.highlightBlock(this.get('element')); | |||
| // Highlight.highlightBlock(this.get('element')); | |||
There was a problem hiding this comment.
I had hacked this in which worked for our use case. Once you have Prism on the page you can do something like the following:
const Prism = self.Prism;
let codeElement = this.get('element').querySelector('code');
let highlighted = Prism.highlight(codeElement.innerText.trim(), Prism.languages[this.get('language')], this.get('language'));
codeElement.innerHTML = highlighted;This way if you have a tabbed UI like in ember-cli-addons-docs the syntax highlighting will still work as you switch between the tabs.
There was a problem hiding this comment.
there is also
Prism.highlightAllUnder(this.element);
|
Would be great to decouple as we have our own custom highlighter code too. |
Here is a first stab at it: #62 (covering the latter concern) |
|
This is now done, thanks @simonihmig. ember-code-snippet 3.0.0 is a breaking change that switches us to "bring-your-own highlighter component". The README shows how to use it with prism. |
|
Nice work!! Will have to upgrade AddonDocs to use Prism now, think it will be much better 👍 |
so, I'm using Prism, as it has better syntax detection / parsing.
I had to disable highlight, and change a few other things.
It seems highlight.js isn't up to spec with semantics, compared with prism.
Related: #55