jekyll-github-code 0.2.1 → 0.3.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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +20 -0
- data/README.md +4 -16
- data/assets/css/github-code.css +1 -196
- data/demo.html +13 -5
- data/jekyll-github-code.gemspec +1 -0
- data/lib/jekyll-github-code/code_renderer.rb +31 -26
- data/lib/jekyll-github-code/generator.rb +4 -42
- data/lib/jekyll-github-code/version.rb +1 -1
- metadata +15 -2
- data/assets/js/github-code.js +0 -29
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4573b22b260086df7a2a4d513a97ca2a49b92efefbaf372da35a527314f84174
|
|
4
|
+
data.tar.gz: 4dbef8fc4fbd4e86b7c9202c84a84d6b1cedc82ed86554f1759c80bb7050c62b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 51e85e035eb357891c63d95113bf533783f2920471a0b8e1b05513767fb4f651a0552c10e1f3aca548f80f20d4abd582728c5e640be5e4222b4db3912624b3cc
|
|
7
|
+
data.tar.gz: 666bfb728666f2c97e06042e1e610f0cf73838c9215f0b07876f190683a3b96d281894a920c6b7b751059deda606df19ca08f295d0f1759e163493e9be0561ab
|
data/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.3.0] - 2025-12-12
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
- Rouge syntax highlighting (Jekyll's built-in highlighter)
|
|
12
|
+
- Automatic language detection from filename
|
|
13
|
+
|
|
14
|
+
### Removed
|
|
15
|
+
- Copy-to-clipboard button (simplified solution)
|
|
16
|
+
- JavaScript file (no longer needed)
|
|
17
|
+
- Manual language mapping (Rouge handles this automatically)
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
- Automatic asset generation now only copies CSS file
|
|
21
|
+
- Syntax highlighting is now done at build time using Rouge
|
|
22
|
+
|
|
23
|
+
## [0.2.2] - 2025-12-12
|
|
24
|
+
|
|
25
|
+
### Fixed
|
|
26
|
+
- Fix override with jekyll-github-card
|
|
27
|
+
|
|
8
28
|
## [0.2.1] - 2025-12-12
|
|
9
29
|
|
|
10
30
|
### Fixed
|
data/README.md
CHANGED
|
@@ -9,8 +9,7 @@ A Jekyll plugin that lets you embed code from GitHub repositories directly in yo
|
|
|
9
9
|
|
|
10
10
|
- **Embed full files** from any public GitHub repository
|
|
11
11
|
- **Line range support** - show only specific lines (`#L5-L15`)
|
|
12
|
-
- **Automatic syntax highlighting**
|
|
13
|
-
- **Copy button** for easy code copying
|
|
12
|
+
- **Automatic syntax highlighting** using Rouge (Jekyll's built-in highlighter)
|
|
14
13
|
- **Clickable filename** links directly to GitHub
|
|
15
14
|
- **Dark/light mode support** compatible with Chirpy theme
|
|
16
15
|
- **Graceful error handling** with informative messages
|
|
@@ -44,9 +43,9 @@ plugins:
|
|
|
44
43
|
- jekyll-github-code
|
|
45
44
|
```
|
|
46
45
|
|
|
47
|
-
### Include the
|
|
46
|
+
### Include the Styles
|
|
48
47
|
|
|
49
|
-
The plugin automatically copies CSS
|
|
48
|
+
The plugin automatically copies the CSS file to your site's `_site/assets/github-code/` directory during build.
|
|
50
49
|
|
|
51
50
|
Add the stylesheet to your layout's `<head>`:
|
|
52
51
|
|
|
@@ -54,19 +53,9 @@ Add the stylesheet to your layout's `<head>`:
|
|
|
54
53
|
<link rel="stylesheet" href="/assets/github-code/css/github-code.css">
|
|
55
54
|
```
|
|
56
55
|
|
|
57
|
-
Add the JavaScript before the closing `</body>` tag (required for the copy button):
|
|
58
|
-
|
|
59
|
-
```html
|
|
60
|
-
<script src="/assets/github-code/js/github-code.js"></script>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
56
|
#### For Chirpy Theme
|
|
64
57
|
|
|
65
|
-
If you're using the Chirpy theme,
|
|
66
|
-
|
|
67
|
-
1. Copy the CSS content to your custom styles
|
|
68
|
-
2. Or add the link tag to `_includes/head.html`
|
|
69
|
-
3. Add the script tag to `_layouts/default.html` before `</body>`
|
|
58
|
+
If you're using the Chirpy theme, add the link tag to `_includes/head.html`.
|
|
70
59
|
|
|
71
60
|
## Usage
|
|
72
61
|
|
|
@@ -218,7 +207,6 @@ Open `demo.html` in your browser to see a preview of the rendered output with di
|
|
|
218
207
|
4. Escapes HTML entities in the code
|
|
219
208
|
5. Renders a styled code block with:
|
|
220
209
|
- GitHub icon and clickable filename
|
|
221
|
-
- Copy button
|
|
222
210
|
- Syntax-highlighted code
|
|
223
211
|
|
|
224
212
|
## Caching
|
data/assets/css/github-code.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* Jekyll GitHub Code Styles
|
|
2
2
|
* Supports both light and dark themes
|
|
3
3
|
* For Chirpy theme: uses data-mode="light" for light, default for dark
|
|
4
|
+
* Syntax highlighting is provided by Rouge (Jekyll's built-in highlighter)
|
|
4
5
|
*/
|
|
5
6
|
|
|
6
7
|
.github-code-block {
|
|
@@ -11,7 +12,6 @@
|
|
|
11
12
|
--github-code-text-secondary: #8b949e;
|
|
12
13
|
--github-code-link: #58a6ff;
|
|
13
14
|
--github-code-link-hover: #79c0ff;
|
|
14
|
-
--github-code-copy-hover: #238636;
|
|
15
15
|
|
|
16
16
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
17
17
|
background-color: var(--github-code-bg);
|
|
@@ -70,7 +70,6 @@
|
|
|
70
70
|
.github-code-header {
|
|
71
71
|
display: flex;
|
|
72
72
|
align-items: center;
|
|
73
|
-
justify-content: space-between;
|
|
74
73
|
padding: 10px 16px;
|
|
75
74
|
background-color: var(--github-code-header-bg);
|
|
76
75
|
border-bottom: 1px solid var(--github-code-border);
|
|
@@ -105,34 +104,6 @@
|
|
|
105
104
|
color: var(--github-code-text-secondary);
|
|
106
105
|
}
|
|
107
106
|
|
|
108
|
-
/* Copy button */
|
|
109
|
-
.github-code-copy {
|
|
110
|
-
display: flex;
|
|
111
|
-
align-items: center;
|
|
112
|
-
justify-content: center;
|
|
113
|
-
padding: 6px;
|
|
114
|
-
background: transparent;
|
|
115
|
-
border: none;
|
|
116
|
-
border-radius: 6px;
|
|
117
|
-
cursor: pointer;
|
|
118
|
-
color: var(--github-code-text-secondary);
|
|
119
|
-
transition: all 0.2s ease;
|
|
120
|
-
flex-shrink: 0;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.github-code-copy:hover {
|
|
124
|
-
background: rgba(128, 128, 128, 0.2);
|
|
125
|
-
color: var(--github-code-text);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.github-code-copy.copied {
|
|
129
|
-
color: var(--github-code-copy-hover);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.github-code-copy svg {
|
|
133
|
-
flex-shrink: 0;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
107
|
/* Code content */
|
|
137
108
|
.github-code-content {
|
|
138
109
|
overflow-x: auto;
|
|
@@ -195,171 +166,6 @@
|
|
|
195
166
|
}
|
|
196
167
|
}
|
|
197
168
|
|
|
198
|
-
/* Syntax highlighting tokens (GitHub-inspired) - Dark theme */
|
|
199
|
-
.github-code-content .token.comment,
|
|
200
|
-
.github-code-content .token.prolog,
|
|
201
|
-
.github-code-content .token.doctype,
|
|
202
|
-
.github-code-content .token.cdata {
|
|
203
|
-
color: #8b949e;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.github-code-content .token.punctuation {
|
|
207
|
-
color: #c9d1d9;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.github-code-content .token.property,
|
|
211
|
-
.github-code-content .token.tag,
|
|
212
|
-
.github-code-content .token.boolean,
|
|
213
|
-
.github-code-content .token.number,
|
|
214
|
-
.github-code-content .token.constant,
|
|
215
|
-
.github-code-content .token.symbol,
|
|
216
|
-
.github-code-content .token.deleted {
|
|
217
|
-
color: #79c0ff;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.github-code-content .token.selector,
|
|
221
|
-
.github-code-content .token.attr-name,
|
|
222
|
-
.github-code-content .token.string,
|
|
223
|
-
.github-code-content .token.char,
|
|
224
|
-
.github-code-content .token.builtin,
|
|
225
|
-
.github-code-content .token.inserted {
|
|
226
|
-
color: #a5d6ff;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
.github-code-content .token.operator,
|
|
230
|
-
.github-code-content .token.entity,
|
|
231
|
-
.github-code-content .token.url,
|
|
232
|
-
.github-code-content .language-css .token.string,
|
|
233
|
-
.github-code-content .style .token.string {
|
|
234
|
-
color: #d2a8ff;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.github-code-content .token.atrule,
|
|
238
|
-
.github-code-content .token.attr-value,
|
|
239
|
-
.github-code-content .token.keyword {
|
|
240
|
-
color: #ff7b72;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.github-code-content .token.function,
|
|
244
|
-
.github-code-content .token.class-name {
|
|
245
|
-
color: #d2a8ff;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.github-code-content .token.regex,
|
|
249
|
-
.github-code-content .token.important,
|
|
250
|
-
.github-code-content .token.variable {
|
|
251
|
-
color: #ffa657;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
/* Syntax highlighting - Light theme */
|
|
255
|
-
[data-mode="light"] .github-code-content .token.comment,
|
|
256
|
-
[data-mode="light"] .github-code-content .token.prolog,
|
|
257
|
-
[data-mode="light"] .github-code-content .token.doctype,
|
|
258
|
-
[data-mode="light"] .github-code-content .token.cdata,
|
|
259
|
-
.light .github-code-content .token.comment,
|
|
260
|
-
.light .github-code-content .token.prolog,
|
|
261
|
-
.light .github-code-content .token.doctype,
|
|
262
|
-
.light .github-code-content .token.cdata,
|
|
263
|
-
[data-theme="light"] .github-code-content .token.comment,
|
|
264
|
-
[data-theme="light"] .github-code-content .token.prolog,
|
|
265
|
-
[data-theme="light"] .github-code-content .token.doctype,
|
|
266
|
-
[data-theme="light"] .github-code-content .token.cdata {
|
|
267
|
-
color: #6e7781;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
[data-mode="light"] .github-code-content .token.punctuation,
|
|
271
|
-
.light .github-code-content .token.punctuation,
|
|
272
|
-
[data-theme="light"] .github-code-content .token.punctuation {
|
|
273
|
-
color: #24292f;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
[data-mode="light"] .github-code-content .token.property,
|
|
277
|
-
[data-mode="light"] .github-code-content .token.tag,
|
|
278
|
-
[data-mode="light"] .github-code-content .token.boolean,
|
|
279
|
-
[data-mode="light"] .github-code-content .token.number,
|
|
280
|
-
[data-mode="light"] .github-code-content .token.constant,
|
|
281
|
-
[data-mode="light"] .github-code-content .token.symbol,
|
|
282
|
-
[data-mode="light"] .github-code-content .token.deleted,
|
|
283
|
-
.light .github-code-content .token.property,
|
|
284
|
-
.light .github-code-content .token.tag,
|
|
285
|
-
.light .github-code-content .token.boolean,
|
|
286
|
-
.light .github-code-content .token.number,
|
|
287
|
-
.light .github-code-content .token.constant,
|
|
288
|
-
.light .github-code-content .token.symbol,
|
|
289
|
-
.light .github-code-content .token.deleted,
|
|
290
|
-
[data-theme="light"] .github-code-content .token.property,
|
|
291
|
-
[data-theme="light"] .github-code-content .token.tag,
|
|
292
|
-
[data-theme="light"] .github-code-content .token.boolean,
|
|
293
|
-
[data-theme="light"] .github-code-content .token.number,
|
|
294
|
-
[data-theme="light"] .github-code-content .token.constant,
|
|
295
|
-
[data-theme="light"] .github-code-content .token.symbol,
|
|
296
|
-
[data-theme="light"] .github-code-content .token.deleted {
|
|
297
|
-
color: #0550ae;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
[data-mode="light"] .github-code-content .token.selector,
|
|
301
|
-
[data-mode="light"] .github-code-content .token.attr-name,
|
|
302
|
-
[data-mode="light"] .github-code-content .token.string,
|
|
303
|
-
[data-mode="light"] .github-code-content .token.char,
|
|
304
|
-
[data-mode="light"] .github-code-content .token.builtin,
|
|
305
|
-
[data-mode="light"] .github-code-content .token.inserted,
|
|
306
|
-
.light .github-code-content .token.selector,
|
|
307
|
-
.light .github-code-content .token.attr-name,
|
|
308
|
-
.light .github-code-content .token.string,
|
|
309
|
-
.light .github-code-content .token.char,
|
|
310
|
-
.light .github-code-content .token.builtin,
|
|
311
|
-
.light .github-code-content .token.inserted,
|
|
312
|
-
[data-theme="light"] .github-code-content .token.selector,
|
|
313
|
-
[data-theme="light"] .github-code-content .token.attr-name,
|
|
314
|
-
[data-theme="light"] .github-code-content .token.string,
|
|
315
|
-
[data-theme="light"] .github-code-content .token.char,
|
|
316
|
-
[data-theme="light"] .github-code-content .token.builtin,
|
|
317
|
-
[data-theme="light"] .github-code-content .token.inserted {
|
|
318
|
-
color: #0a3069;
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
[data-mode="light"] .github-code-content .token.atrule,
|
|
322
|
-
[data-mode="light"] .github-code-content .token.attr-value,
|
|
323
|
-
[data-mode="light"] .github-code-content .token.keyword,
|
|
324
|
-
.light .github-code-content .token.atrule,
|
|
325
|
-
.light .github-code-content .token.attr-value,
|
|
326
|
-
.light .github-code-content .token.keyword,
|
|
327
|
-
[data-theme="light"] .github-code-content .token.atrule,
|
|
328
|
-
[data-theme="light"] .github-code-content .token.attr-value,
|
|
329
|
-
[data-theme="light"] .github-code-content .token.keyword {
|
|
330
|
-
color: #cf222e;
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
[data-mode="light"] .github-code-content .token.function,
|
|
334
|
-
[data-mode="light"] .github-code-content .token.class-name,
|
|
335
|
-
[data-mode="light"] .github-code-content .token.operator,
|
|
336
|
-
[data-mode="light"] .github-code-content .token.entity,
|
|
337
|
-
[data-mode="light"] .github-code-content .token.url,
|
|
338
|
-
.light .github-code-content .token.function,
|
|
339
|
-
.light .github-code-content .token.class-name,
|
|
340
|
-
.light .github-code-content .token.operator,
|
|
341
|
-
.light .github-code-content .token.entity,
|
|
342
|
-
.light .github-code-content .token.url,
|
|
343
|
-
[data-theme="light"] .github-code-content .token.function,
|
|
344
|
-
[data-theme="light"] .github-code-content .token.class-name,
|
|
345
|
-
[data-theme="light"] .github-code-content .token.operator,
|
|
346
|
-
[data-theme="light"] .github-code-content .token.entity,
|
|
347
|
-
[data-theme="light"] .github-code-content .token.url {
|
|
348
|
-
color: #8250df;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
[data-mode="light"] .github-code-content .token.regex,
|
|
352
|
-
[data-mode="light"] .github-code-content .token.important,
|
|
353
|
-
[data-mode="light"] .github-code-content .token.variable,
|
|
354
|
-
.light .github-code-content .token.regex,
|
|
355
|
-
.light .github-code-content .token.important,
|
|
356
|
-
.light .github-code-content .token.variable,
|
|
357
|
-
[data-theme="light"] .github-code-content .token.regex,
|
|
358
|
-
[data-theme="light"] .github-code-content .token.important,
|
|
359
|
-
[data-theme="light"] .github-code-content .token.variable {
|
|
360
|
-
color: #953800;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
169
|
/* Responsive */
|
|
364
170
|
@media (max-width: 520px) {
|
|
365
171
|
.github-code-header {
|
|
@@ -375,4 +181,3 @@
|
|
|
375
181
|
font-size: 12px;
|
|
376
182
|
}
|
|
377
183
|
}
|
|
378
|
-
|
data/demo.html
CHANGED
|
@@ -437,7 +437,7 @@
|
|
|
437
437
|
</svg>
|
|
438
438
|
<a href="https://github.com/r0x0d/toolbox-dev/blob/main/toolbox/environment/fedora-packaging.Containerfile" target="_blank" rel="noopener noreferrer">fedora-packaging.Containerfile</a>
|
|
439
439
|
</span>
|
|
440
|
-
<button class="github-code-copy"
|
|
440
|
+
<button class="github-code-copy" type="button" title="Copy code">
|
|
441
441
|
<svg viewBox="0 0 16 16" width="16" height="16">
|
|
442
442
|
<path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
|
|
443
443
|
<path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
|
|
@@ -483,7 +483,7 @@
|
|
|
483
483
|
</svg>
|
|
484
484
|
<a href="https://github.com/r0x0d/toolbox-dev/blob/main/toolbox/environment/fedora-packaging.Containerfile#L5-L15" target="_blank" rel="noopener noreferrer">fedora-packaging.Containerfile (L5-L15)</a>
|
|
485
485
|
</span>
|
|
486
|
-
<button class="github-code-copy"
|
|
486
|
+
<button class="github-code-copy" type="button" title="Copy code">
|
|
487
487
|
<svg viewBox="0 0 16 16" width="16" height="16">
|
|
488
488
|
<path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
|
|
489
489
|
<path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
|
|
@@ -520,7 +520,7 @@
|
|
|
520
520
|
</svg>
|
|
521
521
|
<a href="https://github.com/octocat/Hello-World/blob/master/app.py" target="_blank" rel="noopener noreferrer">app.py</a>
|
|
522
522
|
</span>
|
|
523
|
-
<button class="github-code-copy"
|
|
523
|
+
<button class="github-code-copy" type="button" title="Copy code">
|
|
524
524
|
<svg viewBox="0 0 16 16" width="16" height="16">
|
|
525
525
|
<path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
|
|
526
526
|
<path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
|
|
@@ -575,9 +575,17 @@
|
|
|
575
575
|
html.setAttribute('data-mode', currentMode === 'dark' ? 'light' : 'dark');
|
|
576
576
|
}
|
|
577
577
|
|
|
578
|
-
|
|
578
|
+
// Event delegation for copy buttons
|
|
579
|
+
document.addEventListener('click', function(event) {
|
|
580
|
+
const button = event.target.closest('.github-code-copy');
|
|
581
|
+
if (!button) return;
|
|
582
|
+
|
|
579
583
|
const codeBlock = button.closest('.github-code-block');
|
|
584
|
+
if (!codeBlock) return;
|
|
585
|
+
|
|
580
586
|
const codeElement = codeBlock.querySelector('code');
|
|
587
|
+
if (!codeElement) return;
|
|
588
|
+
|
|
581
589
|
const text = codeElement.textContent;
|
|
582
590
|
|
|
583
591
|
navigator.clipboard.writeText(text).then(() => {
|
|
@@ -600,7 +608,7 @@
|
|
|
600
608
|
}).catch(err => {
|
|
601
609
|
console.error('Failed to copy code:', err);
|
|
602
610
|
});
|
|
603
|
-
}
|
|
611
|
+
});
|
|
604
612
|
</script>
|
|
605
613
|
</body>
|
|
606
614
|
</html>
|
data/jekyll-github-code.gemspec
CHANGED
|
@@ -50,6 +50,7 @@ Gem::Specification.new do |spec|
|
|
|
50
50
|
# Runtime dependencies
|
|
51
51
|
spec.add_dependency 'jekyll', '>= 3.7', '< 5.0'
|
|
52
52
|
spec.add_dependency 'liquid', '>= 4.0'
|
|
53
|
+
spec.add_dependency 'rouge', '>= 3.0'
|
|
53
54
|
|
|
54
55
|
# Development dependencies
|
|
55
56
|
spec.add_development_dependency 'minitest', '~> 5.20'
|
|
@@ -1,23 +1,12 @@
|
|
|
1
1
|
# frozen_string_literal: true
|
|
2
2
|
|
|
3
3
|
require 'cgi'
|
|
4
|
+
require 'rouge'
|
|
4
5
|
|
|
5
6
|
module Jekyll
|
|
6
7
|
module GitHubCode
|
|
7
|
-
# Renders the code block with syntax highlighting
|
|
8
|
+
# Renders the code block with syntax highlighting using Rouge
|
|
8
9
|
class CodeRenderer
|
|
9
|
-
LANGUAGE_MAP = {
|
|
10
|
-
'rb' => 'ruby',
|
|
11
|
-
'py' => 'python',
|
|
12
|
-
'js' => 'javascript',
|
|
13
|
-
'ts' => 'typescript',
|
|
14
|
-
'yml' => 'yaml',
|
|
15
|
-
'md' => 'markdown',
|
|
16
|
-
'sh' => 'bash',
|
|
17
|
-
'dockerfile' => 'dockerfile',
|
|
18
|
-
'containerfile' => 'dockerfile'
|
|
19
|
-
}.freeze
|
|
20
|
-
|
|
21
10
|
def initialize(reference, code, options = {})
|
|
22
11
|
@reference = reference
|
|
23
12
|
@code = code
|
|
@@ -26,8 +15,7 @@ module Jekyll
|
|
|
26
15
|
|
|
27
16
|
def render
|
|
28
17
|
processed_code = process_line_range(@code)
|
|
29
|
-
|
|
30
|
-
language = detect_language
|
|
18
|
+
highlighted_code = highlight_code(processed_code)
|
|
31
19
|
|
|
32
20
|
<<~HTML
|
|
33
21
|
<div class="github-code-block">
|
|
@@ -38,15 +26,9 @@ module Jekyll
|
|
|
38
26
|
</svg>
|
|
39
27
|
<a href="#{@reference.github_url}" target="_blank" rel="noopener noreferrer">#{@reference.filename}#{line_range_label}</a>
|
|
40
28
|
</span>
|
|
41
|
-
<button class="github-code-copy" onclick="copyGitHubCode(this)" title="Copy code">
|
|
42
|
-
<svg viewBox="0 0 16 16" width="16" height="16">
|
|
43
|
-
<path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
|
|
44
|
-
<path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
|
|
45
|
-
</svg>
|
|
46
|
-
</button>
|
|
47
29
|
</div>
|
|
48
|
-
<div class="github-code-content">
|
|
49
|
-
<pre><code
|
|
30
|
+
<div class="github-code-content highlight">
|
|
31
|
+
<pre><code>#{highlighted_code}</code></pre>
|
|
50
32
|
</div>
|
|
51
33
|
</div>
|
|
52
34
|
HTML
|
|
@@ -68,9 +50,33 @@ module Jekyll
|
|
|
68
50
|
lines[start_idx..end_idx].join
|
|
69
51
|
end
|
|
70
52
|
|
|
71
|
-
def
|
|
53
|
+
def highlight_code(code)
|
|
54
|
+
lexer = find_lexer
|
|
55
|
+
formatter = Rouge::Formatters::HTML.new
|
|
56
|
+
formatter.format(lexer.lex(code))
|
|
57
|
+
rescue StandardError
|
|
58
|
+
# Fallback to plain text if highlighting fails
|
|
59
|
+
CGI.escapeHTML(code)
|
|
60
|
+
end
|
|
61
|
+
|
|
62
|
+
def find_lexer
|
|
63
|
+
filename = @reference.filename
|
|
64
|
+
|
|
65
|
+
# Try to find lexer by filename (Rouge is smart about this)
|
|
66
|
+
lexer = Rouge::Lexer.find_fancy(filename)
|
|
67
|
+
return lexer if lexer
|
|
68
|
+
|
|
69
|
+
# Try by extension
|
|
72
70
|
ext = @reference.extension.downcase
|
|
73
|
-
|
|
71
|
+
lexer = Rouge::Lexer.find_fancy(ext)
|
|
72
|
+
return lexer if lexer
|
|
73
|
+
|
|
74
|
+
# Try guessing from the source content
|
|
75
|
+
lexer = Rouge::Lexer.guess(filename: filename, source: @code)
|
|
76
|
+
return lexer if lexer
|
|
77
|
+
|
|
78
|
+
# Fallback to plain text
|
|
79
|
+
Rouge::Lexers::PlainText.new
|
|
74
80
|
end
|
|
75
81
|
|
|
76
82
|
def line_range_label
|
|
@@ -85,4 +91,3 @@ module Jekyll
|
|
|
85
91
|
end
|
|
86
92
|
end
|
|
87
93
|
end
|
|
88
|
-
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# frozen_string_literal: true
|
|
2
2
|
|
|
3
3
|
module Jekyll
|
|
4
|
-
module
|
|
5
|
-
class
|
|
4
|
+
module GithubCode
|
|
5
|
+
class CodeStyleGenerator < Jekyll::Generator
|
|
6
6
|
safe true
|
|
7
7
|
priority :low
|
|
8
8
|
|
|
@@ -10,23 +10,11 @@ module Jekyll
|
|
|
10
10
|
content = File.read(File.join(File.dirname(__FILE__), "..", "..", "assets", "css", "github-code.css"))
|
|
11
11
|
|
|
12
12
|
# Create a static file for the CSS
|
|
13
|
-
site.static_files <<
|
|
13
|
+
site.static_files << CodeStyleFile.new(site, content)
|
|
14
14
|
end
|
|
15
15
|
end
|
|
16
16
|
|
|
17
|
-
class
|
|
18
|
-
safe true
|
|
19
|
-
priority :low
|
|
20
|
-
|
|
21
|
-
def generate(site)
|
|
22
|
-
content = File.read(File.join(File.dirname(__FILE__), "..", "..", "assets", "js", "github-code.js"))
|
|
23
|
-
|
|
24
|
-
# Create a static file for the CSS
|
|
25
|
-
site.static_files << JavaScriptFile.new(site, content)
|
|
26
|
-
end
|
|
27
|
-
end
|
|
28
|
-
|
|
29
|
-
class StyleFile < Jekyll::StaticFile
|
|
17
|
+
class CodeStyleFile < Jekyll::StaticFile
|
|
30
18
|
def initialize(site, content)
|
|
31
19
|
@site = site
|
|
32
20
|
@content = content
|
|
@@ -51,31 +39,5 @@ module Jekyll
|
|
|
51
39
|
@relative_path
|
|
52
40
|
end
|
|
53
41
|
end
|
|
54
|
-
|
|
55
|
-
class JavaScriptFile < Jekyll::StaticFile
|
|
56
|
-
def initialize(site, content)
|
|
57
|
-
@site = site
|
|
58
|
-
@content = content
|
|
59
|
-
@relative_path = "/assets/js/github-code.js"
|
|
60
|
-
@extname = ".js"
|
|
61
|
-
@name = "github-code.js"
|
|
62
|
-
@dir = "/assets/js"
|
|
63
|
-
end
|
|
64
|
-
|
|
65
|
-
def write(dest)
|
|
66
|
-
dest_path = File.join(dest, @relative_path)
|
|
67
|
-
FileUtils.mkdir_p(File.dirname(dest_path))
|
|
68
|
-
File.write(dest_path, @content)
|
|
69
|
-
true
|
|
70
|
-
end
|
|
71
|
-
|
|
72
|
-
def path
|
|
73
|
-
@relative_path
|
|
74
|
-
end
|
|
75
|
-
|
|
76
|
-
def relative_path
|
|
77
|
-
@relative_path
|
|
78
|
-
end
|
|
79
|
-
end
|
|
80
42
|
end
|
|
81
43
|
end
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-github-code
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Rodolfo Olivieri
|
|
@@ -44,6 +44,20 @@ dependencies:
|
|
|
44
44
|
- - ">="
|
|
45
45
|
- !ruby/object:Gem::Version
|
|
46
46
|
version: '4.0'
|
|
47
|
+
- !ruby/object:Gem::Dependency
|
|
48
|
+
name: rouge
|
|
49
|
+
requirement: !ruby/object:Gem::Requirement
|
|
50
|
+
requirements:
|
|
51
|
+
- - ">="
|
|
52
|
+
- !ruby/object:Gem::Version
|
|
53
|
+
version: '3.0'
|
|
54
|
+
type: :runtime
|
|
55
|
+
prerelease: false
|
|
56
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
57
|
+
requirements:
|
|
58
|
+
- - ">="
|
|
59
|
+
- !ruby/object:Gem::Version
|
|
60
|
+
version: '3.0'
|
|
47
61
|
- !ruby/object:Gem::Dependency
|
|
48
62
|
name: minitest
|
|
49
63
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -116,7 +130,6 @@ files:
|
|
|
116
130
|
- README.md
|
|
117
131
|
- Rakefile
|
|
118
132
|
- assets/css/github-code.css
|
|
119
|
-
- assets/js/github-code.js
|
|
120
133
|
- demo.html
|
|
121
134
|
- jekyll-github-code.gemspec
|
|
122
135
|
- lib/jekyll-github-code.rb
|
data/assets/js/github-code.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* GitHub Code Block - Copy functionality
|
|
3
|
-
*/
|
|
4
|
-
function copyGitHubCode(button) {
|
|
5
|
-
const codeBlock = button.closest('.github-code-block');
|
|
6
|
-
const codeElement = codeBlock.querySelector('code');
|
|
7
|
-
const text = codeElement.textContent;
|
|
8
|
-
|
|
9
|
-
navigator.clipboard.writeText(text).then(() => {
|
|
10
|
-
button.classList.add('copied');
|
|
11
|
-
button.innerHTML = `
|
|
12
|
-
<svg viewBox="0 0 16 16" width="16" height="16">
|
|
13
|
-
<path fill="currentColor" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
|
|
14
|
-
</svg>
|
|
15
|
-
`;
|
|
16
|
-
|
|
17
|
-
setTimeout(() => {
|
|
18
|
-
button.classList.remove('copied');
|
|
19
|
-
button.innerHTML = `
|
|
20
|
-
<svg viewBox="0 0 16 16" width="16" height="16">
|
|
21
|
-
<path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
|
|
22
|
-
<path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
|
|
23
|
-
</svg>
|
|
24
|
-
`;
|
|
25
|
-
}, 2000);
|
|
26
|
-
}).catch(err => {
|
|
27
|
-
console.error('Failed to copy code:', err);
|
|
28
|
-
});
|
|
29
|
-
}
|