@nakobase/nakobase-md-html 1.2.5 → 2.0.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.
Files changed (12) hide show
  1. package/README.md +28 -9
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +7 -2
  4. package/dist/cjs/types.d.ts +1 -0
  5. package/dist/cjs/types.d.ts.map +1 -1
  6. package/dist/cjs/utils/md-custom-inlines.d.ts +3 -0
  7. package/dist/cjs/utils/md-custom-inlines.d.ts.map +1 -0
  8. package/dist/cjs/utils/md-custom-inlines.js +51 -0
  9. package/dist/styles/base.css +1 -0
  10. package/dist/styles/rich.css +1 -0
  11. package/package.json +7 -4
  12. package/dist/styles/style.css +0 -1
package/README.md CHANGED
@@ -28,26 +28,45 @@ const html = mdToHtml(
28
28
 
29
29
  This is a test of the markdown to html converter.
30
30
  `,
31
- { codeHighlight: true }
32
- ); // codeHighlight is optional, default is false
31
+ {
32
+ codeHighlight: true, // Enable code highlighting (optional, default is false)
33
+ rich: true // Enable rich features like containers and custom blocks (optional, default is false)
34
+ }
35
+ );
33
36
 
34
37
  console.log(html);
35
38
  ```
36
39
 
40
+ Add `.nbcontents` to the container of the markdown.
41
+
42
+ ```html
43
+ <div class="nbcontent">
44
+ <!-- HTML parsed from markdown -->
45
+ </div>
46
+ ```
47
+
37
48
  ### Styles
38
49
 
39
50
  We have some default styles that are applied to the HTML.
40
51
 
52
+ #### Basic Usage (Performance Focused)
53
+ For simple markdown content, use only the base styles:
54
+
41
55
  ```ts
42
- import '@nakobase/nakobase-md-html/styles/style.css';
56
+ import '@nakobase/nakobase-md-html/styles/base.css';
57
+ ```
58
+
59
+ #### Rich Features
60
+ For content with custom blocks, containers, and rich features:
43
61
 
44
- import 'prismjs/themes/prism-okaidia.css'; // or any other prism theme if you want
62
+ ```ts
63
+ import '@nakobase/nakobase-md-html/styles/base.css';
64
+ import '@nakobase/nakobase-md-html/styles/rich.css';
45
65
  ```
46
66
 
47
- Add `.nbcontents` to the container of the markdown.
67
+ ### Code Highlighting
68
+ If you want code highlighting, also import a Prism theme:
48
69
 
49
- ```html
50
- <div class="nbcontent">
51
- <!-- HTML parsed from markdown -->
52
- </div>
70
+ ```ts
71
+ import 'prismjs/themes/prism-okaidia.css'; // or any other prism theme
53
72
  ```
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,QAAQ,GACnB,UAAU,MAAM,EAChB,UAAU,eAAe,KACxB,MA8BF,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoB1C,eAAO,MAAM,QAAQ,GACnB,UAAU,MAAM,EAChB,UAAU,eAAe,KACxB,MAkCF,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -10,6 +10,7 @@ var _sanitizer = require("./sanitizer");
10
10
  var _mdContainer = require("./utils/md-container");
11
11
  var _mdRendererFence = require("./utils/md-renderer-fence");
12
12
  var _mdCustomBlocks = require("./utils/md-custom-blocks");
13
+ var _mdCustomInlines = require("./utils/md-custom-inlines");
13
14
  var _constants = require("./constants");
14
15
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
16
  // plugins
@@ -19,7 +20,8 @@ const MdItContainer = require('markdown-it-container');
19
20
  const MdItTaskLists = require('markdown-it-task-lists');
20
21
  const mdToHtml = (markdown, options) => {
21
22
  const {
22
- codeHighlight
23
+ codeHighlight,
24
+ rich
23
25
  } = options || {};
24
26
  if (!(markdown && markdown.length)) return '';
25
27
  const md = (0, _markdownIt.default)({
@@ -34,7 +36,10 @@ const mdToHtml = (markdown, options) => {
34
36
  });
35
37
  md.use(MdItInlineComments).use(MdItImSize).use(MdItTaskLists, {
36
38
  enabled: true
37
- }).use(MdItContainer, _constants.CONTAINER_TYPES.DETAILS, _mdContainer.detailsOptions).use(MdItContainer, _constants.CONTAINER_TYPES.BOX, _mdContainer.boxOptions).use(MdItContainer, _constants.CONTAINER_TYPES.BUBBLE, _mdContainer.bubbleOptions).use(MdItContainer, _constants.CONTAINER_TYPES.BUBBLE_IMAGE, _mdContainer.bubbleImageOptions).use(_mdCustomBlocks.mdCustomBlocks);
39
+ });
40
+ if (rich) {
41
+ md.use(MdItContainer, _constants.CONTAINER_TYPES.DETAILS, _mdContainer.detailsOptions).use(MdItContainer, _constants.CONTAINER_TYPES.BOX, _mdContainer.boxOptions).use(MdItContainer, _constants.CONTAINER_TYPES.BUBBLE, _mdContainer.bubbleOptions).use(MdItContainer, _constants.CONTAINER_TYPES.BUBBLE_IMAGE, _mdContainer.bubbleImageOptions).use(_mdCustomBlocks.mdCustomBlocks).use(_mdCustomInlines.mdCustomInlines);
42
+ }
38
43
  if (codeHighlight) {
39
44
  md.use(_mdRendererFence.mdRendererFence);
40
45
  }
package/dist/cjs/types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export interface MdToHtmlOptions {
2
2
  codeHighlight?: boolean;
3
+ rich?: boolean;
3
4
  }
4
5
  //# sourceMappingURL=types.d.ts.map
package/dist/cjs/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}
package/dist/cjs/utils/md-custom-inlines.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import MarkdownIt from 'markdown-it';
2
+ export declare function mdCustomInlines(md: MarkdownIt): void;
3
+ //# sourceMappingURL=md-custom-inlines.d.ts.map
package/dist/cjs/utils/md-custom-inlines.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-custom-inlines.d.ts","sourceRoot":"","sources":["../../../src/utils/md-custom-inlines.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAoDrC,wBAAgB,eAAe,CAAC,EAAE,EAAE,UAAU,QAc7C"}
package/dist/cjs/utils/md-custom-inlines.js ADDED
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.mdCustomInlines = mdCustomInlines;
7
+ var _utils = require("markdown-it/lib/common/utils");
8
+ function registerInline(md, inline) {
9
+ const inlineRule = (state, silent) => {
10
+ const start = state.pos;
11
+ const max = state.posMax;
12
+ if (start + inline.marker.length > max || state.src.slice(start, start + inline.marker.length) !== inline.marker) {
13
+ return false;
14
+ }
15
+ if (silent) return true;
16
+ let end = start + inline.marker.length;
17
+ while (end < max) {
18
+ if (state.src.slice(end, end + inline.marker.length) === inline.marker) {
19
+ break;
20
+ }
21
+ end++;
22
+ }
23
+ if (end >= max) {
24
+ return false;
25
+ }
26
+ const content = state.src.slice(start + inline.marker.length, end);
27
+ const token = state.push(inline.name, '', 0);
28
+ token.content = content;
29
+ token.markup = inline.marker;
30
+ state.pos = end + inline.marker.length;
31
+ return true;
32
+ };
33
+ md.inline.ruler.before('emphasis', inline.name, inlineRule);
34
+ md.renderer.rules[inline.name] = (tokens, idx) => {
35
+ return inline.renderer(tokens[idx].content, tokens[idx].meta);
36
+ };
37
+ }
38
+ function mdCustomInlines(md) {
39
+ // ==highlight==
40
+ registerInline(md, {
41
+ name: 'highlight',
42
+ marker: '==',
43
+ renderer: content => {
44
+ const colorMatch = content.match(/^([a-zA-Z]+):(.+)$/);
45
+ const color = colorMatch ? colorMatch[1] : 'default';
46
+ const text = colorMatch ? colorMatch[2] : content;
47
+ const className = color === 'default' ? 'highlight' : `highlight highlight-${color}`;
48
+ return `<span class="${className}">${(0, _utils.escapeHtml)(text)}</span>`;
49
+ }
50
+ });
51
+ }
package/dist/styles/base.css ADDED
@@ -0,0 +1 @@
1
+ @media screen and (max-width: 576px){pre>code{padding:1rem .8rem;font-size:.85em}}.nbcontent{--background: oklch(100% 0 0deg);--foreground: oklch(14.1% 0.005 285.823deg);--primary: oklch(21% 0.006 285.885deg);--primary-foreground: oklch(98.5% 0 0deg);--secondary: oklch(96.7% 0.001 286.375deg);--secondary-foreground: oklch(21% 0.006 285.885deg);--muted: oklch(96.7% 0.001 286.375deg);--muted-foreground: oklch(55.2% 0.016 285.938deg);--accent: oklch(96.7% 0.001 286.375deg);--accent-foreground: oklch(21% 0.006 285.885deg);--destructive: oklch(57.7% 0.245 27.325deg);--border: oklch(92% 0.004 286.32deg);--input: oklch(92% 0.004 286.32deg);--ring: oklch(70.5% 0.015 286.067deg);--link: oklch(45.2% 0.313214 264.052deg);--warning: oklch(97.54% 0.025552 84.593deg);--warning-foreground: oklch(83.04% 0.1459 74.36deg);--danger: oklch(96.56% 0.0177 4.51deg);--danger-foreground: oklch(72.71% 0.1684 24.66deg);--rounded-xs: 4px;--rounded-sm: 7px;--rounded-md: 10px;--rounded-lg: 14px;--rounded-full: 99rem;line-height:1.8;background-color:var(--background);color:var(--foreground)}.nbcontent>*:first-child{margin-top:0}.nbcontent i,.nbcontent cite,.nbcontent em,.nbcontent var{font-style:italic}.nbcontent strong{font-weight:bold}.nbcontent a{color:var(--link)}.nbcontent a:hover{text-decoration:underline}.nbcontent p+p{margin-top:1.2em}.nbcontent h1,.nbcontent h2,.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{font-weight:bold}.nbcontent h1+p,.nbcontent h2+p,.nbcontent h3+p,.nbcontent h4+p,.nbcontent h5+p,.nbcontent h6+p{margin-top:.2em}.nbcontent h1,.nbcontent h2{margin-top:1.9em;margin-bottom:1rem;padding-bottom:.1em;border-bottom:solid 1px var(--border)}.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{margin-top:1.8em;margin-bottom:.4em}.nbcontent h1{font-size:1.7em}.nbcontent h2{font-size:1.5em}.nbcontent h3{font-size:1.3em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.9em}@media screen and (max-width: 576px){.nbcontent h1{font-size:1.6em}.nbcontent h2{font-size:1.4em}.nbcontent h3{font-size:1.2em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.85em}}.nbcontent ul,.nbcontent ol{margin:1.4rem 0;line-height:1.6}.nbcontent ul>li,.nbcontent ol>li{margin:.4rem 0}.nbcontent ul ul,.nbcontent ul ol,.nbcontent ol ul,.nbcontent ol ol{margin:.2em 0}.nbcontent ul p,.nbcontent ol p{margin:0}.nbcontent ul{padding-left:1.8em}.nbcontent ul>li{list-style:disc}.nbcontent ul>li::marker{font-size:1.1em}.nbcontent ol{padding-left:1.7em}.nbcontent ol>li{list-style:decimal;padding-left:.2em}.nbcontent ol>li::marker{font-weight:600;letter-spacing:-0.05em}.nbcontent .contains-task-list .task-list-item{list-style:none}.nbcontent .task-list-item-checkbox{margin-left:-1.5em;font-size:1em;pointer-events:none}.nbcontent code{padding:.2em .4em;background:var(--secondary);font-size:.85em;border-radius:var(--rounded-xs);vertical-align:.08em;color:var(--foreground)}.nbcontent code,.nbcontent .code-filename{font-family:"JetBrains Mono","Fira Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Cascadia Code","Source Code Pro",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-font-smoothing:antialiased}.nbcontent .code-container{position:relative;margin:1.3rem 0}.nbcontent .code-filename{display:table;max-width:100%;background:var(--primary);color:var(--primary-foreground);font-size:12px;line-height:1.3;border-radius:var(--rounded-xs) var(--rounded-xs) 0 0;padding:6px 12px 20px;margin-bottom:-24px}.nbcontent .code-filename-container+pre{border-top-left-radius:0}.nbcontent pre{margin:1.3rem 0;background:var(--primary);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rounded-md);word-break:normal;word-wrap:normal;display:flex}.nbcontent pre:after{content:"";width:8px;flex-shrink:0}.nbcontent pre code{margin:0;padding:0;background:rgba(0,0,0,0);font-size:.9em}.nbcontent pre>code{display:block;padding:1.1rem}.nbcontent table{margin:1.2rem auto;width:auto;border-collapse:collapse;font-size:.95em;line-height:1.5;word-break:normal;display:block;overflow:auto;-webkit-overflow-scrolling:touch}.nbcontent th,.nbcontent td{padding:.6rem;border:solid 1px var(--border);background:var(--background)}.nbcontent th{font-weight:700;background:var(--secondary)}.nbcontent img:not(.emoji){margin:1.5rem auto;display:table;max-width:100%;height:auto}.nbcontent img+br{display:none}.nbcontent img~em{display:block;margin:-1rem auto 0;line-height:1.3;text-align:center;color:var(--muted-foreground);font-size:.92em}.nbcontent a:has(img){display:table;margin:0 auto}.nbcontent hr{border-top:2px solid var(--border);margin:2.5rem 0}.nbcontent blockquote{font-size:.97em;margin:1.4rem 0;border-left:solid 3px var(--border);padding:2px 0 2px .7em;color:var(--muted-foreground)}.nbcontent blockquote p{margin:1rem 0}.nbcontent blockquote>:first-child{margin-top:0}.nbcontent blockquote>:last-child{margin-bottom:0}.nbcontent blockquote.twitter-tweet{display:none}.dark .nbcontent{--background: oklch(14.1% 0.005 285.823deg);--foreground: oklch(98.5% 0 0deg);--primary: oklch(92% 0.004 286.32deg);--primary-foreground: oklch(21% 0.006 285.885deg);--secondary: oklch(27.4% 0.006 286.033deg);--secondary-foreground: oklch(98.5% 0 0deg);--muted: oklch(27.4% 0.006 286.033deg);--muted-foreground: oklch(70.5% 0.015 286.067deg);--accent: oklch(27.4% 0.006 286.033deg);--accent-foreground: oklch(98.5% 0 0deg);--destructive: oklch(70.4% 0.191 22.216deg);--border: oklch(100% 0 0deg / 0.1);--input: oklch(100% 0 0deg / 0.15);--ring: oklch(55.2% 0.016 285.938deg);--link: oklch(45.2% 0.313214 264.052deg);--warning: oklch(97.54% 0.025552 84.593deg);--warning-foreground: oklch(83.04% 0.1459 74.36deg);--danger: oklch(96.56% 0.0177 4.51deg);--danger-foreground: oklch(72.71% 0.1684 24.66deg);--rounded-xs: 4px;--rounded-sm: 7px;--rounded-md: 10px;--rounded-lg: 14px;--rounded-full: 99rem}
package/dist/styles/rich.css ADDED
@@ -0,0 +1 @@
1
+ .nbcontent details{font-size:.95em;margin:1rem 0;line-height:1.7}.nbcontent summary{cursor:pointer;outline:0;padding:.7em .7em .7em .9em;border:solid 1px var(--border);color:var(--primary);font-size:.9em;border-radius:var(--rounded-sm);background:var(--background)}.nbcontent summary::-webkit-details-marker{color:var(--muted-foreground)}.nbcontent details[open]>summary{border-radius:var(--rounded-sm) var(--rounded-sm) 0 0;box-shadow:none;background:var(--background);border-bottom:none}.nbcontent .details-content{padding:.5em .9em;border:solid 1px var(--border);border-radius:0 0 var(--rounded-lg) var(--rounded-lg);background:var(--background)}.nbcontent .details-content>*{margin:.5em 0}.nbcontent .bubble{display:flex;align-items:center;gap:1rem;margin:1rem 0}.nbcontent .bubble img{width:60px;height:60px;border-radius:50%;border:2px solid var(--border)}.nbcontent .bubble .bubble-content{position:relative;width:100%;padding:.5rem .8rem;color:var(--foreground);background-color:var(--secondary);border-radius:5px}.nbcontent .bubble .bubble-content::before,.nbcontent .bubble .bubble-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%)}.nbcontent .bubble .bubble-content::before{background-color:var(--secondary)}.nbcontent .bubble .bubble-content::after{left:-9px;background-color:var(--secondary)}.nbcontent .bubble.right{flex-direction:row-reverse}.nbcontent .bubble.right .bubble-content::before,.nbcontent .bubble.right .bubble-content::after{left:auto;right:-12px;clip-path:polygon(0 0, 100% 50%, 0 100%)}.nbcontent .bubble.right .bubble-content::after{left:auto;right:-9px}.nbcontent .bubble-image{display:flex;align-items:center;gap:1rem;margin:1rem 0}.nbcontent .bubble-image .bubble-image-wrapper,.nbcontent .bubble-image .bubble-image-content{flex-basis:50%}.nbcontent .bubble-image .bubble-image-wrapper{display:flex;align-items:center;justify-content:center;max-width:100%;border:2px solid var(--border);border-radius:5px}.nbcontent .bubble-image .bubble-image-wrapper img{width:100%;height:auto;margin:0}.nbcontent .bubble-image .bubble-image-content{position:relative;width:100%;padding:.5rem .8rem;color:var(--foreground);background-color:var(--secondary);border-radius:5px}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%);background-color:var(--secondary)}.nbcontent .bubble-image .bubble-image-content::after{left:-9px}@media screen and (max-width: 768px){.nbcontent .bubble-image{flex-direction:column}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{top:-12px;left:50%;width:28px;height:12px;clip-path:polygon(50% 0, 0 100%, 100% 100%);transform:translateX(-50%)}.nbcontent .bubble-image .bubble-image-content::after{top:-9px}}.nbcontent .box{margin:1.2rem 0}.nbcontent .box.box1{position:relative;border:1px solid var(--border);border-radius:var(--rounded-sm);padding:1rem}.nbcontent .box.box1 span{position:absolute;top:0;left:1rem;font-size:1.2em;color:var(--foreground);background-color:var(--background);padding:0 .5em;transform:translateY(-50%)}.nbcontent .box.box2{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--secondary)}.nbcontent .box.box3{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--warning-foreground)}.nbcontent .box.box3 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold}.nbcontent .box.box3 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--warning-foreground);background-color:var(--warning-foreground);border-radius:50%}.nbcontent .box.box3 .icon::before,.nbcontent .box.box3 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box3 .icon::before{top:2px;height:2px}.nbcontent .box.box3 .icon::after{height:8px;bottom:2px}.nbcontent .box.box4{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--danger-foreground)}.nbcontent .box.box4 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold}.nbcontent .box.box4 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--danger-foreground);background-color:var(--danger-foreground);border-radius:50%}.nbcontent .box.box4 .icon::before,.nbcontent .box.box4 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box4 .icon::before{top:2px;height:2px}.nbcontent .box.box4 .icon::after{height:8px;bottom:2px}.nbcontent .box.box5{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--warning)}.dark .nbcontent .box.box5{color:var(--background)}.nbcontent .box.box5 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold}.nbcontent .box.box5 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--warning-foreground);background-color:var(--warning-foreground);border-radius:50%}.nbcontent .box.box5 .icon::before,.nbcontent .box.box5 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box5 .icon::before{top:2px;height:2px}.nbcontent .box.box5 .icon::after{height:8px;bottom:2px}.nbcontent .box.box6{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--danger)}.dark .nbcontent .box.box6{color:var(--background)}.nbcontent .box.box6 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold}.nbcontent .box.box6 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--danger-foreground);background-color:var(--danger-foreground);border-radius:50%}.nbcontent .box.box6 .icon::before,.nbcontent .box.box6 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box6 .icon::before{top:2px;height:2px}.nbcontent .box.box6 .icon::after{height:8px;bottom:2px}.nbcontent .external-link{display:inline-flex;align-items:center;gap:.3em;color:var(--link)}.nbcontent .external-link::after{content:"";display:inline-block;width:.9em;height:.9em;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;background-color:var(--link);vertical-align:-0.125em;position:relative;top:-0.05em}.nbcontent .highlight{background:linear-gradient(transparent 60%, #fef08a 40%);padding:0 2px;border-radius:2px}.dark .nbcontent .highlight{background:linear-gradient(transparent 60%, #ca8a04 40%)}.nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #fecaca 40%)}.dark .nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #dc2626 40%)}.nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #bbf7d0 40%)}.dark .nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #16a34a 40%)}.nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #bfdbfe 40%)}.dark .nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #2563eb 40%)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nakobase/nakobase-md-html",
3
- "version": "1.2.5",
3
+ "version": "2.0.0",
4
4
  "description": "Convert Markdown to **sanitized HTML** and apply consistent styles – simple, secure, and styled.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "types": "dist/cjs/index.d.ts",
@@ -9,8 +9,11 @@
9
9
  ".": {
10
10
  "import": "./dist/cjs/index.js"
11
11
  },
12
- "./styles/style.css": {
13
- "import": "./dist/styles/style.css"
12
+ "./styles/base.css": {
13
+ "import": "./dist/styles/base.css"
14
+ },
15
+ "./styles/rich.css": {
16
+ "import": "./dist/styles/rich.css"
14
17
  }
15
18
  },
16
19
  "files": [
@@ -26,7 +29,7 @@
26
29
  "clean": "rimraf dist",
27
30
  "build:types": "tsc --project tsconfig.build.json",
28
31
  "build:js": "babel src --extensions .ts,.tsx --ignore **/*.d.ts --out-dir dist/cjs",
29
- "build:styles": "sass src/styles/style.scss:dist/styles/style.css --no-source-map --style compressed",
32
+ "build:styles": "sass src/styles/base.scss:dist/styles/base.css --no-source-map --style compressed && sass src/styles/rich.scss:dist/styles/rich.css --no-source-map --style compressed",
30
33
  "build": "pnpm run clean && pnpm run build:types && pnpm run build:styles && pnpm run build:js",
31
34
  "start": "pnpm run build && node dist/cjs/index.js",
32
35
  "test": "jest",
package/dist/styles/style.css DELETED
@@ -1 +0,0 @@
1
- @media screen and (max-width: 576px){pre>code{padding:1rem .8rem;font-size:.85em}}.nbcontent{--background: oklch(100% 0 0deg);--foreground: oklch(14.1% 0.005 285.823deg);--primary: oklch(21% 0.006 285.885deg);--primary-foreground: oklch(98.5% 0 0deg);--secondary: oklch(96.7% 0.001 286.375deg);--secondary-foreground: oklch(21% 0.006 285.885deg);--muted: oklch(96.7% 0.001 286.375deg);--muted-foreground: oklch(55.2% 0.016 285.938deg);--accent: oklch(96.7% 0.001 286.375deg);--accent-foreground: oklch(21% 0.006 285.885deg);--destructive: oklch(57.7% 0.245 27.325deg);--border: oklch(92% 0.004 286.32deg);--input: oklch(92% 0.004 286.32deg);--ring: oklch(70.5% 0.015 286.067deg);--link: oklch(45.2% 0.313214 264.052deg);--warning: oklch(97.54% 0.025552 84.593deg);--warning-foreground: oklch(83.04% 0.1459 74.36deg);--danger: oklch(96.56% 0.0177 4.51deg);--danger-foreground: oklch(72.71% 0.1684 24.66deg);--rounded-xs: 4px;--rounded-sm: 7px;--rounded-md: 10px;--rounded-lg: 14px;--rounded-full: 99rem;line-height:1.8;background-color:var(--background);color:var(--foreground)}.nbcontent>*:first-child{margin-top:0}.nbcontent i,.nbcontent cite,.nbcontent em,.nbcontent var{font-style:italic}.nbcontent strong{font-weight:bold}.nbcontent a{color:var(--link)}.nbcontent a:hover{text-decoration:underline}.nbcontent p+p{margin-top:1.2em}.nbcontent h1,.nbcontent h2,.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{font-weight:bold}.nbcontent h1+p,.nbcontent h2+p,.nbcontent h3+p,.nbcontent h4+p,.nbcontent h5+p,.nbcontent h6+p{margin-top:.2em}.nbcontent h1,.nbcontent h2{margin-top:1.9em;margin-bottom:1rem;padding-bottom:.1em;border-bottom:solid 1px var(--border)}.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{margin-top:1.8em;margin-bottom:.4em}.nbcontent h1{font-size:1.7em}.nbcontent h2{font-size:1.5em}.nbcontent h3{font-size:1.3em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.9em}@media screen and (max-width: 576px){.nbcontent h1{font-size:1.6em}.nbcontent h2{font-size:1.4em}.nbcontent h3{font-size:1.2em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.85em}}.nbcontent ul,.nbcontent ol{margin:1.4rem 0;line-height:1.6}.nbcontent ul>li,.nbcontent ol>li{margin:.4rem 0}.nbcontent ul ul,.nbcontent ul ol,.nbcontent ol ul,.nbcontent ol ol{margin:.2em 0}.nbcontent ul p,.nbcontent ol p{margin:0}.nbcontent ul{padding-left:1.8em}.nbcontent ul>li{list-style:disc}.nbcontent ul>li::marker{font-size:1.1em}.nbcontent ol{padding-left:1.7em}.nbcontent ol>li{list-style:decimal;padding-left:.2em}.nbcontent ol>li::marker{font-weight:600;letter-spacing:-0.05em}.nbcontent .contains-task-list .task-list-item{list-style:none}.nbcontent .task-list-item-checkbox{margin-left:-1.5em;font-size:1em;pointer-events:none}.nbcontent code{padding:.2em .4em;background:var(--secondary);font-size:.85em;border-radius:var(--rounded-xs);vertical-align:.08em;color:var(--foreground)}.nbcontent code,.nbcontent .code-filename{font-family:"JetBrains Mono","Fira Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Cascadia Code","Source Code Pro",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-font-smoothing:antialiased}.nbcontent .code-container{position:relative;margin:1.3rem 0}.nbcontent .code-filename{display:table;max-width:100%;background:var(--primary);color:var(--primary-foreground);font-size:12px;line-height:1.3;border-radius:var(--rounded-xs) var(--rounded-xs) 0 0;padding:6px 12px 20px;margin-bottom:-24px}.nbcontent .code-filename-container+pre{border-top-left-radius:0}.nbcontent pre{margin:1.3rem 0;background:var(--primary);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rounded-md);word-break:normal;word-wrap:normal;display:flex}.nbcontent pre:after{content:"";width:8px;flex-shrink:0}.nbcontent pre code{margin:0;padding:0;background:rgba(0,0,0,0);font-size:.9em}.nbcontent pre>code{display:block;padding:1.1rem}.nbcontent table{margin:1.2rem auto;width:auto;border-collapse:collapse;font-size:.95em;line-height:1.5;word-break:normal;display:block;overflow:auto;-webkit-overflow-scrolling:touch}.nbcontent th,.nbcontent td{padding:.6rem;border:solid 1px var(--border);background:var(--background)}.nbcontent th{font-weight:700;background:var(--secondary)}.nbcontent img:not(.emoji){margin:1.5rem auto;display:table;max-width:100%;height:auto}.nbcontent img+br{display:none}.nbcontent img~em{display:block;margin:-1rem auto 0;line-height:1.3;text-align:center;color:var(--muted-foreground);font-size:.92em}.nbcontent a:has(img){display:table;margin:0 auto}.nbcontent hr{border-top:2px solid var(--border);margin:2.5rem 0}.nbcontent blockquote{font-size:.97em;margin:1.4rem 0;border-left:solid 3px var(--border);padding:2px 0 2px .7em;color:var(--muted-foreground)}.nbcontent blockquote p{margin:1rem 0}.nbcontent blockquote>:first-child{margin-top:0}.nbcontent blockquote>:last-child{margin-bottom:0}.nbcontent blockquote.twitter-tweet{display:none}.nbcontent details{font-size:.95em;margin:1rem 0;line-height:1.7}.nbcontent summary{cursor:pointer;outline:0;padding:.7em .7em .7em .9em;border:solid 1px var(--border);color:var(--primary);font-size:.9em;border-radius:var(--rounded-sm);background:var(--background)}.nbcontent summary::-webkit-details-marker{color:var(--muted-foreground)}.nbcontent details[open]>summary{border-radius:var(--rounded-sm) var(--rounded-sm) 0 0;box-shadow:none;background:var(--background);border-bottom:none}.nbcontent .details-content{padding:.5em .9em;border:solid 1px var(--border);border-radius:0 0 var(--rounded-lg) var(--rounded-lg);background:var(--background)}.nbcontent .details-content>*{margin:.5em 0}.nbcontent .bubble{display:flex;align-items:center;gap:1rem;margin:1rem 0}.nbcontent .bubble img{width:60px;height:60px;border-radius:50%;border:2px solid var(--border)}.nbcontent .bubble .bubble-content{position:relative;width:100%;padding:.5rem .8rem;color:var(--foreground);background-color:var(--secondary);border-radius:5px}.nbcontent .bubble .bubble-content::before,.nbcontent .bubble .bubble-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%)}.nbcontent .bubble .bubble-content::before{background-color:var(--secondary)}.nbcontent .bubble .bubble-content::after{left:-9px;background-color:var(--secondary)}.nbcontent .bubble.right{flex-direction:row-reverse}.nbcontent .bubble.right .bubble-content::before,.nbcontent .bubble.right .bubble-content::after{left:auto;right:-12px;clip-path:polygon(0 0, 100% 50%, 0 100%)}.nbcontent .bubble.right .bubble-content::after{left:auto;right:-9px}.nbcontent .bubble-image{display:flex;align-items:center;gap:1rem;margin:1rem 0}.nbcontent .bubble-image .bubble-image-wrapper,.nbcontent .bubble-image .bubble-image-content{flex-basis:50%}.nbcontent .bubble-image .bubble-image-wrapper{display:flex;align-items:center;justify-content:center;max-width:100%;border:2px solid var(--border);border-radius:5px}.nbcontent .bubble-image .bubble-image-wrapper img{width:100%;height:auto;margin:0}.nbcontent .bubble-image .bubble-image-content{position:relative;width:100%;padding:.5rem .8rem;color:var(--foreground);background-color:var(--secondary);border-radius:5px}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%);background-color:var(--secondary)}.nbcontent .bubble-image .bubble-image-content::after{left:-9px}@media screen and (max-width: 768px){.nbcontent .bubble-image{flex-direction:column}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{top:-12px;left:50%;width:28px;height:12px;clip-path:polygon(50% 0, 0 100%, 100% 100%);transform:translateX(-50%)}.nbcontent .bubble-image .bubble-image-content::after{top:-9px}}.nbcontent .box{margin:1.2rem 0}.nbcontent .box.box1{position:relative;border:1px solid var(--border);border-radius:var(--rounded-sm);padding:1rem}.nbcontent .box.box1 span{position:absolute;top:0;left:1rem;font-size:1.2em;color:var(--foreground);background-color:var(--background);padding:0 .5em;transform:translateY(-50%)}.nbcontent .box.box2{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--secondary)}.nbcontent .box.box3{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--warning-foreground)}.nbcontent .box.box3 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold}.nbcontent .box.box3 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--warning-foreground);background-color:var(--warning-foreground);border-radius:50%}.nbcontent .box.box3 .icon::before,.nbcontent .box.box3 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box3 .icon::before{top:2px;height:2px}.nbcontent .box.box3 .icon::after{height:8px;bottom:2px}.nbcontent .box.box4{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--danger-foreground)}.nbcontent .box.box4 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold}.nbcontent .box.box4 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--danger-foreground);background-color:var(--danger-foreground);border-radius:50%}.nbcontent .box.box4 .icon::before,.nbcontent .box.box4 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box4 .icon::before{top:2px;height:2px}.nbcontent .box.box4 .icon::after{height:8px;bottom:2px}.nbcontent .box.box5{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--warning)}.dark .nbcontent .box.box5{color:var(--background)}.nbcontent .box.box5 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold}.nbcontent .box.box5 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--warning-foreground);background-color:var(--warning-foreground);border-radius:50%}.nbcontent .box.box5 .icon::before,.nbcontent .box.box5 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box5 .icon::before{top:2px;height:2px}.nbcontent .box.box5 .icon::after{height:8px;bottom:2px}.nbcontent .box.box6{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--danger)}.dark .nbcontent .box.box6{color:var(--background)}.nbcontent .box.box6 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold}.nbcontent .box.box6 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--danger-foreground);background-color:var(--danger-foreground);border-radius:50%}.nbcontent .box.box6 .icon::before,.nbcontent .box.box6 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box6 .icon::before{top:2px;height:2px}.nbcontent .box.box6 .icon::after{height:8px;bottom:2px}.nbcontent .external-link{display:inline-flex;align-items:center;gap:.3em;color:var(--link)}.nbcontent .external-link::after{content:"";display:inline-block;width:.9em;height:.9em;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;background-color:var(--link);vertical-align:-0.125em;position:relative;top:-0.05em}.dark .nbcontent{--background: oklch(14.1% 0.005 285.823deg);--foreground: oklch(98.5% 0 0deg);--primary: oklch(92% 0.004 286.32deg);--primary-foreground: oklch(21% 0.006 285.885deg);--secondary: oklch(27.4% 0.006 286.033deg);--secondary-foreground: oklch(98.5% 0 0deg);--muted: oklch(27.4% 0.006 286.033deg);--muted-foreground: oklch(70.5% 0.015 286.067deg);--accent: oklch(27.4% 0.006 286.033deg);--accent-foreground: oklch(98.5% 0 0deg);--destructive: oklch(70.4% 0.191 22.216deg);--border: oklch(100% 0 0deg / 0.1);--input: oklch(100% 0 0deg / 0.15);--ring: oklch(55.2% 0.016 285.938deg);--link: oklch(45.2% 0.313214 264.052deg);--warning: oklch(97.54% 0.025552 84.593deg);--warning-foreground: oklch(83.04% 0.1459 74.36deg);--danger: oklch(96.56% 0.0177 4.51deg);--danger-foreground: oklch(72.71% 0.1684 24.66deg);--rounded-xs: 4px;--rounded-sm: 7px;--rounded-md: 10px;--rounded-lg: 14px;--rounded-full: 99rem}