jupyterlab_github_markdown_alerts_extension 1.0.17 → 1.0.21
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 +3 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +24 -126
- package/lib/utils.d.ts +24 -0
- package/lib/utils.js +120 -0
- package/package.json +1 -1
- package/src/__tests__/jupyterlab_github_markdown_alerts_extension.spec.ts +229 -4
- package/src/index.ts +27 -182
- package/src/utils.ts +179 -0
- package/style/base.css +10 -10
package/README.md
CHANGED
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
[](https://pepy.tech/project/jupyterlab-github-markdown-alerts-extension)
|
|
7
7
|
[](https://jupyterlab.readthedocs.io/en/stable/)
|
|
8
8
|
|
|
9
|
+
> [!TIP]
|
|
10
|
+
> This extension is part of the [stellars_jupyterlab_extensions](https://github.com/stellarshenson/stellars_jupyterlab_extensions) metapackage. Install all Stellars extensions at once: `pip install stellars_jupyterlab_extensions`
|
|
11
|
+
|
|
9
12
|
A JupyterLab 4 extension that renders GitHub-style alert blocks in Markdown cells, providing visual emphasis for notes, tips, warnings, and other important information.
|
|
10
13
|
|
|
11
14
|
This extension brings GitHub's alert syntax to JupyterLab, allowing you to create styled callout blocks using simple markdown notation. Alerts automatically adapt to light and dark themes, matching GitHub's visual design.
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,125 +1,9 @@
|
|
|
1
1
|
import { IMarkdownParser } from '@jupyterlab/rendermime';
|
|
2
2
|
import { ISettingRegistry } from '@jupyterlab/settingregistry';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
iconClass: 'octicon-info',
|
|
8
|
-
iconColor: '#0969da',
|
|
9
|
-
iconColorDark: '#2f81f7',
|
|
10
|
-
iconPath: 'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
11
|
-
},
|
|
12
|
-
TIP: {
|
|
13
|
-
className: 'markdown-alert-tip',
|
|
14
|
-
title: 'Tip',
|
|
15
|
-
iconClass: 'octicon-light-bulb',
|
|
16
|
-
iconColor: '#1a7f37',
|
|
17
|
-
iconColorDark: '#3fb950',
|
|
18
|
-
iconPath: 'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
|
|
19
|
-
},
|
|
20
|
-
IMPORTANT: {
|
|
21
|
-
className: 'markdown-alert-important',
|
|
22
|
-
title: 'Important',
|
|
23
|
-
iconClass: 'octicon-report',
|
|
24
|
-
iconColor: '#8250df',
|
|
25
|
-
iconColorDark: '#a371f7',
|
|
26
|
-
iconPath: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
27
|
-
},
|
|
28
|
-
WARNING: {
|
|
29
|
-
className: 'markdown-alert-warning',
|
|
30
|
-
title: 'Warning',
|
|
31
|
-
iconClass: 'octicon-alert',
|
|
32
|
-
iconColor: '#9a6700',
|
|
33
|
-
iconColorDark: '#d29922',
|
|
34
|
-
iconPath: 'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
35
|
-
},
|
|
36
|
-
CAUTION: {
|
|
37
|
-
className: 'markdown-alert-caution',
|
|
38
|
-
title: 'Caution',
|
|
39
|
-
iconClass: 'octicon-stop',
|
|
40
|
-
iconColor: '#cf222e',
|
|
41
|
-
iconColorDark: '#f85149',
|
|
42
|
-
iconPath: 'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
/**
|
|
46
|
-
* Create SVG icon element as data URI with both light and dark theme versions
|
|
47
|
-
*/
|
|
48
|
-
function createIcon(iconPath, iconClass, iconColor, iconColorDark) {
|
|
49
|
-
// Create light theme icon
|
|
50
|
-
const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
|
|
51
|
-
const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
|
|
52
|
-
// Create dark theme icon
|
|
53
|
-
const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
|
|
54
|
-
const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
|
|
55
|
-
return (`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
|
|
56
|
-
`<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`);
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Process markdown text to convert GitHub-style alerts
|
|
60
|
-
*/
|
|
61
|
-
function processAlerts(text) {
|
|
62
|
-
const lines = text.split('\n');
|
|
63
|
-
const result = [];
|
|
64
|
-
let i = 0;
|
|
65
|
-
let inCodeBlock = false;
|
|
66
|
-
while (i < lines.length) {
|
|
67
|
-
const line = lines[i];
|
|
68
|
-
// Track code blocks (both ``` and ~~~)
|
|
69
|
-
if (line.trim().match(/^```|^~~~/)) {
|
|
70
|
-
inCodeBlock = !inCodeBlock;
|
|
71
|
-
result.push(line);
|
|
72
|
-
i++;
|
|
73
|
-
continue;
|
|
74
|
-
}
|
|
75
|
-
// Skip alert processing inside code blocks
|
|
76
|
-
if (inCodeBlock) {
|
|
77
|
-
result.push(line);
|
|
78
|
-
i++;
|
|
79
|
-
continue;
|
|
80
|
-
}
|
|
81
|
-
const alertMatch = line.match(/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/);
|
|
82
|
-
if (alertMatch) {
|
|
83
|
-
const alertType = alertMatch[1];
|
|
84
|
-
const contentLines = [];
|
|
85
|
-
i++;
|
|
86
|
-
while (i < lines.length && lines[i].startsWith('>')) {
|
|
87
|
-
const content = lines[i].replace(/^>\s?/, '');
|
|
88
|
-
if (content) {
|
|
89
|
-
contentLines.push(content);
|
|
90
|
-
}
|
|
91
|
-
i++;
|
|
92
|
-
}
|
|
93
|
-
if (contentLines.length > 0) {
|
|
94
|
-
const content = contentLines.join('\n\n');
|
|
95
|
-
// Use HTML comments as markers that will survive markdown processing
|
|
96
|
-
result.push(`<!--ALERT_START:${alertType}-->`, content, `<!--ALERT_END:${alertType}-->`);
|
|
97
|
-
continue;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
result.push(line);
|
|
101
|
-
i++;
|
|
102
|
-
}
|
|
103
|
-
return result.join('\n');
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
107
|
-
*/
|
|
108
|
-
function postProcessAlerts(html, showBackgrounds) {
|
|
109
|
-
// Replace alert markers with proper HTML structure
|
|
110
|
-
const result = html.replace(/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g, (match, alertType, content) => {
|
|
111
|
-
const config = ALERT_TYPES[alertType];
|
|
112
|
-
const icon = createIcon(config.iconPath, config.iconClass, config.iconColor, config.iconColorDark);
|
|
113
|
-
const backgroundClass = showBackgrounds
|
|
114
|
-
? ' markdown-alert-with-backgrounds'
|
|
115
|
-
: '';
|
|
116
|
-
return (`<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
|
|
117
|
-
`<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
|
|
118
|
-
content +
|
|
119
|
-
'</div>');
|
|
120
|
-
});
|
|
121
|
-
return result;
|
|
122
|
-
}
|
|
3
|
+
// Import utility functions from separate module (allows testing without JupyterLab deps)
|
|
4
|
+
import { processAlerts, postProcessAlerts } from './utils';
|
|
5
|
+
// Re-export for backwards compatibility
|
|
6
|
+
export { processAlerts, postProcessAlerts } from './utils';
|
|
123
7
|
/**
|
|
124
8
|
* Initialization data for the jupyterlab_github_markdown_alerts_extension extension.
|
|
125
9
|
*/
|
|
@@ -150,12 +34,26 @@ const plugin = {
|
|
|
150
34
|
};
|
|
151
35
|
loadSettings();
|
|
152
36
|
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
const
|
|
157
|
-
|
|
158
|
-
|
|
37
|
+
// Idempotent: never re-wrap on re-activation, otherwise originalRender
|
|
38
|
+
// would capture an already-wrapped function
|
|
39
|
+
if (!markdownParser.render.__alertsWrapped) {
|
|
40
|
+
const originalRender = markdownParser.render.bind(markdownParser);
|
|
41
|
+
const wrappedRender = async (content) => {
|
|
42
|
+
try {
|
|
43
|
+
const processedContent = processAlerts(content);
|
|
44
|
+
const renderedHtml = await originalRender(processedContent);
|
|
45
|
+
return postProcessAlerts(renderedHtml, showBackgrounds);
|
|
46
|
+
}
|
|
47
|
+
catch (reason) {
|
|
48
|
+
// Degrade to plain Markdown instead of rejecting render, which
|
|
49
|
+
// would push rendermime into an un-highlighted fallback
|
|
50
|
+
console.error('jupyterlab_github_markdown_alerts_extension: render failed, falling back to plain markdown', reason);
|
|
51
|
+
return originalRender(content);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
wrappedRender.__alertsWrapped = true;
|
|
55
|
+
markdownParser.render = wrappedRender;
|
|
56
|
+
}
|
|
159
57
|
console.log('JupyterLab extension jupyterlab_github_markdown_alerts_extension is activated!');
|
|
160
58
|
}
|
|
161
59
|
};
|
package/lib/utils.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Alert type configuration
|
|
3
|
+
*/
|
|
4
|
+
export interface IAlertConfig {
|
|
5
|
+
className: string;
|
|
6
|
+
title: string;
|
|
7
|
+
iconPath: string;
|
|
8
|
+
iconClass: string;
|
|
9
|
+
iconColor: string;
|
|
10
|
+
iconColorDark: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const ALERT_TYPES: Record<string, IAlertConfig>;
|
|
13
|
+
/**
|
|
14
|
+
* Create SVG icon element as data URI with both light and dark theme versions
|
|
15
|
+
*/
|
|
16
|
+
export declare function createIcon(iconPath: string, iconClass: string, iconColor: string, iconColorDark: string): string;
|
|
17
|
+
/**
|
|
18
|
+
* Process markdown text to convert GitHub-style alerts
|
|
19
|
+
*/
|
|
20
|
+
export declare function processAlerts(text: string): string;
|
|
21
|
+
/**
|
|
22
|
+
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
23
|
+
*/
|
|
24
|
+
export declare function postProcessAlerts(html: string, showBackgrounds: boolean): string;
|
package/lib/utils.js
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
export const ALERT_TYPES = {
|
|
2
|
+
NOTE: {
|
|
3
|
+
className: 'markdown-alert-note',
|
|
4
|
+
title: 'Note',
|
|
5
|
+
iconClass: 'octicon-info',
|
|
6
|
+
iconColor: '#0969da',
|
|
7
|
+
iconColorDark: '#2f81f7',
|
|
8
|
+
iconPath: 'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
9
|
+
},
|
|
10
|
+
TIP: {
|
|
11
|
+
className: 'markdown-alert-tip',
|
|
12
|
+
title: 'Tip',
|
|
13
|
+
iconClass: 'octicon-light-bulb',
|
|
14
|
+
iconColor: '#1a7f37',
|
|
15
|
+
iconColorDark: '#3fb950',
|
|
16
|
+
iconPath: 'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
|
|
17
|
+
},
|
|
18
|
+
IMPORTANT: {
|
|
19
|
+
className: 'markdown-alert-important',
|
|
20
|
+
title: 'Important',
|
|
21
|
+
iconClass: 'octicon-report',
|
|
22
|
+
iconColor: '#8250df',
|
|
23
|
+
iconColorDark: '#a371f7',
|
|
24
|
+
iconPath: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
25
|
+
},
|
|
26
|
+
WARNING: {
|
|
27
|
+
className: 'markdown-alert-warning',
|
|
28
|
+
title: 'Warning',
|
|
29
|
+
iconClass: 'octicon-alert',
|
|
30
|
+
iconColor: '#9a6700',
|
|
31
|
+
iconColorDark: '#d29922',
|
|
32
|
+
iconPath: 'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
33
|
+
},
|
|
34
|
+
CAUTION: {
|
|
35
|
+
className: 'markdown-alert-caution',
|
|
36
|
+
title: 'Caution',
|
|
37
|
+
iconClass: 'octicon-stop',
|
|
38
|
+
iconColor: '#cf222e',
|
|
39
|
+
iconColorDark: '#f85149',
|
|
40
|
+
iconPath: 'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Create SVG icon element as data URI with both light and dark theme versions
|
|
45
|
+
*/
|
|
46
|
+
export function createIcon(iconPath, iconClass, iconColor, iconColorDark) {
|
|
47
|
+
// Create light theme icon
|
|
48
|
+
const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
|
|
49
|
+
const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
|
|
50
|
+
// Create dark theme icon
|
|
51
|
+
const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
|
|
52
|
+
const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
|
|
53
|
+
return (`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
|
|
54
|
+
`<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`);
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Process markdown text to convert GitHub-style alerts
|
|
58
|
+
*/
|
|
59
|
+
export function processAlerts(text) {
|
|
60
|
+
const lines = text.split('\n');
|
|
61
|
+
const result = [];
|
|
62
|
+
let i = 0;
|
|
63
|
+
let inCodeBlock = false;
|
|
64
|
+
while (i < lines.length) {
|
|
65
|
+
const line = lines[i];
|
|
66
|
+
// Track code blocks (both ``` and ~~~)
|
|
67
|
+
if (line.trim().match(/^```|^~~~/)) {
|
|
68
|
+
inCodeBlock = !inCodeBlock;
|
|
69
|
+
result.push(line);
|
|
70
|
+
i++;
|
|
71
|
+
continue;
|
|
72
|
+
}
|
|
73
|
+
// Skip alert processing inside code blocks
|
|
74
|
+
if (inCodeBlock) {
|
|
75
|
+
result.push(line);
|
|
76
|
+
i++;
|
|
77
|
+
continue;
|
|
78
|
+
}
|
|
79
|
+
const alertMatch = line.match(/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/);
|
|
80
|
+
if (alertMatch) {
|
|
81
|
+
const alertType = alertMatch[1];
|
|
82
|
+
const contentLines = [];
|
|
83
|
+
i++;
|
|
84
|
+
while (i < lines.length && lines[i].startsWith('>')) {
|
|
85
|
+
const content = lines[i].replace(/^>\s?/, '');
|
|
86
|
+
contentLines.push(content); // Keep empty lines for paragraph separation
|
|
87
|
+
i++;
|
|
88
|
+
}
|
|
89
|
+
if (contentLines.length > 0) {
|
|
90
|
+
// Use single newlines to preserve table structure
|
|
91
|
+
// Empty lines in contentLines will still create paragraph breaks
|
|
92
|
+
const content = contentLines.join('\n');
|
|
93
|
+
// Use HTML comments as markers that will survive markdown processing
|
|
94
|
+
result.push(`<!--ALERT_START:${alertType}-->`, content, `<!--ALERT_END:${alertType}-->`);
|
|
95
|
+
continue;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
result.push(line);
|
|
99
|
+
i++;
|
|
100
|
+
}
|
|
101
|
+
return result.join('\n');
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
105
|
+
*/
|
|
106
|
+
export function postProcessAlerts(html, showBackgrounds) {
|
|
107
|
+
// Replace alert markers with proper HTML structure
|
|
108
|
+
const result = html.replace(/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g, (match, alertType, content) => {
|
|
109
|
+
const config = ALERT_TYPES[alertType];
|
|
110
|
+
const icon = createIcon(config.iconPath, config.iconClass, config.iconColor, config.iconColorDark);
|
|
111
|
+
const backgroundClass = showBackgrounds
|
|
112
|
+
? ' markdown-alert-with-backgrounds'
|
|
113
|
+
: '';
|
|
114
|
+
return (`<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
|
|
115
|
+
`<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
|
|
116
|
+
content +
|
|
117
|
+
'</div>');
|
|
118
|
+
});
|
|
119
|
+
return result;
|
|
120
|
+
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,234 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Unit tests for GitHub Markdown Alerts Extension
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
import { processAlerts, postProcessAlerts } from '../utils';
|
|
6
|
+
|
|
7
|
+
describe('processAlerts', () => {
|
|
8
|
+
describe('basic alert detection', () => {
|
|
9
|
+
it('should convert NOTE alert syntax', () => {
|
|
10
|
+
const input = `> [!NOTE]
|
|
11
|
+
> This is a note.`;
|
|
12
|
+
const result = processAlerts(input);
|
|
13
|
+
expect(result).toContain('<!--ALERT_START:NOTE-->');
|
|
14
|
+
expect(result).toContain('This is a note.');
|
|
15
|
+
expect(result).toContain('<!--ALERT_END:NOTE-->');
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
it('should convert TIP alert syntax', () => {
|
|
19
|
+
const input = `> [!TIP]
|
|
20
|
+
> This is a tip.`;
|
|
21
|
+
const result = processAlerts(input);
|
|
22
|
+
expect(result).toContain('<!--ALERT_START:TIP-->');
|
|
23
|
+
expect(result).toContain('This is a tip.');
|
|
24
|
+
expect(result).toContain('<!--ALERT_END:TIP-->');
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('should convert IMPORTANT alert syntax', () => {
|
|
28
|
+
const input = `> [!IMPORTANT]
|
|
29
|
+
> This is important.`;
|
|
30
|
+
const result = processAlerts(input);
|
|
31
|
+
expect(result).toContain('<!--ALERT_START:IMPORTANT-->');
|
|
32
|
+
expect(result).toContain('This is important.');
|
|
33
|
+
expect(result).toContain('<!--ALERT_END:IMPORTANT-->');
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
it('should convert WARNING alert syntax', () => {
|
|
37
|
+
const input = `> [!WARNING]
|
|
38
|
+
> This is a warning.`;
|
|
39
|
+
const result = processAlerts(input);
|
|
40
|
+
expect(result).toContain('<!--ALERT_START:WARNING-->');
|
|
41
|
+
expect(result).toContain('This is a warning.');
|
|
42
|
+
expect(result).toContain('<!--ALERT_END:WARNING-->');
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
it('should convert CAUTION alert syntax', () => {
|
|
46
|
+
const input = `> [!CAUTION]
|
|
47
|
+
> This is a caution.`;
|
|
48
|
+
const result = processAlerts(input);
|
|
49
|
+
expect(result).toContain('<!--ALERT_START:CAUTION-->');
|
|
50
|
+
expect(result).toContain('This is a caution.');
|
|
51
|
+
expect(result).toContain('<!--ALERT_END:CAUTION-->');
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
describe('table handling', () => {
|
|
56
|
+
it('should preserve table structure with consecutive rows', () => {
|
|
57
|
+
const input = `> [!NOTE]
|
|
58
|
+
> | Header 1 | Header 2 |
|
|
59
|
+
> |----------|----------|
|
|
60
|
+
> | Cell 1 | Cell 2 |`;
|
|
61
|
+
const result = processAlerts(input);
|
|
62
|
+
// Tables require consecutive lines - single newlines between rows
|
|
63
|
+
expect(result).toContain(
|
|
64
|
+
'| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |'
|
|
65
|
+
);
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
it('should not insert blank lines between table rows', () => {
|
|
69
|
+
const input = `> [!WARNING]
|
|
70
|
+
> | A | B |
|
|
71
|
+
> |---|---|
|
|
72
|
+
> | 1 | 2 |
|
|
73
|
+
> | 3 | 4 |`;
|
|
74
|
+
const result = processAlerts(input);
|
|
75
|
+
// Verify no double newlines between table rows
|
|
76
|
+
expect(result).not.toMatch(/\|[^\n]*\n\n\|/);
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
describe('paragraph separation', () => {
|
|
81
|
+
it('should preserve empty lines for paragraph separation', () => {
|
|
82
|
+
const input = `> [!NOTE]
|
|
83
|
+
> First paragraph.
|
|
84
|
+
>
|
|
85
|
+
> Second paragraph.`;
|
|
86
|
+
const result = processAlerts(input);
|
|
87
|
+
// Empty line in original should create paragraph break
|
|
88
|
+
expect(result).toContain('First paragraph.\n\nSecond paragraph.');
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
it('should handle multiple paragraphs', () => {
|
|
92
|
+
const input = `> [!TIP]
|
|
93
|
+
> Paragraph one.
|
|
94
|
+
>
|
|
95
|
+
> Paragraph two.
|
|
96
|
+
>
|
|
97
|
+
> Paragraph three.`;
|
|
98
|
+
const result = processAlerts(input);
|
|
99
|
+
expect(result).toContain(
|
|
100
|
+
'Paragraph one.\n\nParagraph two.\n\nParagraph three.'
|
|
101
|
+
);
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
describe('list handling', () => {
|
|
106
|
+
it('should preserve bullet list structure', () => {
|
|
107
|
+
const input = `> [!WARNING]
|
|
108
|
+
> - Item one
|
|
109
|
+
> - Item two
|
|
110
|
+
> - Item three`;
|
|
111
|
+
const result = processAlerts(input);
|
|
112
|
+
expect(result).toContain('- Item one\n- Item two\n- Item three');
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
it('should preserve numbered list structure', () => {
|
|
116
|
+
const input = `> [!NOTE]
|
|
117
|
+
> 1. First item
|
|
118
|
+
> 2. Second item
|
|
119
|
+
> 3. Third item`;
|
|
120
|
+
const result = processAlerts(input);
|
|
121
|
+
expect(result).toContain('1. First item\n2. Second item\n3. Third item');
|
|
122
|
+
});
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
describe('code block handling', () => {
|
|
126
|
+
it('should not process alerts inside backtick code blocks', () => {
|
|
127
|
+
const input = `\`\`\`markdown
|
|
128
|
+
> [!NOTE]
|
|
129
|
+
> This is inside a code block.
|
|
130
|
+
\`\`\``;
|
|
131
|
+
const result = processAlerts(input);
|
|
132
|
+
// Should not be converted to alert markers
|
|
133
|
+
expect(result).not.toContain('<!--ALERT_START:NOTE-->');
|
|
134
|
+
expect(result).toContain('> [!NOTE]');
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
it('should not process alerts inside tilde code blocks', () => {
|
|
138
|
+
const input = `~~~markdown
|
|
139
|
+
> [!WARNING]
|
|
140
|
+
> This is inside a code block.
|
|
141
|
+
~~~`;
|
|
142
|
+
const result = processAlerts(input);
|
|
143
|
+
expect(result).not.toContain('<!--ALERT_START:WARNING-->');
|
|
144
|
+
expect(result).toContain('> [!WARNING]');
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
it('should process alerts after code block ends', () => {
|
|
148
|
+
const input = `\`\`\`
|
|
149
|
+
code
|
|
150
|
+
\`\`\`
|
|
151
|
+
|
|
152
|
+
> [!NOTE]
|
|
153
|
+
> This is after the code block.`;
|
|
154
|
+
const result = processAlerts(input);
|
|
155
|
+
expect(result).toContain('<!--ALERT_START:NOTE-->');
|
|
156
|
+
expect(result).toContain('This is after the code block.');
|
|
157
|
+
});
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
describe('edge cases', () => {
|
|
161
|
+
it('should handle alert with no content', () => {
|
|
162
|
+
const input = `> [!NOTE]`;
|
|
163
|
+
const result = processAlerts(input);
|
|
164
|
+
// No content lines, should not create alert
|
|
165
|
+
expect(result).not.toContain('<!--ALERT_START');
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
it('should handle regular blockquotes (not alerts)', () => {
|
|
169
|
+
const input = `> This is a regular blockquote.
|
|
170
|
+
> It should not be converted.`;
|
|
171
|
+
const result = processAlerts(input);
|
|
172
|
+
expect(result).not.toContain('<!--ALERT_START');
|
|
173
|
+
expect(result).toContain('> This is a regular blockquote.');
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
it('should handle multiple alerts in same document', () => {
|
|
177
|
+
const input = `> [!NOTE]
|
|
178
|
+
> First alert.
|
|
179
|
+
|
|
180
|
+
Some text between.
|
|
181
|
+
|
|
182
|
+
> [!WARNING]
|
|
183
|
+
> Second alert.`;
|
|
184
|
+
const result = processAlerts(input);
|
|
185
|
+
expect(result).toContain('<!--ALERT_START:NOTE-->');
|
|
186
|
+
expect(result).toContain('<!--ALERT_END:NOTE-->');
|
|
187
|
+
expect(result).toContain('<!--ALERT_START:WARNING-->');
|
|
188
|
+
expect(result).toContain('<!--ALERT_END:WARNING-->');
|
|
189
|
+
});
|
|
190
|
+
});
|
|
191
|
+
});
|
|
192
|
+
|
|
193
|
+
describe('postProcessAlerts', () => {
|
|
194
|
+
it('should wrap alert markers with styled div', () => {
|
|
195
|
+
const input = '<!--ALERT_START:NOTE-->Content here<!--ALERT_END:NOTE-->';
|
|
196
|
+
const result = postProcessAlerts(input, false);
|
|
197
|
+
expect(result).toContain('class="markdown-alert markdown-alert-note"');
|
|
198
|
+
expect(result).toContain('class="markdown-alert-title"');
|
|
199
|
+
expect(result).toContain('Content here');
|
|
200
|
+
expect(result).toContain('</div>');
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
it('should add background class when showBackgrounds is true', () => {
|
|
204
|
+
const input =
|
|
205
|
+
'<!--ALERT_START:WARNING-->Warning content<!--ALERT_END:WARNING-->';
|
|
206
|
+
const result = postProcessAlerts(input, true);
|
|
207
|
+
expect(result).toContain('markdown-alert-with-backgrounds');
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
it('should not add background class when showBackgrounds is false', () => {
|
|
211
|
+
const input = '<!--ALERT_START:TIP-->Tip content<!--ALERT_END:TIP-->';
|
|
212
|
+
const result = postProcessAlerts(input, false);
|
|
213
|
+
expect(result).not.toContain('markdown-alert-with-backgrounds');
|
|
214
|
+
});
|
|
215
|
+
|
|
216
|
+
it('should include correct title for each alert type', () => {
|
|
217
|
+
const types = ['NOTE', 'TIP', 'IMPORTANT', 'WARNING', 'CAUTION'];
|
|
218
|
+
const titles = ['Note', 'Tip', 'Important', 'Warning', 'Caution'];
|
|
219
|
+
|
|
220
|
+
types.forEach((type, index) => {
|
|
221
|
+
const input = `<!--ALERT_START:${type}-->Content<!--ALERT_END:${type}-->`;
|
|
222
|
+
const result = postProcessAlerts(input, false);
|
|
223
|
+
expect(result).toContain(`>${titles[index]}</p>`);
|
|
224
|
+
});
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
it('should include icon images for light and dark themes', () => {
|
|
228
|
+
const input = '<!--ALERT_START:NOTE-->Content<!--ALERT_END:NOTE-->';
|
|
229
|
+
const result = postProcessAlerts(input, false);
|
|
230
|
+
expect(result).toContain('class="octicon octicon-info octicon-light');
|
|
231
|
+
expect(result).toContain('class="octicon octicon-info octicon-dark');
|
|
232
|
+
expect(result).toContain('data:image/svg+xml;base64');
|
|
8
233
|
});
|
|
9
234
|
});
|
package/src/index.ts
CHANGED
|
@@ -6,182 +6,11 @@ import {
|
|
|
6
6
|
import { IMarkdownParser } from '@jupyterlab/rendermime';
|
|
7
7
|
import { ISettingRegistry } from '@jupyterlab/settingregistry';
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*/
|
|
12
|
-
interface IAlertConfig {
|
|
13
|
-
className: string;
|
|
14
|
-
title: string;
|
|
15
|
-
iconPath: string;
|
|
16
|
-
iconClass: string;
|
|
17
|
-
iconColor: string;
|
|
18
|
-
iconColorDark: string;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const ALERT_TYPES: Record<string, IAlertConfig> = {
|
|
22
|
-
NOTE: {
|
|
23
|
-
className: 'markdown-alert-note',
|
|
24
|
-
title: 'Note',
|
|
25
|
-
iconClass: 'octicon-info',
|
|
26
|
-
iconColor: '#0969da',
|
|
27
|
-
iconColorDark: '#2f81f7',
|
|
28
|
-
iconPath:
|
|
29
|
-
'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
30
|
-
},
|
|
31
|
-
TIP: {
|
|
32
|
-
className: 'markdown-alert-tip',
|
|
33
|
-
title: 'Tip',
|
|
34
|
-
iconClass: 'octicon-light-bulb',
|
|
35
|
-
iconColor: '#1a7f37',
|
|
36
|
-
iconColorDark: '#3fb950',
|
|
37
|
-
iconPath:
|
|
38
|
-
'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
|
|
39
|
-
},
|
|
40
|
-
IMPORTANT: {
|
|
41
|
-
className: 'markdown-alert-important',
|
|
42
|
-
title: 'Important',
|
|
43
|
-
iconClass: 'octicon-report',
|
|
44
|
-
iconColor: '#8250df',
|
|
45
|
-
iconColorDark: '#a371f7',
|
|
46
|
-
iconPath:
|
|
47
|
-
'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
48
|
-
},
|
|
49
|
-
WARNING: {
|
|
50
|
-
className: 'markdown-alert-warning',
|
|
51
|
-
title: 'Warning',
|
|
52
|
-
iconClass: 'octicon-alert',
|
|
53
|
-
iconColor: '#9a6700',
|
|
54
|
-
iconColorDark: '#d29922',
|
|
55
|
-
iconPath:
|
|
56
|
-
'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
57
|
-
},
|
|
58
|
-
CAUTION: {
|
|
59
|
-
className: 'markdown-alert-caution',
|
|
60
|
-
title: 'Caution',
|
|
61
|
-
iconClass: 'octicon-stop',
|
|
62
|
-
iconColor: '#cf222e',
|
|
63
|
-
iconColorDark: '#f85149',
|
|
64
|
-
iconPath:
|
|
65
|
-
'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
66
|
-
}
|
|
67
|
-
};
|
|
9
|
+
// Import utility functions from separate module (allows testing without JupyterLab deps)
|
|
10
|
+
import { processAlerts, postProcessAlerts } from './utils';
|
|
68
11
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
*/
|
|
72
|
-
function createIcon(
|
|
73
|
-
iconPath: string,
|
|
74
|
-
iconClass: string,
|
|
75
|
-
iconColor: string,
|
|
76
|
-
iconColorDark: string
|
|
77
|
-
): string {
|
|
78
|
-
// Create light theme icon
|
|
79
|
-
const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
|
|
80
|
-
const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
|
|
81
|
-
|
|
82
|
-
// Create dark theme icon
|
|
83
|
-
const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
|
|
84
|
-
const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
|
|
85
|
-
|
|
86
|
-
return (
|
|
87
|
-
`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
|
|
88
|
-
`<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Process markdown text to convert GitHub-style alerts
|
|
94
|
-
*/
|
|
95
|
-
function processAlerts(text: string): string {
|
|
96
|
-
const lines = text.split('\n');
|
|
97
|
-
const result: string[] = [];
|
|
98
|
-
let i = 0;
|
|
99
|
-
let inCodeBlock = false;
|
|
100
|
-
|
|
101
|
-
while (i < lines.length) {
|
|
102
|
-
const line = lines[i];
|
|
103
|
-
|
|
104
|
-
// Track code blocks (both ``` and ~~~)
|
|
105
|
-
if (line.trim().match(/^```|^~~~/)) {
|
|
106
|
-
inCodeBlock = !inCodeBlock;
|
|
107
|
-
result.push(line);
|
|
108
|
-
i++;
|
|
109
|
-
continue;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// Skip alert processing inside code blocks
|
|
113
|
-
if (inCodeBlock) {
|
|
114
|
-
result.push(line);
|
|
115
|
-
i++;
|
|
116
|
-
continue;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
const alertMatch = line.match(
|
|
120
|
-
/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/
|
|
121
|
-
);
|
|
122
|
-
|
|
123
|
-
if (alertMatch) {
|
|
124
|
-
const alertType = alertMatch[1];
|
|
125
|
-
const contentLines: string[] = [];
|
|
126
|
-
|
|
127
|
-
i++;
|
|
128
|
-
while (i < lines.length && lines[i].startsWith('>')) {
|
|
129
|
-
const content = lines[i].replace(/^>\s?/, '');
|
|
130
|
-
if (content) {
|
|
131
|
-
contentLines.push(content);
|
|
132
|
-
}
|
|
133
|
-
i++;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
if (contentLines.length > 0) {
|
|
137
|
-
const content = contentLines.join('\n\n');
|
|
138
|
-
|
|
139
|
-
// Use HTML comments as markers that will survive markdown processing
|
|
140
|
-
result.push(
|
|
141
|
-
`<!--ALERT_START:${alertType}-->`,
|
|
142
|
-
content,
|
|
143
|
-
`<!--ALERT_END:${alertType}-->`
|
|
144
|
-
);
|
|
145
|
-
continue;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
result.push(line);
|
|
150
|
-
i++;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
return result.join('\n');
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
158
|
-
*/
|
|
159
|
-
function postProcessAlerts(html: string, showBackgrounds: boolean): string {
|
|
160
|
-
// Replace alert markers with proper HTML structure
|
|
161
|
-
const result = html.replace(
|
|
162
|
-
/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g,
|
|
163
|
-
(match, alertType, content) => {
|
|
164
|
-
const config = ALERT_TYPES[alertType];
|
|
165
|
-
const icon = createIcon(
|
|
166
|
-
config.iconPath,
|
|
167
|
-
config.iconClass,
|
|
168
|
-
config.iconColor,
|
|
169
|
-
config.iconColorDark
|
|
170
|
-
);
|
|
171
|
-
const backgroundClass = showBackgrounds
|
|
172
|
-
? ' markdown-alert-with-backgrounds'
|
|
173
|
-
: '';
|
|
174
|
-
|
|
175
|
-
return (
|
|
176
|
-
`<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
|
|
177
|
-
`<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
|
|
178
|
-
content +
|
|
179
|
-
'</div>'
|
|
180
|
-
);
|
|
181
|
-
}
|
|
182
|
-
);
|
|
183
|
-
return result;
|
|
184
|
-
}
|
|
12
|
+
// Re-export for backwards compatibility
|
|
13
|
+
export { processAlerts, postProcessAlerts } from './utils';
|
|
185
14
|
|
|
186
15
|
/**
|
|
187
16
|
* Initialization data for the jupyterlab_github_markdown_alerts_extension extension.
|
|
@@ -223,13 +52,29 @@ const plugin: JupyterFrontEndPlugin<void> = {
|
|
|
223
52
|
loadSettings();
|
|
224
53
|
}
|
|
225
54
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
markdownParser.render
|
|
229
|
-
const
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
55
|
+
// Idempotent: never re-wrap on re-activation, otherwise originalRender
|
|
56
|
+
// would capture an already-wrapped function
|
|
57
|
+
if (!(markdownParser.render as any).__alertsWrapped) {
|
|
58
|
+
const originalRender = markdownParser.render.bind(markdownParser);
|
|
59
|
+
|
|
60
|
+
const wrappedRender = async (content: string): Promise<string> => {
|
|
61
|
+
try {
|
|
62
|
+
const processedContent = processAlerts(content);
|
|
63
|
+
const renderedHtml = await originalRender(processedContent);
|
|
64
|
+
return postProcessAlerts(renderedHtml, showBackgrounds);
|
|
65
|
+
} catch (reason) {
|
|
66
|
+
// Degrade to plain Markdown instead of rejecting render, which
|
|
67
|
+
// would push rendermime into an un-highlighted fallback
|
|
68
|
+
console.error(
|
|
69
|
+
'jupyterlab_github_markdown_alerts_extension: render failed, falling back to plain markdown',
|
|
70
|
+
reason
|
|
71
|
+
);
|
|
72
|
+
return originalRender(content);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
(wrappedRender as any).__alertsWrapped = true;
|
|
76
|
+
markdownParser.render = wrappedRender;
|
|
77
|
+
}
|
|
233
78
|
|
|
234
79
|
console.log(
|
|
235
80
|
'JupyterLab extension jupyterlab_github_markdown_alerts_extension is activated!'
|
package/src/utils.ts
ADDED
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Alert type configuration
|
|
3
|
+
*/
|
|
4
|
+
export interface IAlertConfig {
|
|
5
|
+
className: string;
|
|
6
|
+
title: string;
|
|
7
|
+
iconPath: string;
|
|
8
|
+
iconClass: string;
|
|
9
|
+
iconColor: string;
|
|
10
|
+
iconColorDark: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export const ALERT_TYPES: Record<string, IAlertConfig> = {
|
|
14
|
+
NOTE: {
|
|
15
|
+
className: 'markdown-alert-note',
|
|
16
|
+
title: 'Note',
|
|
17
|
+
iconClass: 'octicon-info',
|
|
18
|
+
iconColor: '#0969da',
|
|
19
|
+
iconColorDark: '#2f81f7',
|
|
20
|
+
iconPath:
|
|
21
|
+
'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
22
|
+
},
|
|
23
|
+
TIP: {
|
|
24
|
+
className: 'markdown-alert-tip',
|
|
25
|
+
title: 'Tip',
|
|
26
|
+
iconClass: 'octicon-light-bulb',
|
|
27
|
+
iconColor: '#1a7f37',
|
|
28
|
+
iconColorDark: '#3fb950',
|
|
29
|
+
iconPath:
|
|
30
|
+
'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
|
|
31
|
+
},
|
|
32
|
+
IMPORTANT: {
|
|
33
|
+
className: 'markdown-alert-important',
|
|
34
|
+
title: 'Important',
|
|
35
|
+
iconClass: 'octicon-report',
|
|
36
|
+
iconColor: '#8250df',
|
|
37
|
+
iconColorDark: '#a371f7',
|
|
38
|
+
iconPath:
|
|
39
|
+
'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
40
|
+
},
|
|
41
|
+
WARNING: {
|
|
42
|
+
className: 'markdown-alert-warning',
|
|
43
|
+
title: 'Warning',
|
|
44
|
+
iconClass: 'octicon-alert',
|
|
45
|
+
iconColor: '#9a6700',
|
|
46
|
+
iconColorDark: '#d29922',
|
|
47
|
+
iconPath:
|
|
48
|
+
'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
49
|
+
},
|
|
50
|
+
CAUTION: {
|
|
51
|
+
className: 'markdown-alert-caution',
|
|
52
|
+
title: 'Caution',
|
|
53
|
+
iconClass: 'octicon-stop',
|
|
54
|
+
iconColor: '#cf222e',
|
|
55
|
+
iconColorDark: '#f85149',
|
|
56
|
+
iconPath:
|
|
57
|
+
'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Create SVG icon element as data URI with both light and dark theme versions
|
|
63
|
+
*/
|
|
64
|
+
export function createIcon(
|
|
65
|
+
iconPath: string,
|
|
66
|
+
iconClass: string,
|
|
67
|
+
iconColor: string,
|
|
68
|
+
iconColorDark: string
|
|
69
|
+
): string {
|
|
70
|
+
// Create light theme icon
|
|
71
|
+
const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
|
|
72
|
+
const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
|
|
73
|
+
|
|
74
|
+
// Create dark theme icon
|
|
75
|
+
const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
|
|
76
|
+
const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
|
|
80
|
+
`<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Process markdown text to convert GitHub-style alerts
|
|
86
|
+
*/
|
|
87
|
+
export function processAlerts(text: string): string {
|
|
88
|
+
const lines = text.split('\n');
|
|
89
|
+
const result: string[] = [];
|
|
90
|
+
let i = 0;
|
|
91
|
+
let inCodeBlock = false;
|
|
92
|
+
|
|
93
|
+
while (i < lines.length) {
|
|
94
|
+
const line = lines[i];
|
|
95
|
+
|
|
96
|
+
// Track code blocks (both ``` and ~~~)
|
|
97
|
+
if (line.trim().match(/^```|^~~~/)) {
|
|
98
|
+
inCodeBlock = !inCodeBlock;
|
|
99
|
+
result.push(line);
|
|
100
|
+
i++;
|
|
101
|
+
continue;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Skip alert processing inside code blocks
|
|
105
|
+
if (inCodeBlock) {
|
|
106
|
+
result.push(line);
|
|
107
|
+
i++;
|
|
108
|
+
continue;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
const alertMatch = line.match(
|
|
112
|
+
/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
if (alertMatch) {
|
|
116
|
+
const alertType = alertMatch[1];
|
|
117
|
+
const contentLines: string[] = [];
|
|
118
|
+
|
|
119
|
+
i++;
|
|
120
|
+
while (i < lines.length && lines[i].startsWith('>')) {
|
|
121
|
+
const content = lines[i].replace(/^>\s?/, '');
|
|
122
|
+
contentLines.push(content); // Keep empty lines for paragraph separation
|
|
123
|
+
i++;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
if (contentLines.length > 0) {
|
|
127
|
+
// Use single newlines to preserve table structure
|
|
128
|
+
// Empty lines in contentLines will still create paragraph breaks
|
|
129
|
+
const content = contentLines.join('\n');
|
|
130
|
+
|
|
131
|
+
// Use HTML comments as markers that will survive markdown processing
|
|
132
|
+
result.push(
|
|
133
|
+
`<!--ALERT_START:${alertType}-->`,
|
|
134
|
+
content,
|
|
135
|
+
`<!--ALERT_END:${alertType}-->`
|
|
136
|
+
);
|
|
137
|
+
continue;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
result.push(line);
|
|
142
|
+
i++;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
return result.join('\n');
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
150
|
+
*/
|
|
151
|
+
export function postProcessAlerts(
|
|
152
|
+
html: string,
|
|
153
|
+
showBackgrounds: boolean
|
|
154
|
+
): string {
|
|
155
|
+
// Replace alert markers with proper HTML structure
|
|
156
|
+
const result = html.replace(
|
|
157
|
+
/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g,
|
|
158
|
+
(match, alertType, content) => {
|
|
159
|
+
const config = ALERT_TYPES[alertType];
|
|
160
|
+
const icon = createIcon(
|
|
161
|
+
config.iconPath,
|
|
162
|
+
config.iconClass,
|
|
163
|
+
config.iconColor,
|
|
164
|
+
config.iconColorDark
|
|
165
|
+
);
|
|
166
|
+
const backgroundClass = showBackgrounds
|
|
167
|
+
? ' markdown-alert-with-backgrounds'
|
|
168
|
+
: '';
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
`<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
|
|
172
|
+
`<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
|
|
173
|
+
content +
|
|
174
|
+
'</div>'
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
);
|
|
178
|
+
return result;
|
|
179
|
+
}
|
package/style/base.css
CHANGED
|
@@ -173,47 +173,47 @@ body[data-jp-theme-light='false']
|
|
|
173
173
|
|
|
174
174
|
/* Optional backgrounds (enabled via settings) */
|
|
175
175
|
.markdown-alert-with-backgrounds.markdown-alert-note {
|
|
176
|
-
background-color:
|
|
176
|
+
background-color: rgb(9 105 218 / 10%);
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
.markdown-alert-with-backgrounds.markdown-alert-tip {
|
|
180
|
-
background-color:
|
|
180
|
+
background-color: rgb(26 127 55 / 10%);
|
|
181
181
|
}
|
|
182
182
|
|
|
183
183
|
.markdown-alert-with-backgrounds.markdown-alert-important {
|
|
184
|
-
background-color:
|
|
184
|
+
background-color: rgb(130 80 223 / 10%);
|
|
185
185
|
}
|
|
186
186
|
|
|
187
187
|
.markdown-alert-with-backgrounds.markdown-alert-warning {
|
|
188
|
-
background-color:
|
|
188
|
+
background-color: rgb(154 103 0 / 10%);
|
|
189
189
|
}
|
|
190
190
|
|
|
191
191
|
.markdown-alert-with-backgrounds.markdown-alert-caution {
|
|
192
|
-
background-color:
|
|
192
|
+
background-color: rgb(209 36 47 / 10%);
|
|
193
193
|
}
|
|
194
194
|
|
|
195
195
|
/* Dark theme backgrounds */
|
|
196
196
|
body[data-jp-theme-light='false']
|
|
197
197
|
.markdown-alert-with-backgrounds.markdown-alert-note {
|
|
198
|
-
background-color:
|
|
198
|
+
background-color: rgb(47 129 247 / 15%);
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
body[data-jp-theme-light='false']
|
|
202
202
|
.markdown-alert-with-backgrounds.markdown-alert-tip {
|
|
203
|
-
background-color:
|
|
203
|
+
background-color: rgb(63 185 80 / 15%);
|
|
204
204
|
}
|
|
205
205
|
|
|
206
206
|
body[data-jp-theme-light='false']
|
|
207
207
|
.markdown-alert-with-backgrounds.markdown-alert-important {
|
|
208
|
-
background-color:
|
|
208
|
+
background-color: rgb(163 113 247 / 15%);
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
body[data-jp-theme-light='false']
|
|
212
212
|
.markdown-alert-with-backgrounds.markdown-alert-warning {
|
|
213
|
-
background-color:
|
|
213
|
+
background-color: rgb(210 153 34 / 15%);
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
body[data-jp-theme-light='false']
|
|
217
217
|
.markdown-alert-with-backgrounds.markdown-alert-caution {
|
|
218
|
-
background-color:
|
|
218
|
+
background-color: rgb(248 81 73 / 15%);
|
|
219
219
|
}
|