prism-remote 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +34 -7
- package/package.json +1 -1
- package/prism-remote.js +1 -1
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/package.json
CHANGED
package/prism-remote.js
CHANGED
|
@@ -46,7 +46,7 @@ export class PrismRemote extends HTMLElement {
|
|
|
46
46
|
const end = this.hasAttribute("end")
|
|
47
47
|
? this.getAttribute("end")
|
|
48
48
|
: codeLines.length;
|
|
49
|
-
codeLines = codeLines.splice(start - 1, end);
|
|
49
|
+
codeLines = codeLines.splice(start - 1, end - start + 1);
|
|
50
50
|
code = codeLines.join("\n");
|
|
51
51
|
|
|
52
52
|
const codePre = document.createElement("pre");
|