metalsmith-prism 5.0.0 → 5.0.1
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 +56 -36
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,45 +1,69 @@
|
|
|
1
1
|
# metalsmith-prism
|
|
2
2
|
|
|
3
|
-
A Metalsmith plugin that **adds Prism specific HTML markup** to code sections for syntax coloring.
|
|
3
|
+
A Metalsmith plugin that **adds Prism specific HTML markup** to code sections for syntax coloring.
|
|
4
4
|
|
|
5
5
|
[](http://opensource.org/licenses/MIT)
|
|
6
6
|
[](https://npmjs.org/package/metalsmith-prism)
|
|
7
7
|
[](https://travis-ci.org/Availity/metalsmith-prism)
|
|
8
8
|
[](https://ci.appveyor.com/project/robmcguinness/metalsmith-prism)
|
|
9
9
|
|
|
10
|
-
While this plugin adds all the required Prism HTML markup, **prism.css** must be included on the page to provide the syntax coloring.
|
|
10
|
+
While this plugin adds all the required Prism HTML markup, **prism.css** must be included on the page to provide the syntax coloring. The plugin:
|
|
11
|
+
|
|
12
|
+
- Automatically handles language dependencies
|
|
13
|
+
- Supports HTML entity decoding
|
|
14
|
+
- Can add line numbers
|
|
15
|
+
- Works seamlessly with Markdown code blocks
|
|
16
|
+
- Supports all Prism.js languages
|
|
11
17
|
|
|
12
18
|
## Requirements
|
|
13
19
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
- Node `>= 18.x.x`
|
|
21
|
+
- NPM `>= 9.x.x`
|
|
22
|
+
- Metalsmith `>= v2.6.x`
|
|
23
|
+
|
|
24
|
+
## Quick Start
|
|
17
25
|
|
|
26
|
+
1. Install the plugin
|
|
27
|
+
2. Add Prism CSS to your page
|
|
28
|
+
3. Add language classes to your code blocks
|
|
29
|
+
4. Configure the plugin in your Metalsmith build
|
|
18
30
|
|
|
31
|
+
Example using all features:
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
metalsmith(__dirname).use(
|
|
35
|
+
prism({
|
|
36
|
+
decode: true, // Decode HTML entities
|
|
37
|
+
lineNumbers: true, // Show line numbers
|
|
38
|
+
preLoad: ['java'], // Pre-load language dependencies
|
|
39
|
+
})
|
|
40
|
+
);
|
|
41
|
+
```
|
|
19
42
|
|
|
20
43
|
## Installation
|
|
21
44
|
|
|
22
45
|
NPM:
|
|
46
|
+
|
|
23
47
|
```bash
|
|
24
48
|
npm install metalsmith-prism --save-dev
|
|
25
49
|
```
|
|
26
50
|
|
|
27
51
|
Yarn:
|
|
52
|
+
|
|
28
53
|
```bash
|
|
29
54
|
yarn add metalsmith-prism
|
|
30
55
|
```
|
|
31
56
|
|
|
32
57
|
## Usage
|
|
33
58
|
|
|
34
|
-
### Add Prism styles to page header.
|
|
59
|
+
### Add Prism styles to page header.
|
|
35
60
|
|
|
36
|
-
If the `linenumbers` option is set to `true`, `prism-line-numbers.css` must be added to the page.
|
|
61
|
+
If the `linenumbers` option is set to `true`, `prism-line-numbers.css` must be added to the page.
|
|
37
62
|
|
|
38
63
|
The css files can be downloaded from the [Prism website](https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript) or [use a CDN](https://prismjs.com/#basic-usage-cdn). Please refer to the [Prism documentation](https://prismjs.com/index.html) for details.
|
|
39
64
|
|
|
40
65
|
```html
|
|
41
|
-
<link href="/assets/prism.css" rel="stylesheet" />
|
|
42
|
-
<link href="/assets/prism-line-numbers.css" rel="stylesheet" />
|
|
66
|
+
<link href="/assets/prism.css" rel="stylesheet" /> <link href="/assets/prism-line-numbers.css" rel="stylesheet" />
|
|
43
67
|
```
|
|
44
68
|
|
|
45
69
|
### Add language definition to code block
|
|
@@ -54,9 +78,7 @@ The css files can be downloaded from the [Prism website](https://prismjs.com/dow
|
|
|
54
78
|
const metalsmith = require('metalsmith');
|
|
55
79
|
const prism = require('metalsmith-prism');
|
|
56
80
|
|
|
57
|
-
metalsmith(__dirname)
|
|
58
|
-
.use(prism())
|
|
59
|
-
.build();
|
|
81
|
+
metalsmith(__dirname).use(prism()).build();
|
|
60
82
|
```
|
|
61
83
|
|
|
62
84
|
### To use with Markdown code blocks rendered by [@metalsmith/markdown](https://github.com/metalsmith/markdown)
|
|
@@ -66,14 +88,13 @@ const metalsmith = require('metalsmith');
|
|
|
66
88
|
const markdown = require('@metalsmith/markdown');
|
|
67
89
|
const prism = require('metalsmith-prism');
|
|
68
90
|
|
|
69
|
-
metalsmith(__dirname)
|
|
70
|
-
.use(markdown())
|
|
71
|
-
.use(prism())
|
|
72
|
-
.build();
|
|
91
|
+
metalsmith(__dirname).use(markdown()).use(prism()).build();
|
|
73
92
|
```
|
|
74
93
|
|
|
75
94
|
## Language support
|
|
76
95
|
|
|
96
|
+
The plugin default language support includes: markup, css, clike, javascript and php.
|
|
97
|
+
|
|
77
98
|
Supports all programming languages that have a corresponding Prism.js component file. Component files are found in the [Prism.js `components` directory](https://github.com/PrismJS/prism/tree/master/components).
|
|
78
99
|
|
|
79
100
|
## Options
|
|
@@ -83,21 +104,23 @@ Supports all programming languages that have a corresponding Prism.js component
|
|
|
83
104
|
Always decode the html entities when processing language of type `markup`
|
|
84
105
|
|
|
85
106
|
```js
|
|
86
|
-
Metalsmith(__dirname)
|
|
87
|
-
|
|
88
|
-
decode: true
|
|
89
|
-
})
|
|
107
|
+
Metalsmith(__dirname).use(
|
|
108
|
+
prism({
|
|
109
|
+
decode: true,
|
|
110
|
+
})
|
|
111
|
+
);
|
|
90
112
|
```
|
|
91
113
|
|
|
92
114
|
**lineNumbers (optional)**
|
|
93
115
|
|
|
94
|
-
Adds the additional HTML markup so line numbers can be added via the line-numbers CSS.
|
|
116
|
+
Adds the additional HTML markup so line numbers can be added via the line-numbers CSS.
|
|
95
117
|
|
|
96
118
|
```javascript
|
|
97
|
-
Metalsmith(__dirname)
|
|
98
|
-
|
|
99
|
-
lineNumbers: true
|
|
100
|
-
})
|
|
119
|
+
Metalsmith(__dirname).use(
|
|
120
|
+
metalsmithPrism({
|
|
121
|
+
lineNumbers: true,
|
|
122
|
+
})
|
|
123
|
+
);
|
|
101
124
|
```
|
|
102
125
|
|
|
103
126
|
**preLoad (optional)**
|
|
@@ -107,11 +130,13 @@ Pre-loads language component(s), such that each language component registers its
|
|
|
107
130
|
Useful for loading syntax that extends other language components that are not automatically registered by Prism
|
|
108
131
|
|
|
109
132
|
```javascript
|
|
110
|
-
Metalsmith(__dirname)
|
|
111
|
-
|
|
112
|
-
preLoad: [
|
|
113
|
-
})
|
|
133
|
+
Metalsmith(__dirname).use(
|
|
134
|
+
prism({
|
|
135
|
+
preLoad: ['java', 'scala'],
|
|
136
|
+
})
|
|
137
|
+
);
|
|
114
138
|
```
|
|
139
|
+
|
|
115
140
|
## Debug
|
|
116
141
|
|
|
117
142
|
To enable debug logs, set the `DEBUG` environment variable to `metalsmith-prism`:
|
|
@@ -142,16 +167,11 @@ Add `metalsmith-prism` key to your `metalsmith.json` plugins key
|
|
|
142
167
|
}
|
|
143
168
|
}
|
|
144
169
|
```
|
|
145
|
-
## Credits
|
|
146
|
-
|
|
147
|
-
[Robert McGuinness]( https://github.com/robmcguinness) - for the initial implementation of the plugin.
|
|
148
|
-
|
|
149
170
|
|
|
171
|
+
## Credits
|
|
150
172
|
|
|
173
|
+
[Robert McGuinness](https://github.com/robmcguinness) - for the initial implementation of the plugin.
|
|
151
174
|
|
|
152
175
|
## License
|
|
153
176
|
|
|
154
177
|
Code released under [the MIT license](https://github.com/wernerglinka/metalsmith-prism/blob/main/LICENSE).
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "metalsmith-prism",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"description": "Syntax highlighting for Metalsmith HTML templates using Prism.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"chai": "^5.1.2",
|
|
45
|
-
"eslint": "^9.
|
|
45
|
+
"eslint": "^9.15.0",
|
|
46
46
|
"eslint-config-prettier": "^9.1.0",
|
|
47
47
|
"eslint-plugin-prettier": "^5.2.1",
|
|
48
48
|
"mocha": "^10.8.2",
|