@nakobase/nakobase-md-html 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 NakoBase
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# @nakobase/nakobase-md-html
+
+Convert Markdown to **sanitized HTML** and apply consistent styles – simple, secure, and styled.
+
+## Installation
+
+```bash
+# npm
+npm install @nakobase/nakobase-md-html
+
+# yarn
+yarn add @nakobase/nakobase-md-html
+
+# pnpm
+pnpm add @nakobase/nakobase-md-html
+```
+
+## Usage
+
+### Basic Usage
+
+```ts
+import { mdToHtml } from '@nakobase/nakobase-md-html';
+
+const html = mdToHtml(
+  `
+# Hello World
+
+This is a test of the markdown to html converter.
+`,
+  { codeHighlight: true }
+); // codeHighlight is optional, default is false
+
+console.log(html);
+```
+
+### Styles
+
+We have some default styles that are applied to the HTML.
+
+```ts
+import '@nakobase/nakobase-md-html/styles/style.css';
+
+import 'prismjs/themes/prism-okaidia.css'; // or any other prism theme if you want
+```
+
+Add `.nbcontents` to the container of the markdown.
+
+```html
+<div class="nbcontent">
+  <!-- HTML parsed from markdown -->
+</div>
+```

package/dist/esm/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const ARGUMENT_DIVIDER = "|";
+export declare const CONTAINER_TYPES: {
+    readonly TOC: "toc";
+    readonly SOCIAL_EMBED: "socialEmbed";
+    readonly TEXT_LINK: "textLink";
+    readonly BUTTON_LINK: "buttonLink";
+    readonly IMAGE: "image";
+    readonly ARTICLE: "article";
+    readonly LIST: "list";
+    readonly BOX: "box";
+    readonly TABLE: "table";
+    readonly TABLE2: "table2";
+    readonly NOTE: "note";
+    readonly ALERT: "alert";
+    readonly EC_BUTTONS: "ecButtons";
+    readonly SPEECH_BUBBLE_IMAGE: "speechBubbleImage";
+    readonly DETAILS: "details";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/esm/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgBlB,CAAC"}

package/dist/esm/constants.js

@@ -0,0 +1,18 @@
+export const ARGUMENT_DIVIDER = '|';
+export const CONTAINER_TYPES = {
+  TOC: 'toc',
+  SOCIAL_EMBED: 'socialEmbed',
+  TEXT_LINK: 'textLink',
+  BUTTON_LINK: 'buttonLink',
+  IMAGE: 'image',
+  ARTICLE: 'article',
+  LIST: 'list',
+  BOX: 'box',
+  TABLE: 'table',
+  TABLE2: 'table2',
+  NOTE: 'note',
+  ALERT: 'alert',
+  EC_BUTTONS: 'ecButtons',
+  SPEECH_BUBBLE_IMAGE: 'speechBubbleImage',
+  DETAILS: 'details'
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+import { MdToHtmlOptions } from './types';
+export declare const mdToHtml: (markdown: string, options?: MdToHtmlOptions) => string;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAa1C,eAAO,MAAM,QAAQ,GACnB,UAAU,MAAM,EAChB,UAAU,eAAe,KACxB,MA2BF,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import MarkdownIt from 'markdown-it';
+import { sanitize } from './sanitizer';
+import { boxOptions, detailsOptions } from './utils/md-container';
+import { mdRendererFence } from './utils/md-renderer-fence';
+import { CONTAINER_TYPES } from './constants';
+
+// plugins
+const MdItImSize = require('@steelydylan/markdown-it-imsize').default;
+const MdItInlineComments = require('markdown-it-inline-comments');
+const MdItContainer = require('markdown-it-container');
+const MdItTaskLists = require('markdown-it-task-lists');
+export const mdToHtml = (markdown, options) => {
+  const {
+    codeHighlight
+  } = options || {};
+  if (!(markdown && markdown.length)) return '';
+  const md = MarkdownIt({
+    breaks: true,
+    linkify: true
+  });
+  md.linkify.set({
+    fuzzyLink: false
+  });
+  md.linkify.set({
+    fuzzyEmail: false
+  });
+  md.use(MdItInlineComments).use(MdItImSize).use(MdItTaskLists, {
+    enabled: true
+  }).use(MdItContainer, CONTAINER_TYPES.DETAILS, detailsOptions).use(MdItContainer, CONTAINER_TYPES.BOX, boxOptions);
+  if (codeHighlight) {
+    md.use(mdRendererFence);
+  }
+  return sanitize(md.render(markdown));
+};

package/dist/esm/sanitizer.d.ts

@@ -0,0 +1,2 @@
+export declare const sanitize: (html: string) => string;
+//# sourceMappingURL=sanitizer.d.ts.map

package/dist/esm/sanitizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitizer.d.ts","sourceRoot":"","sources":["../../src/sanitizer.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,MA8BpC,CAAC"}

package/dist/esm/sanitizer.js

@@ -0,0 +1,41 @@
+// sanitizer.ts
+import sanitizeHtml, { defaults } from 'sanitize-html';
+const extendedTags = ['iframe', 'code', 'details', 'summary', 'circle', 'img', 'input', 'pre', 'span'];
+const extendedAttributes = {
+  a: [...(defaults.allowedAttributes.a || []), 'id', 'class', 'data-line'],
+  iframe: ['src', 'width', 'height', 'allow', 'sandbox', 'frameborder'],
+  input: ['type', 'checked', 'disabled', 'readonly', 'value', 'class'],
+  ul: ['class'],
+  ol: ['class'],
+  li: ['class'],
+  div: ['class'],
+  pre: ['class'],
+  code: [...(defaults.allowedAttributes.code || []), 'class'],
+  span: ['class']
+};
+export const sanitize = html => sanitizeHtml(html, {
+  allowedTags: [...defaults.allowedTags, ...extendedTags],
+  allowedAttributes: {
+    ...defaults.allowedAttributes,
+    ...extendedAttributes
+  },
+  allowedSchemes: ['http', 'https', 'mailto', 'tel'],
+  allowedSchemesByTag: {
+    iframe: ['https'],
+    img: ['http', 'https', 'data']
+  },
+  allowedStyles: {
+    '*': {
+      width: [/^\d+(?:px|%)$/],
+      height: [/^\d+(?:px|%)$/],
+      'text-align': [/^(?:left|right|center|justify)$/]
+    }
+  },
+  transformTags: {
+    a: sanitizeHtml.simpleTransform('a', {
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    })
+  },
+  disallowedTagsMode: 'discard'
+});

package/dist/esm/types.d.ts

@@ -0,0 +1,4 @@
+export interface MdToHtmlOptions {
+    codeHighlight?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/types.d.ts.map

@@ -0,0 +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"}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/highlight.d.ts

@@ -0,0 +1,2 @@
+export declare function highlightCode(text: string, lang: string): string;
+//# sourceMappingURL=highlight.d.ts.map

package/dist/esm/utils/highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../src/utils/highlight.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAIhE"}

package/dist/esm/utils/highlight.js

@@ -0,0 +1,304 @@
+import Prism from "prismjs/components/prism-core";
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-regex";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-abap";
+import "prismjs/components/prism-abnf";
+import "prismjs/components/prism-actionscript";
+import "prismjs/components/prism-ada";
+import "prismjs/components/prism-agda";
+import "prismjs/components/prism-al";
+import "prismjs/components/prism-antlr4";
+import "prismjs/components/prism-apacheconf";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-apex";
+import "prismjs/components/prism-apl";
+import "prismjs/components/prism-applescript";
+import "prismjs/components/prism-aql";
+import "prismjs/components/prism-c";
+import "prismjs/components/prism-cpp";
+import "prismjs/components/prism-arduino";
+import "prismjs/components/prism-arff";
+import "prismjs/components/prism-armasm";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-arturo";
+import "prismjs/components/prism-asciidoc";
+import "prismjs/components/prism-csharp";
+import "prismjs/components/prism-aspnet";
+import "prismjs/components/prism-asm6502";
+import "prismjs/components/prism-asmatmel";
+import "prismjs/components/prism-autohotkey";
+import "prismjs/components/prism-autoit";
+import "prismjs/components/prism-avisynth";
+import "prismjs/components/prism-avro-idl";
+import "prismjs/components/prism-awk";
+import "prismjs/components/prism-basic";
+import "prismjs/components/prism-batch";
+import "prismjs/components/prism-bbcode";
+import "prismjs/components/prism-bbj";
+import "prismjs/components/prism-bicep";
+import "prismjs/components/prism-birb";
+import "prismjs/components/prism-bison";
+import "prismjs/components/prism-bnf";
+import "prismjs/components/prism-bqn";
+import "prismjs/components/prism-brainfuck";
+import "prismjs/components/prism-brightscript";
+import "prismjs/components/prism-bro";
+import "prismjs/components/prism-bsl";
+import "prismjs/components/prism-cfscript";
+import "prismjs/components/prism-chaiscript";
+import "prismjs/components/prism-cil";
+import "prismjs/components/prism-cilkc";
+import "prismjs/components/prism-cilkcpp";
+import "prismjs/components/prism-clojure";
+import "prismjs/components/prism-cmake";
+import "prismjs/components/prism-cobol";
+import "prismjs/components/prism-coffeescript";
+import "prismjs/components/prism-concurnas";
+import "prismjs/components/prism-csp";
+import "prismjs/components/prism-cooklang";
+import "prismjs/components/prism-coq";
+import "prismjs/components/prism-ruby";
+import "prismjs/components/prism-crystal";
+import "prismjs/components/prism-css-extras";
+import "prismjs/components/prism-csv";
+import "prismjs/components/prism-cue";
+import "prismjs/components/prism-cypher";
+import "prismjs/components/prism-d";
+import "prismjs/components/prism-dart";
+import "prismjs/components/prism-dataweave";
+import "prismjs/components/prism-dax";
+import "prismjs/components/prism-dhall";
+import "prismjs/components/prism-diff";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/components/prism-django";
+import "prismjs/components/prism-dns-zone-file";
+import "prismjs/components/prism-docker";
+import "prismjs/components/prism-dot";
+import "prismjs/components/prism-ebnf";
+import "prismjs/components/prism-editorconfig";
+import "prismjs/components/prism-eiffel";
+import "prismjs/components/prism-ejs";
+import "prismjs/components/prism-elixir";
+import "prismjs/components/prism-elm";
+import "prismjs/components/prism-lua";
+import "prismjs/components/prism-etlua";
+import "prismjs/components/prism-erb";
+import "prismjs/components/prism-erlang";
+import "prismjs/components/prism-excel-formula";
+import "prismjs/components/prism-fsharp";
+import "prismjs/components/prism-factor";
+import "prismjs/components/prism-false";
+import "prismjs/components/prism-firestore-security-rules";
+import "prismjs/components/prism-flow";
+import "prismjs/components/prism-fortran";
+import "prismjs/components/prism-ftl";
+import "prismjs/components/prism-gml";
+import "prismjs/components/prism-gap";
+import "prismjs/components/prism-gcode";
+import "prismjs/components/prism-gdscript";
+import "prismjs/components/prism-gedcom";
+import "prismjs/components/prism-gettext";
+import "prismjs/components/prism-gherkin";
+import "prismjs/components/prism-git";
+import "prismjs/components/prism-glsl";
+import "prismjs/components/prism-gn";
+import "prismjs/components/prism-linker-script";
+import "prismjs/components/prism-go";
+import "prismjs/components/prism-go-module";
+import "prismjs/components/prism-gradle";
+import "prismjs/components/prism-graphql";
+import "prismjs/components/prism-groovy";
+import "prismjs/components/prism-less";
+import "prismjs/components/prism-scss";
+import "prismjs/components/prism-textile";
+import "prismjs/components/prism-haml";
+import "prismjs/components/prism-handlebars";
+import "prismjs/components/prism-haskell";
+import "prismjs/components/prism-haxe";
+import "prismjs/components/prism-hcl";
+import "prismjs/components/prism-hlsl";
+import "prismjs/components/prism-hoon";
+import "prismjs/components/prism-hpkp";
+import "prismjs/components/prism-hsts";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-uri";
+import "prismjs/components/prism-http";
+import "prismjs/components/prism-ichigojam";
+import "prismjs/components/prism-icon";
+import "prismjs/components/prism-icu-message-format";
+import "prismjs/components/prism-idris";
+import "prismjs/components/prism-ignore";
+import "prismjs/components/prism-inform7";
+import "prismjs/components/prism-ini";
+import "prismjs/components/prism-io";
+import "prismjs/components/prism-j";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-php";
+import "prismjs/components/prism-javadoclike";
+import "prismjs/components/prism-scala";
+import "prismjs/components/prism-javadoc";
+import "prismjs/components/prism-javastacktrace";
+import "prismjs/components/prism-jexl";
+import "prismjs/components/prism-jolie";
+import "prismjs/components/prism-jq";
+import "prismjs/components/prism-js-templates";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-jsdoc";
+import "prismjs/components/prism-n4js";
+import "prismjs/components/prism-js-extras";
+import "prismjs/components/prism-json5";
+import "prismjs/components/prism-jsonp";
+import "prismjs/components/prism-jsstacktrace";
+import "prismjs/components/prism-julia";
+import "prismjs/components/prism-keepalived";
+import "prismjs/components/prism-keyman";
+import "prismjs/components/prism-kotlin";
+import "prismjs/components/prism-kumir";
+import "prismjs/components/prism-kusto";
+import "prismjs/components/prism-latex";
+import "prismjs/components/prism-latte";
+import "prismjs/components/prism-scheme";
+import "prismjs/components/prism-lilypond";
+import "prismjs/components/prism-liquid";
+import "prismjs/components/prism-lisp";
+import "prismjs/components/prism-livescript";
+import "prismjs/components/prism-llvm";
+import "prismjs/components/prism-log";
+import "prismjs/components/prism-lolcode";
+import "prismjs/components/prism-magma";
+import "prismjs/components/prism-makefile";
+import "prismjs/components/prism-mata";
+import "prismjs/components/prism-matlab";
+import "prismjs/components/prism-maxscript";
+import "prismjs/components/prism-mel";
+import "prismjs/components/prism-mermaid";
+import "prismjs/components/prism-metafont";
+import "prismjs/components/prism-mizar";
+import "prismjs/components/prism-mongodb";
+import "prismjs/components/prism-monkey";
+import "prismjs/components/prism-moonscript";
+import "prismjs/components/prism-n1ql";
+import "prismjs/components/prism-nand2tetris-hdl";
+import "prismjs/components/prism-naniscript";
+import "prismjs/components/prism-nasm";
+import "prismjs/components/prism-neon";
+import "prismjs/components/prism-nevod";
+import "prismjs/components/prism-nginx";
+import "prismjs/components/prism-nim";
+import "prismjs/components/prism-nix";
+import "prismjs/components/prism-nsis";
+import "prismjs/components/prism-objectivec";
+import "prismjs/components/prism-ocaml";
+import "prismjs/components/prism-odin";
+import "prismjs/components/prism-opencl";
+import "prismjs/components/prism-openqasm";
+import "prismjs/components/prism-oz";
+import "prismjs/components/prism-parigp";
+import "prismjs/components/prism-parser";
+import "prismjs/components/prism-pascal";
+import "prismjs/components/prism-pascaligo";
+import "prismjs/components/prism-psl";
+import "prismjs/components/prism-pcaxis";
+import "prismjs/components/prism-peoplecode";
+import "prismjs/components/prism-perl";
+import "prismjs/components/prism-phpdoc";
+import "prismjs/components/prism-php-extras";
+import "prismjs/components/prism-plant-uml";
+import "prismjs/components/prism-plsql";
+import "prismjs/components/prism-powerquery";
+import "prismjs/components/prism-powershell";
+import "prismjs/components/prism-processing";
+import "prismjs/components/prism-prolog";
+import "prismjs/components/prism-promql";
+import "prismjs/components/prism-properties";
+import "prismjs/components/prism-protobuf";
+import "prismjs/components/prism-stylus";
+import "prismjs/components/prism-twig";
+import "prismjs/components/prism-pug";
+import "prismjs/components/prism-puppet";
+import "prismjs/components/prism-pure";
+import "prismjs/components/prism-purebasic";
+import "prismjs/components/prism-purescript";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-qsharp";
+import "prismjs/components/prism-q";
+import "prismjs/components/prism-qml";
+import "prismjs/components/prism-qore";
+import "prismjs/components/prism-r";
+import "prismjs/components/prism-racket";
+import "prismjs/components/prism-cshtml";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-reason";
+import "prismjs/components/prism-rego";
+import "prismjs/components/prism-renpy";
+import "prismjs/components/prism-rescript";
+import "prismjs/components/prism-rest";
+import "prismjs/components/prism-rip";
+import "prismjs/components/prism-roboconf";
+import "prismjs/components/prism-robotframework";
+import "prismjs/components/prism-rust";
+import "prismjs/components/prism-sas";
+import "prismjs/components/prism-sass";
+import "prismjs/components/prism-shell-session";
+import "prismjs/components/prism-smali";
+import "prismjs/components/prism-smalltalk";
+import "prismjs/components/prism-smarty";
+import "prismjs/components/prism-sml";
+import "prismjs/components/prism-solidity";
+import "prismjs/components/prism-solution-file";
+import "prismjs/components/prism-soy";
+import "prismjs/components/prism-turtle";
+import "prismjs/components/prism-sparql";
+import "prismjs/components/prism-splunk-spl";
+import "prismjs/components/prism-sqf";
+import "prismjs/components/prism-squirrel";
+import "prismjs/components/prism-stan";
+import "prismjs/components/prism-stata";
+import "prismjs/components/prism-iecst";
+import "prismjs/components/prism-supercollider";
+import "prismjs/components/prism-swift";
+import "prismjs/components/prism-systemd";
+import "prismjs/components/prism-t4-templating";
+import "prismjs/components/prism-t4-cs";
+import "prismjs/components/prism-vbnet";
+import "prismjs/components/prism-t4-vb";
+import "prismjs/components/prism-tap";
+import "prismjs/components/prism-tcl";
+import "prismjs/components/prism-tt2";
+import "prismjs/components/prism-toml";
+import "prismjs/components/prism-tremor";
+import "prismjs/components/prism-typoscript";
+import "prismjs/components/prism-unrealscript";
+import "prismjs/components/prism-uorazor";
+import "prismjs/components/prism-v";
+import "prismjs/components/prism-vala";
+import "prismjs/components/prism-velocity";
+import "prismjs/components/prism-verilog";
+import "prismjs/components/prism-vhdl";
+import "prismjs/components/prism-vim";
+import "prismjs/components/prism-visual-basic";
+import "prismjs/components/prism-warpscript";
+import "prismjs/components/prism-wasm";
+import "prismjs/components/prism-web-idl";
+import "prismjs/components/prism-wgsl";
+import "prismjs/components/prism-wiki";
+import "prismjs/components/prism-wolfram";
+import "prismjs/components/prism-wren";
+import "prismjs/components/prism-xeora";
+import "prismjs/components/prism-xml-doc";
+import "prismjs/components/prism-xojo";
+import "prismjs/components/prism-xquery";
+import "prismjs/components/prism-yang";
+import "prismjs/components/prism-zig";
+import { escapeHtml } from 'markdown-it/lib/common/utils';
+export function highlightCode(text, lang) {
+  const grammar = Prism.languages[lang];
+  if (!grammar) return escapeHtml(text);
+  return Prism.highlight(text, grammar, lang);
+}

package/dist/esm/utils/md-container.d.ts

@@ -0,0 +1,10 @@
+import type Token from 'markdown-it/lib/token';
+export declare const detailsOptions: {
+    validate: (params: string) => boolean;
+    render: (tokens: Token[], idx: number) => string;
+};
+export declare const boxOptions: {
+    validate: (params: string) => boolean;
+    render: (tokens: Token[], idx: number) => string;
+};
+//# sourceMappingURL=md-container.d.ts.map

package/dist/esm/utils/md-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-container.d.ts","sourceRoot":"","sources":["../../../src/utils/md-container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,uBAAuB,CAAC;AAK/C,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AAOF,eAAO,MAAM,UAAU;uBACO,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC"}

package/dist/esm/utils/md-container.js

@@ -0,0 +1,59 @@
+import { escapeHtml } from 'markdown-it/lib/common/utils';
+// ::: details Detail
+//   summary here
+// :::
+export const detailsOptions = {
+  validate: function (params) {
+    return /^details\s+(.*)$/.test(params.trim());
+  },
+  render: function (tokens, idx) {
+    const isOpeningTag = tokens[idx].nesting === 1;
+    const m = tokens[idx].info.trim().match(/^details\s+(.*)$/);
+    const summary = (m === null || m === void 0 ? void 0 : m[1]) || '';
+    if (isOpeningTag) {
+      return '<details><summary>' + escapeHtml(summary) + '</summary><div class="details-content">';
+    } else {
+      return '</div></details>\n';
+    }
+  }
+};
+
+// Box
+// ::: box1 title
+// markdown
+// :::
+//
+export const boxOptions = {
+  validate: function (params) {
+    return /^(box[1-6])(?:\s+(.*))?$/.test(params.trim());
+  },
+  render: function (tokens, idx) {
+    const isOpeningTag = tokens[idx].nesting === 1;
+    if (isOpeningTag) {
+      const m = tokens[idx].info.trim().match(/^(box[1-6])(?:\s+(.*))?$/);
+      if (!m) return '';
+      const boxType = m[1]; // box1, box2, etc.
+      const boxTitle = m[2] || ''; // title (optional)
+      return boxHtml(boxType, boxTitle);
+    } else {
+      return '</div>\n';
+    }
+  }
+};
+const boxHtml = (boxType, boxTitle) => {
+  switch (boxType) {
+    case 'box1':
+      return `<div class="box ${boxType}">${boxTitle ? `<span>${boxTitle}</span>` : ''}`;
+    case 'box2':
+      return `<div class="box ${boxType}">`;
+    case 'box3':
+      return `<div class="box ${boxType}"><div class="msg-container"><span class="icon"></span>${`<span>${boxTitle ? boxTitle : 'Note'}</span>`}</div>`;
+    case 'box4':
+      return `<div class="box ${boxType}"><div class="msg-container"><span class="icon"></span>${`<span>${boxTitle ? boxTitle : 'Alert'}</span>`}</div>`;
+    case 'box5':
+    case 'box6':
+      return `<div class="box ${boxType}"><div class="msg-container"><span class="icon"></span>${boxTitle ? `<span>${boxTitle}</span>` : ''}</div>`;
+    default:
+      return `<div class="box ${boxType}">${boxTitle ? `<span>${boxTitle}</span>` : ''}`;
+  }
+};

package/dist/esm/utils/md-renderer-fence.d.ts

@@ -0,0 +1,7 @@
+import MarkdownIt from 'markdown-it';
+export declare function parseInfo(str: string): {
+    lang: string;
+    fileName?: string;
+};
+export declare function mdRendererFence(md: MarkdownIt): void;
+//# sourceMappingURL=md-renderer-fence.d.ts.map

package/dist/esm/utils/md-renderer-fence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-renderer-fence.d.ts","sourceRoot":"","sources":["../../../src/utils/md-renderer-fence.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAsDrC,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAkBA;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,UAAU,QAoB7C"}

package/dist/esm/utils/md-renderer-fence.js

@@ -0,0 +1,74 @@
+import { escapeHtml } from 'markdown-it/lib/common/utils';
+import { highlightCode } from './highlight';
+function getHtml({
+  content,
+  className,
+  fileName,
+  line
+}) {
+  const escapedClass = escapeHtml(className);
+  return `<div class="code-container">${fileName ? `<div class="code-filename-container"><span class="code-filename">${escapeHtml(fileName)}</span></div>` : ''}<pre class="${escapedClass}"><code class="${escapedClass !== '' ? `${escapedClass} code-line` : 'code-line'}" ${line !== undefined ? `data-line="${line}"` : ''}>${content}</code></pre></div>`;
+}
+function getClassName({
+  lang = ''
+}) {
+  const isSafe = /^[\w-]{0,30}$/.test(lang);
+  if (!isSafe) return '';
+  return lang ? `language-${lang}` : '';
+}
+const fallbackLanguages = {
+  vue: 'html',
+  react: 'jsx',
+  fish: 'shell',
+  sh: 'shell',
+  cwl: 'yaml',
+  tf: 'hcl' // ref: https://github.com/PrismJS/prism/issues/1252
+};
+function normalizeLangName(str) {
+  if (!(str !== null && str !== void 0 && str.length)) return '';
+  const langName = str.toLocaleLowerCase();
+  return fallbackLanguages[langName] ?? langName;
+}
+export function parseInfo(str) {
+  if (str.trim() === '') {
+    return {
+      lang: '',
+      fileName: undefined
+    };
+  }
+
+  // NOTE: javascript:index.js => ["javascript", "index.js"]
+  const [langInfo, fileName] = str.split(':');
+  const langNames = langInfo.split(' ');
+  const langName = langNames[0];
+  return {
+    lang: normalizeLangName(langName),
+    fileName
+  };
+}
+export function mdRendererFence(md) {
+  // override fence
+  md.renderer.rules.fence = function (...args) {
+    var _tokens$idx$map;
+    const [tokens, idx] = args;
+    const {
+      info,
+      content
+    } = tokens[idx];
+    const {
+      lang,
+      fileName
+    } = parseInfo(info);
+    const className = getClassName({
+      lang
+    });
+    const highlightedContent = highlightCode(content, lang);
+    const fenceStart = (_tokens$idx$map = tokens[idx].map) === null || _tokens$idx$map === void 0 ? void 0 : _tokens$idx$map[0];
+    return getHtml({
+      content: highlightedContent,
+      className,
+      fileName,
+      line: fenceStart
+    });
+  };
+}

package/dist/styles/style.css

@@ -0,0 +1 @@
+@media screen and (max-width: 576px){pre>code{padding:1rem .8rem;font-size:.85em}}details{font-size:.95em;margin:1rem 0;line-height:1.7}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)}summary::-webkit-details-marker{color:var(--muted-foreground)}details[open]>summary{border-radius:var(--rounded-sm) var(--rounded-sm) 0 0;box-shadow:none;background:var(--background);border-bottom:none}.details-content{padding:.5em .9em;border:solid 1px var(--border);border-radius:0 0 var(--rounded-lg) var(--rounded-lg);background:var(--background)}.details-content>*{margin:.5em 0}.box{margin:1.2rem 0}.box.box1{position:relative;border:1px solid var(--border);border-radius:var(--rounded-sm);padding:1rem}.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%)}.box.box2{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--secondary)}.box.box3{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--warning-foreground)}.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}.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%}.box.box3 .icon::before,.box.box3 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.box.box3 .icon::before{top:2px;height:2px}.box.box3 .icon::after{height:8px;bottom:2px}.box.box4{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--danger-foreground)}.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}.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%}.box.box4 .icon::before,.box.box4 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.box.box4 .icon::before{top:2px;height:2px}.box.box4 .icon::after{height:8px;bottom:2px}.box.box5{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--warning)}.box.box5 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold}.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%}.box.box5 .icon::before,.box.box5 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.box.box5 .icon::before{top:2px;height:2px}.box.box5 .icon::after{height:8px;bottom:2px}.box.box6{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--danger)}.box.box6 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold}.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%}.box.box6 .icon::before,.box.box6 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.box.box6 .icon::before{top:2px;height:2px}.box.box6 .icon::after{height:8px;bottom:2px}.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:.3em;padding-bottom:.1em;border-bottom:solid 1px var(--border)}.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{margin-top:1.8em;margin-bottom:.3em}.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}.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/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@nakobase/nakobase-md-html",
+  "version": "1.0.0",
+  "description": "Convert Markdown to **sanitized HTML** and apply consistent styles – simple, secure, and styled.",
+  "type": "module",
+  "main": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "bin": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js"
+    },
+    "./styles/style.css": {
+      "import": "./dist/styles/style.css"
+    }
+  },
+  "files": [
+    "dist/esm",
+    "dist/styles",
+    "README.md",
+    "LICENSE"
+  ],
+  "workspaces": [
+    "test-app"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:types": "tsc --project tsconfig.esm.json",
+    "build:js": "babel src --extensions .ts,.tsx --ignore **/*.d.ts --out-dir dist/esm",
+    "build:styles": "sass src/styles/style.scss:dist/styles/style.css --no-source-map --style compressed",
+    "build": "pnpm run clean && pnpm run build:types && pnpm run build:styles && pnpm run build:js",
+    "start": "pnpm run build && node dist/esm/index.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepare": "husky"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nakobase/nakobase-md-html.git"
+  },
+  "homepage": "https://github.com/nakobase/nakobase-md-html#readme",
+  "bugs": {
+    "url": "https://github.com/nakobase/nakobase-md-html/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "github",
+    "cli",
+    "nakobase",
+    "markdown",
+    "html",
+    "nodejs"
+  ],
+  "author": "NakoBase",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^19.4.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^10.1.7",
+    "@semantic-release/npm": "^12.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/markdown-it": "^12.2.3",
+    "@types/markdown-it-container": "^2.0.10",
+    "@types/node": "^22.4.2",
+    "@types/prismjs": "^1.26.5",
+    "@types/sanitize-html": "^2.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
+    "babel-plugin-prismjs": "^2.1.0",
+    "cpx": "^1.5.0",
+    "eslint": "^9.9.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "husky": "^9.1.5",
+    "jest": "^29.7.0",
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "sass": "^1.89.0",
+    "semantic-release": "^24.1.0",
+    "ts-jest": "^29.3.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "@steelydylan/markdown-it-imsize": "^1.0.2",
+    "markdown-it": "^12.3.2",
+    "markdown-it-container": "^2.0.0",
+    "markdown-it-custom-block": "^1.0.0",
+    "markdown-it-inline-comments": "^1.0.1",
+    "markdown-it-task-lists": "^2.1.1",
+    "prismjs": "^1.30.0",
+    "sanitize-html": "^2.16.0"
+  }
+}