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