A Web Component for Highlighting Remote Code with Prism
🖊️ Austin Riba ⌚ 🔖 code 💬 0
I was playing around with Web Components and thought it would be neat to be able to display code snippets, but instead of static text load the content from a remote source. For example, displaying the source code for a file hosted on Github inline in a blog post. Thus prism-remote was born.
For example: To highlight lines 1 through 20 of
https://github.com/Fingel/prism-remote/blob/main/prism-remote.js using the <prism-remote>
custom element:
<prism-remote
src="https://github.com/Fingel/prism-remote/blob/main/prism-remote.js"
start="1"
end="20"
lang="javascript"
>
</prism-remote>
Results in:
While I think the Webcomponent API leaves a little to be desired, there are clearly neat use cases like this where they can be very useful.