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:

<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.