I've been trying to add syntax highlighting to <marked-element> using <prism-highlighter>, but I am at a complete loss on how to get this to work.
When reading the documentation for <prism-highlighter>, it states "This flow is supported by <marked-element>", but isn't clear on how to use them together.
When looking into the <prism-highlighter> source on the GitHub, the only demo given is for when using it alone, and using it this way would miss all the benefit of <marked-element>.
I could access the content with <marked-element>.markdown, but I can't figure out how I would process it and send it back, and every attempt to do so failed.
How do I used <marked-element> for the markdown, and also add syntax highlighting?
Or maybe change the iron-demo-helpers' <demo-snippet> so that I get the nice layout with the copy button, but for different languages like bash and python scripts. (Which are both supported according to the supported languages on the PrismJS website.)
Edit: It turns out that it wasn't how I was doing it that was wrong, but that the language I was using wasn't supported by default. Posted solution as answer below.
Insert the <marked-element> with your code after the <prism-highlighter> tag, just as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="import" href="/bower_components/marked-element/marked-element.html">
<link rel="import" href="/bower_components/prism-element/prism-highlighter.html">
</head>
<body>
<prism-highlighter></prism-highlighter>
<marked-element>
<script type="text/markdown">
```html
<div>yes</div>
<i>
console.log( "no log" )
</i>
```
</script>
</marked-element>
</body>
</html>
The highlighter will detect and style the elements inside the <marked-element>.