Easily embed remote code with syntax highlighting provided by Prism using a custom HTML element. No other dependencies other than Prism itself.
Example:
<prism-remote
src="https://github.com/Fingel/prism-remote/blob/main/prism-remote.js"
start="1"
end="10"
lang="javascript"
>
</prism-remote>
Would result in:
Provide the following attributes to the <prism-remote>
tag:
-
src
(required) The URL to the text you want to display. -
lang
(required) The language for highlighting. -
start
The first line to display (1 indexed). -
end
The last line to display.
If you are using Github it's possible to provide the natural URL instead of the raw URL. For example: https://github.com/Fingel/prism-remote/blob/main/prism-remote.js instead of https://raw.githubusercontent.com/Fingel/prism-remote/main/prism-remote.js . The attribution link at the bottom will point to the natural URL.
The attribution link has a class of prism-remote-attribution
so you can style it (or hide it alltogether).
Make sure you already have Prism available.
Include prism-remote.js directly
Include prism-remote.js on your page and load it. Make sure to use
type="module"
<script src="prism-remote.js" type="module"></script>
Use a CDN
<script
src="https://unpkg.com/prism-remote@latest/prism-remote.js"
type="module"
></script>
Install with npm
npm -i prism-remote
Then do Javascript things.