marked-element exposes no way for syntax highlight in fenced code blocks

[chalu]

Description

The marked-element element has no clear or configurable way of highlighting code, e.g with highlight js.

Expected outcome

Code blocks should be highlight-able using marked.js highlight option

Actual outcome

marked-element only fires a 'syntax-highlight' event which I can listen for. There is no way to plug in and highlight code

Steps to reproduce

1.Load highlight css with

2. Load highlight script with
3. Put a marked-element element in the page. 4.Inside the marked-element, add a
4. Inside the marked-element, add
5. Open the page in a browser and see that fenced code blocks are not highlighted

[stramel]

@chalu So disclaimer that I haven't attempted this, but you should be able to...

Listen for the event syntax-highlight using the listener to process the code. Updating the code property of the event.

https://github.com/chjj/marked#highlight

UPDATE: Here is a quick jsfiddle to get you going. https://jsfiddle.net/stramel/qfbwsLj6/

[chalu]

I made some changes that broke the fiddle. Here is how my code is actually structured : https://paste.fedoraproject.org/paste/borN7tKz17m7ok8orervPl5M1UNdIGYhyRLivL9gydE= I am using Polymer 2.x with ES6 classes. e.detail.code gets set to the transformed / highlighted code that is displayed in the browser. I just need to figure out why I still don't see any syntax highlight.

Thanks a lot.

[stramel]

It just appears that the highlightjs styles aren't applying. The dom looks correct at least in my fiddle to match what you have.

https://jsfiddle.net/stramel/crx1zL3n/

[chalu]

Yes. You are correct. I got it working with this hack / solution:

1. I created a shared styles element called 'highlight-styles'.
2. I copied the contents of a highlight.js style into it, e.g https://github.com/isagalaev/highlight.js/blob/master/src/styles/github.css
3. Since importing ' highlight-styles' into the custom element hosting the marked-element did not apply the highlight styles to code blocks, I had to do this next step in (4) below 4 I edited highlight-styles again and prefixed all css rules with [slot="markdown-html"] pre > code, such that .hljs {} became [slot="markdown-html"] pre > code .hljs {}

What would be the appropriate way to apply external CSS to a shadow root, without having to modify the external CSS rules ?

Thanks!

[stramel]

Currently, there isn't a good way to get around it. Maybe once we offer a 2.0 (non-hybrid), you could extend marked-element to do that a bit easier... I think what you said now is probably the best way to handle it.

[chalu]

Thanks. One more thing, the syntax-highlight event is not documented here: https://www.webcomponents.org/element/PolymerElements/marked-element/elements/marked-element I had to look at the source code for marked-element to figure this out on line 303 : https://github.com/PolymerElements/marked-element/blob/master/marked-element.html#L303

Would be nice to also include a code-highlight example within the docs. Is this something I can contribute to this element ?

[stramel]

Ah, good point. Yeah, feel free to put a PR updating the documentation.

[chalu]

Great. Doing so ..

[chalu]

I made a pull request. Kindly review here : https://github.com/PolymerElements/marked-element/pull/68

On Mon, Jun 5, 2017 at 3:37 PM, Michael Stramel notifications@github.com wrote:

Ah, good point. Yeah, feel free to put a PR updating the documentation.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerElements/marked-element/issues/66#issuecomment-306177167, or mute the thread https://github.com/notifications/unsubscribe-auth/AAQ3PnJCw6KwGrWVLG6MYtpje61UI4ylks5sA_aDgaJpZM4NuJ7e .

-- Kind Regards Odili Charles Opute Twitter : @chaluwa *Author : *http://goo.gl/v54jy http://goo.gl/v54jy