A Web Component for Highlighting Remote Code with Prism

🖊️ 🔖 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:


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.