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

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