prism-remote 1.0.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -7
- package/example.html +2 -2
- package/package.json +1 -1
- package/prism-remote.js +13 -7
package/README.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
# prism-remote
|
|
2
|
+
|
|
2
3
|
Easily embed remote code with syntax highlighting provided by [Prism](https://prismjs.com/) using a custom HTML
|
|
3
4
|
element. No other dependencies other than Prism itself.
|
|
4
5
|
|
|
@@ -13,24 +14,50 @@ Example:
|
|
|
13
14
|
>
|
|
14
15
|
</prism-remote>
|
|
15
16
|
```
|
|
17
|
+
|
|
16
18
|
Would result in:
|
|
17
19
|
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
### Usage
|
|
23
|
+
|
|
21
24
|
Provide the following attributes to the `<prism-remote>` tag:
|
|
22
|
-
- `src` (required) The URL to the text you want to display.
|
|
23
|
-
- `lang` (required) The language for highlighting.
|
|
24
|
-
- `start` The first line to display (1 indexed).
|
|
25
|
-
- `end` The last line to display.
|
|
26
25
|
|
|
27
|
-
|
|
26
|
+
- `src` (required) The URL to the text you want to display.
|
|
27
|
+
- `lang` (required) The language for highlighting.
|
|
28
|
+
- `start` The first line to display (1 indexed).
|
|
29
|
+
- `end` The last line to display.
|
|
30
|
+
|
|
31
|
+
If you are using Github it's possible to provide the natural URL instead of the raw URL. For
|
|
28
32
|
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
|
|
29
33
|
. The attribution link at the bottom will point to the natural URL.
|
|
30
34
|
|
|
31
35
|
The attribution link has a class of `prism-remote-attribution` so you can style it (or hide it alltogether).
|
|
32
36
|
|
|
33
37
|
### Installation
|
|
34
|
-
Make sure you have [Prism](https://prismjs.com/) available.
|
|
35
38
|
|
|
36
|
-
|
|
39
|
+
Make sure you already have [Prism](https://prismjs.com/) available.
|
|
40
|
+
|
|
41
|
+
**Include prism-remote.js directly**
|
|
42
|
+
|
|
43
|
+
Include [prism-remote.js](prism-remote.js) on your page and load it. Make sure to use
|
|
44
|
+
`type="module"`
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<script src="prism-remote.js" type="module"></script>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
**Use a CDN**
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<script
|
|
54
|
+
src="https://unpkg.com/prism-remote@latest/prism-remote.js"
|
|
55
|
+
type="module"
|
|
56
|
+
></script>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
**Install with npm**
|
|
60
|
+
|
|
61
|
+
`npm -i prism-remote`
|
|
62
|
+
|
|
63
|
+
Then do Javascript things.
|
package/example.html
CHANGED
package/package.json
CHANGED
package/prism-remote.js
CHANGED
|
@@ -40,13 +40,19 @@ export class PrismRemote extends HTMLElement {
|
|
|
40
40
|
|
|
41
41
|
let code = await this.fetchSrc(rawUrl);
|
|
42
42
|
let codeLines = code.split("\n");
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
43
|
+
let start = 1;
|
|
44
|
+
if (this.hasAttribute("start")) {
|
|
45
|
+
start = this.getAttribute("start");
|
|
46
|
+
srcUrl = `${srcUrl}#L${start}`;
|
|
47
|
+
}
|
|
48
|
+
let end = codeLines.length + 1;
|
|
49
|
+
if (this.hasAttribute("end")) {
|
|
50
|
+
end = this.getAttribute("end");
|
|
51
|
+
if (this.hasAttribute("start")) {
|
|
52
|
+
srcUrl = `${srcUrl}-L${end}`;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
codeLines = codeLines.splice(start - 1, end - start + 1);
|
|
50
56
|
code = codeLines.join("\n");
|
|
51
57
|
|
|
52
58
|
const codePre = document.createElement("pre");
|