Highlighting not working when inside a dom-repeat template

[mohanaravind]

Description

Highlighting doesn't work when it is inside a dom-repeat template. Reason being the _highlight method inside prism-highlighter.html never gets called. It will be nicer if we expose the prism API directly as a method on the component. It works if I explicitly use the _highlight method.

Expected outcome

Code highlights

Actual outcome

The tag not getting rendered

Live Demo

https://jsbin.com/vipuxo/2/edit?html,output

Steps to reproduce

Have a prism-element inside a dom-repeat template

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[eblaine]

The internal _highlight method is never called because the prism-highlighter's parent's attach function is called before the prism-highlighter's attach function.

You'll notice that the prism-highlighter's attach function registers _highlight as a handler for the 'syntax-highlight' event, but that event fires in the parent's attach function before the handler is registered.

Potential workaround would be to fire the syntax-highlight event asynchronously, after the highlighter has been attached.

See related issue: Polymer/polymer#4726