@scalar/code-highlight 0.0.23 → 0.0.24

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/css/markdown.css +48 -19
  3. package/dist/markdown/markdown.d.ts.map +1 -1
  4. package/dist/markdown/markdown.js +5 -3
  5. package/dist/rehype-alert/rehype-alert.d.ts.map +1 -1
  6. package/dist/rehype-alert/rehype-alert.js +2 -18
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @scalar/code-highlight
2
2
 
3
+ ## 0.0.24
4
+
5
+ ### Patch Changes
6
+
7
+ - 9319c0c: fix: allows alert plugin classes in markdown
8
+ - 9319c0c: feat: updates markdown alert style
9
+
3
10
  ## 0.0.23
4
11
 
5
12
  ### Patch Changes
package/dist/css/markdown.css CHANGED
@@ -304,32 +304,61 @@
304
304
  font-size: var(--scalar-small);
305
305
  gap: 12px;
306
306
  padding: 12px;
307
+ padding-left: 42px;
308
+ position: relative;
307
309
  }
308
- .markdown .markdown-alert .markdown-alert-border {
309
- border-radius: var(--scalar-radius-xl);
310
- min-width: 1.5px;
311
- width: 1.5px;
310
+
311
+ .markdown .markdown-alert::before {
312
+ content: "";
313
+ position: absolute;
314
+ left: 12px;
315
+ top: 12px;
316
+ width: 20px;
317
+ height: 20px;
318
+ background-color: currentColor;
319
+ mask-repeat: no-repeat;
320
+ mask-size: contain;
321
+ mask-position: center;
312
322
  }
313
- .markdown .markdown-alert .markdown-alert-content {
314
- margin: 0;
315
- line-height: 1.5;
323
+
324
+ .markdown .markdown-alert.markdown-alert-note::before,
325
+ .markdown .markdown-alert.markdown-alert-tip::before {
326
+ mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17v-6a.5.5 0 0 0-.5-.5l-.5.001h-1M12 17h-2m2 0h2m-2 5c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 7.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" fill="currentColor"/></svg>');
316
327
  }
317
- .markdown .markdown-alert .markdown-alert-title {
318
- font-weight: var(--scalar-semibold);
328
+
329
+ .markdown .markdown-alert.markdown-alert-important::before,
330
+ .markdown .markdown-alert.markdown-alert-warning::before {
331
+ mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8v4m10 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11 16a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" fill="currentColor"/></svg>');
319
332
  }
320
- .markdown .markdown-alert.markdown-alert-note .markdown-alert-border {
321
- background-color: var(--scalar-color-blue);
333
+
334
+ .markdown .markdown-alert.markdown-alert-caution::before {
335
+ mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8v4m3.312-10a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11 16a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" fill="currentColor"/></svg>');
336
+ color: var(--scalar-color-red);
337
+ }
338
+
339
+ .markdown .markdown-alert.markdown-alert-success::before {
340
+ mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 9.5 10.5 15 8 12.5m14-.5c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
341
+ color: var(--scalar-color-green);
322
342
  }
323
- .markdown .markdown-alert.markdown-alert-tip .markdown-alert-border {
324
- background-color: var(--scalar-color-green);
343
+
344
+ .markdown .markdown-alert.markdown-alert-note::before {
345
+ color: var(--scalar-color-blue);
346
+ }
347
+
348
+ .markdown .markdown-alert.markdown-alert-tip::before {
349
+ color: var(--scalar-color-2);
325
350
  }
326
- .markdown .markdown-alert.markdown-alert-important .markdown-alert-border {
327
- background-color: var(--scalar-color-purple);
351
+
352
+ .markdown .markdown-alert.markdown-alert-important::before {
353
+ color: var(--scalar-color-purple);
328
354
  }
329
- .markdown .markdown-alert.markdown-alert-warning .markdown-alert-border {
330
- background-color: var(--scalar-color-orange);
355
+
356
+ .markdown .markdown-alert.markdown-alert-warning::before {
357
+ color: var(--scalar-color-orange);
331
358
  }
332
- .markdown .markdown-alert.markdown-alert-caution .markdown-alert-border {
333
- background-color: var(--scalar-color-red);
359
+
360
+ .markdown .markdown-alert .markdown-alert-content {
361
+ margin: 0;
362
+ line-height: 1.5;
334
363
  }
335
364
  }
package/dist/markdown/markdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/markdown/markdown.ts"],"names":[],"mappings":"AAyCA;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,UAmDF;AASD;;GAEG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,MAAU,GAChB;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,EAAE,CAiBF;AAuBD;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,YAgC5C"}
1
+ {"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/markdown/markdown.ts"],"names":[],"mappings":"AAyCA;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,UAqDF;AASD;;GAEG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,MAAU,GAChB;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,EAAE,CAiBF;AAuBD;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,YAgC5C"}
package/dist/markdown/markdown.js CHANGED
@@ -9,9 +9,9 @@ import remarkRehype from 'remark-rehype';
9
9
  import remarkStringify from 'remark-stringify';
10
10
  import { unified } from 'unified';
11
11
  import { visit, SKIP } from 'unist-util-visit';
12
+ import { rehypeAlert } from '../rehype-alert/rehype-alert.js';
12
13
  import { rehypeHighlight } from '../rehype-highlight/rehype-highlight.js';
13
14
  import { standardLanguages } from '../languages/standard.js';
14
- import { rehypeAlert } from '../rehype-alert/rehype-alert.js';
15
15
 
16
16
  /**
17
17
  * Plugin to transform nodes in a Markdown AST
@@ -44,6 +44,8 @@ function htmlFromMarkdown(markdown, options) {
44
44
  })
45
45
  // Allows any HTML tags
46
46
  .use(remarkRehype, { allowDangerousHtml: true })
47
+ // Adds GitHub alerts
48
+ .use(rehypeAlert)
47
49
  // Creates a HTML AST
48
50
  .use(rehypeRaw)
49
51
  // Removes disallowed tags
@@ -56,6 +58,8 @@ function htmlFromMarkdown(markdown, options) {
56
58
  attributes: {
57
59
  ...defaultSchema.attributes,
58
60
  abbr: ['title'],
61
+ // Allow alert classes
62
+ div: ['class', ['className', /^markdown-alert(-.*)?$/]],
59
63
  },
60
64
  })
61
65
  // Syntax highlighting
@@ -64,8 +68,6 @@ function htmlFromMarkdown(markdown, options) {
64
68
  // Enable auto detection
65
69
  detect: true,
66
70
  })
67
- // Adds GitHub alerts
68
- .use(rehypeAlert)
69
71
  // Adds target="_blank" to external links
70
72
  .use(rehypeExternalLinks, { target: '_blank' })
71
73
  // Formats the HTML
package/dist/rehype-alert/rehype-alert.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rehype-alert.d.ts","sourceRoot":"","sources":["../../src/rehype-alert/rehype-alert.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AASjC,wBAAgB,WAAW,WACX,IAAI,UAmGnB"}
1
+ {"version":3,"file":"rehype-alert.d.ts","sourceRoot":"","sources":["../../src/rehype-alert/rehype-alert.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AASjC,wBAAgB,WAAW,WACX,IAAI,UAkFnB"}
package/dist/rehype-alert/rehype-alert.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { visit } from 'unist-util-visit';
2
2
 
3
- const ALERT_TYPES = ['note', 'tip', 'important', 'warning', 'caution'];
3
+ const ALERT_TYPES = ['note', 'tip', 'important', 'warning', 'caution', 'success'];
4
4
  // Simple whitespace check function
5
5
  function isWhitespace(node) {
6
6
  return node.type === 'text' && typeof node.value === 'string' && /^\s*$/.test(node.value);
@@ -60,7 +60,6 @@ function rehypeAlert() {
60
60
  // Remove the alert marker if it’s not followed by a newline or a non-whitespace character
61
61
  text.value = text.value.replace(/^\s*\[!.*?\]\s*/, '');
62
62
  }
63
- const capitalizedType = alertType.charAt(0).toUpperCase() + alertType.slice(1);
64
63
  // Extract content from paragraphs to avoid wrapping in <p> tags
65
64
  const contentChildren = [];
66
65
  for (let i = headIndex; i < node.children.length; i++) {
@@ -78,26 +77,11 @@ function rehypeAlert() {
78
77
  tagName: 'div',
79
78
  properties: { className: ['markdown-alert', `markdown-alert-${alertType}`] },
80
79
  children: [
81
- {
82
- type: 'element',
83
- tagName: 'span',
84
- properties: { className: ['markdown-alert-border'] },
85
- children: [],
86
- },
87
80
  {
88
81
  type: 'element',
89
82
  tagName: 'div',
90
83
  properties: { className: ['markdown-alert-content'] },
91
- children: [
92
- {
93
- type: 'element',
94
- tagName: 'span',
95
- properties: { className: ['markdown-alert-title'] },
96
- children: [{ type: 'text', value: `${capitalizedType}:` }],
97
- },
98
- { type: 'text', value: ' ' },
99
- ...contentChildren,
100
- ],
84
+ children: [{ type: 'text', value: ' ' }, ...contentChildren],
101
85
  },
102
86
  ],
103
87
  };
package/package.json CHANGED
@@ -16,7 +16,7 @@
16
16
  "lowlight",
17
17
  "highlightjs"
18
18
  ],
19
- "version": "0.0.23",
19
+ "version": "0.0.24",
20
20
  "engines": {
21
21
  "node": ">=18"
22
22
  },
@@ -90,15 +90,15 @@
90
90
  "unist-util-visit": "^5.0.0"
91
91
  },
92
92
  "devDependencies": {
93
- "@rollup/plugin-typescript": "^11.1.6",
93
+ "@rollup/plugin-typescript": "^12.1.2",
94
94
  "@types/hast": "^3.0.4",
95
95
  "@types/mdast": "^4.0.4",
96
96
  "@types/unist": "^3.0.2",
97
97
  "vfile": "^6.0.1",
98
98
  "vite": "^5.4.10",
99
99
  "vue": "^3.5.12",
100
- "@scalar/build-tooling": "0.1.15",
101
- "@scalar/themes": "0.9.69"
100
+ "@scalar/build-tooling": "0.1.17",
101
+ "@scalar/themes": "0.9.74"
102
102
  },
103
103
  "scripts": {
104
104
  "build": "scalar-build-rollup",