prism-remote 1.0.0 → 1.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/README.md +34 -7
  2. package/example.html +2 -2
  3. package/package.json +1 -1
  4. 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
  ![highlight](https://github.com/Fingel/prism-remote/assets/3046397/a2f5ea68-f0ee-4a37-9bc6-be35b9502e9d)
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
- If you are using Github it's possible to provide the natural URL instead of the raw URL. For
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
- Include [prism-remote.js](prism-remote.js) on your page.
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
@@ -9,8 +9,8 @@
9
9
  <body>
10
10
  <h2>Github source with limited line range</h2>
11
11
  <prism-remote src="https://github.com/Fingel/prism-remote/blob/main/prism-remote.js"
12
- start="1"
13
- end="10"
12
+ start="6"
13
+ end="13"
14
14
  lang="javascript"
15
15
  ></prism-remote>
16
16
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "prism-remote",
3
- "version": "1.0.0",
3
+ "version": "1.2.0",
4
4
  "type": "module",
5
5
  "description": "A custom element for displaying remote code blocks with syntax highlighting provided by Prism",
6
6
  "main": "prism-remote.js",
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
- const start = this.hasAttribute("start")
44
- ? this.getAttribute("start")
45
- : 1;
46
- const end = this.hasAttribute("end")
47
- ? this.getAttribute("end")
48
- : codeLines.length;
49
- codeLines = codeLines.splice(start - 1, end);
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");