@superlc/md-core 0.1.0

package/dist/styles.css

@@ -0,0 +1,522 @@
+/**
+ * @tc/md-core 默认样式
+ * 
+ * 使用方法：
+ * import '@tc/md-core/styles.css';
+ * <div class="markdown-body">...</div>
+ * 
+ * 定制主题：
+ * :root { --md-color-primary: red; }
+ * 
+ * 强制暗黑/浅色：
+ * <div class="markdown-body md-dark">...</div>
+ */
+
+/* ========================================
+   CSS 变量定义 - 浅色模式（默认）
+   ======================================== */
+:root,
+.md-light {
+    /* 基础颜色 */
+    --md-color-text: #24292f;
+    --md-color-text-muted: #656d76;
+    --md-color-primary: #0969da;
+    --md-color-bg: #ffffff;
+    --md-color-border: #d0d7de;
+
+    /* 代码 */
+    --md-color-bg-muted: rgba(175, 184, 193, 0.2);
+    --md-color-bg-code-block: #f6f8fa;
+
+    /* 表格 */
+    --md-color-bg-table-header: rgba(175, 184, 193, 0.2);
+    --md-color-bg-table-row: rgba(234, 238, 242, 0.5);
+
+    /* 引用 */
+    --md-color-blockquote-border: rgba(175, 184, 193, 0.4);
+
+    /* 字体 */
+    --md-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+    --md-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    --md-font-size-base: 14px;
+    --md-line-height: 1.5;
+
+    /* 圆角 */
+    --md-radius: 6px;
+    --md-radius-sm: 4px;
+
+    /* 图片骨架屏 */
+    --md-skeleton-bg: #e8e8e8;
+    --md-skeleton-shine: #f5f5f5;
+    --md-skeleton-icon: #bdbdbd;
+    --md-skeleton-icon-detail: #9e9e9e;
+
+    /* 代码高亮 - 浅色 */
+    --md-hljs-bg: #f6f8fa;
+    --md-hljs-text: #24292f;
+    --md-hljs-keyword: #cf222e;
+    --md-hljs-string: #0a3069;
+    --md-hljs-comment: #6e7781;
+    --md-hljs-function: #8250df;
+    --md-hljs-number: #0550ae;
+
+    /* Pending 状态 */
+    --md-pending-border-color: #0969da;
+}
+
+/* ========================================
+   暗黑模式 - 系统偏好
+   ======================================== */
+@media (prefers-color-scheme: dark) {
+    :root:not(.md-light) {
+        --md-color-text: #e6edf3;
+        --md-color-text-muted: #8b949e;
+        --md-color-primary: #4493f8;
+        --md-color-bg: #0d1117;
+        --md-color-border: #30363d;
+
+        --md-color-bg-muted: rgba(110, 118, 129, 0.4);
+        --md-color-bg-code-block: #161b22;
+
+        --md-color-bg-table-header: rgba(110, 118, 129, 0.4);
+        --md-color-bg-table-row: rgba(110, 118, 129, 0.1);
+
+        --md-color-blockquote-border: rgba(110, 118, 129, 0.4);
+
+        --md-skeleton-bg: #21262d;
+        --md-skeleton-shine: #30363d;
+        --md-skeleton-icon: #484f58;
+        --md-skeleton-icon-detail: #6e7681;
+
+        --md-hljs-bg: #161b22;
+        --md-hljs-text: #e6edf3;
+        --md-hljs-keyword: #ff7b72;
+        --md-hljs-string: #a5d6ff;
+        --md-hljs-comment: #8b949e;
+        --md-hljs-function: #d2a8ff;
+        --md-hljs-number: #79c0ff;
+
+        --md-pending-border-color: #4493f8;
+    }
+}
+
+/* ========================================
+   暗黑模式 - 手动强制（优先级最高）
+   ======================================== */
+.md-dark {
+    --md-color-text: #e6edf3;
+    --md-color-text-muted: #8b949e;
+    --md-color-primary: #4493f8;
+    --md-color-bg: #0d1117;
+    --md-color-border: #30363d;
+
+    --md-color-bg-muted: rgba(110, 118, 129, 0.4);
+    --md-color-bg-code-block: #161b22;
+
+    --md-color-bg-table-header: rgba(110, 118, 129, 0.4);
+    --md-color-bg-table-row: rgba(110, 118, 129, 0.1);
+
+    --md-color-blockquote-border: rgba(110, 118, 129, 0.4);
+
+    --md-skeleton-bg: #21262d;
+    --md-skeleton-shine: #30363d;
+    --md-skeleton-icon: #484f58;
+    --md-skeleton-icon-detail: #6e7681;
+
+    --md-hljs-bg: #161b22;
+    --md-hljs-text: #e6edf3;
+    --md-hljs-keyword: #ff7b72;
+    --md-hljs-string: #a5d6ff;
+    --md-hljs-comment: #8b949e;
+    --md-hljs-function: #d2a8ff;
+    --md-hljs-number: #79c0ff;
+
+    --md-pending-border-color: #4493f8;
+}
+
+/* ========================================
+   Markdown 容器
+   ======================================== */
+.markdown-body {
+    font-family: var(--md-font-family);
+    font-size: var(--md-font-size-base);
+    line-height: var(--md-line-height);
+    color: var(--md-color-text);
+    background-color: var(--md-color-bg);
+    word-wrap: break-word;
+}
+
+/* 子元素间距 */
+.markdown-body>*+* {
+    margin-top: 1rem;
+}
+
+/* 首个子元素无顶部 margin */
+.markdown-body>*:first-child {
+    margin-top: 0;
+}
+
+/* 最后子元素无底部 margin */
+.markdown-body>*:last-child {
+    margin-bottom: 0;
+}
+
+/* ========================================
+   标题
+   ======================================== */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--md-color-text);
+}
+
+/* h1: 1.875rem (30px) */
+.markdown-body h1 {
+    font-size: 1.875rem;
+}
+
+/* h2: 1.5rem (24px) */
+.markdown-body h2 {
+    font-size: 1.5rem;
+}
+
+/* h3: 1.25rem (20px) */
+.markdown-body h3 {
+    font-size: 1.25rem;
+}
+
+/* h4: 1.125rem (18px) */
+.markdown-body h4 {
+    font-size: 1.125rem;
+}
+
+/* h5: 1rem (16px) */
+.markdown-body h5 {
+    font-size: 1rem;
+}
+
+/* h6: 0.875rem (14px) */
+.markdown-body h6 {
+    font-size: 0.875rem;
+}
+
+/* ========================================
+   段落
+   ======================================== */
+.markdown-body p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* ========================================
+   链接
+   ======================================== */
+.markdown-body a {
+    color: var(--md-color-primary);
+    text-decoration: underline;
+    overflow-wrap: anywhere;
+}
+
+.markdown-body a:hover {
+    opacity: 0.8;
+}
+
+/* ========================================
+   粗体
+   ======================================== */
+.markdown-body strong {
+    font-weight: 600;
+}
+
+/* ========================================
+   行内代码
+   ======================================== */
+.markdown-body code {
+    background-color: var(--md-color-bg-muted);
+    border-radius: var(--md-radius-sm);
+    padding: 0.125rem 0.375rem;
+    font-size: 0.875rem;
+    font-family: var(--md-font-family-mono);
+}
+
+/* ========================================
+   代码块
+   ======================================== */
+.markdown-body pre {
+    margin-top: 0;
+    margin-bottom: 0;
+    background-color: var(--md-color-bg-code-block);
+    border-radius: var(--md-radius);
+    padding: 1rem;
+    overflow-x: auto;
+}
+
+.markdown-body pre code {
+    background: transparent;
+    padding: 0;
+    font-size: 0.875rem;
+    border-radius: 0;
+    line-height: 1.45;
+}
+
+/* ========================================
+   引用块
+   ======================================== */
+.markdown-body blockquote {
+    margin: 1rem 0;
+    padding: 0 0 0 1rem;
+    color: var(--md-color-text-muted);
+    border-left: 4px solid var(--md-color-blockquote-border);
+}
+
+.markdown-body blockquote>*:first-child {
+    margin-top: 0;
+}
+
+.markdown-body blockquote>*:last-child {
+    margin-bottom: 0;
+}
+
+/* ========================================
+   列表
+   ======================================== */
+.markdown-body ul,
+.markdown-body ol {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style-position: inside;
+    white-space: normal;
+}
+
+.markdown-body ul {
+    list-style-type: disc;
+}
+
+.markdown-body ol {
+    list-style-type: decimal;
+}
+
+/* 嵌套列表缩进 */
+.markdown-body li ul,
+.markdown-body li ol {
+    padding-left: 1.5rem;
+}
+
+/* 列表项 */
+.markdown-body li {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+/* 列表项内段落内联 */
+.markdown-body li>p {
+    display: inline;
+}
+
+/* ========================================
+   表格
+   ======================================== */
+.markdown-body table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 0;
+    border: 1px solid var(--md-color-border);
+    border-radius: var(--md-radius);
+    overflow: hidden;
+}
+
+.markdown-body thead {
+    background-color: var(--md-color-bg-table-header);
+}
+
+.markdown-body tbody {
+    background-color: var(--md-color-bg-table-row);
+}
+
+.markdown-body tr {
+    border-bottom: 1px solid var(--md-color-border);
+}
+
+.markdown-body tr:last-child {
+    border-bottom: none;
+}
+
+.markdown-body th {
+    padding: 0.5rem 1rem;
+    text-align: left;
+    font-weight: 600;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    border: none;
+}
+
+.markdown-body td {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    border: none;
+}
+
+/* ========================================
+   分割线
+   ======================================== */
+.markdown-body hr {
+    border: 0;
+    border-top: 1px solid var(--md-color-border);
+    margin: 1.5rem 0;
+}
+
+/* ========================================
+   图片
+   ======================================== */
+.markdown-body img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--md-radius);
+}
+
+/* ========================================
+   删除线
+   ======================================== */
+.markdown-body del {
+    color: var(--md-color-text-muted);
+    text-decoration: line-through;
+}
+
+/* ========================================
+   上标/下标
+   ======================================== */
+.markdown-body sup,
+.markdown-body sub {
+    font-size: 0.875rem;
+}
+
+/* ========================================
+   代码高亮 (highlight.js)
+   ======================================== */
+.markdown-body .hljs {
+    background: var(--md-hljs-bg);
+    color: var(--md-hljs-text);
+}
+
+.markdown-body .hljs-keyword,
+.markdown-body .hljs-selector-tag {
+    color: var(--md-hljs-keyword);
+}
+
+.markdown-body .hljs-string,
+.markdown-body .hljs-attr {
+    color: var(--md-hljs-string);
+}
+
+.markdown-body .hljs-comment {
+    color: var(--md-hljs-comment);
+}
+
+.markdown-body .hljs-function,
+.markdown-body .hljs-title {
+    color: var(--md-hljs-function);
+}
+
+.markdown-body .hljs-number {
+    color: var(--md-hljs-number);
+}
+
+/* ========================================
+   流式渲染 - Pending 状态
+   ======================================== */
+.markdown-body [data-pending="true"] {
+    position: relative;
+}
+
+.markdown-body [data-pending="true"]::after {
+    display: none;
+}
+
+.markdown-body pre[data-pending="true"]::after {
+    display: none;
+}
+
+/* ========================================
+   流式渲染 - 图片骨架屏
+   ======================================== */
+@keyframes md-image-shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+.md-image-container {
+    position: relative;
+    display: block;
+    border-radius: var(--md-radius);
+    overflow: hidden;
+}
+
+.md-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.md-image-skeleton {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--md-skeleton-bg);
+    background-image: linear-gradient(90deg, var(--md-skeleton-bg) 0%, var(--md-skeleton-shine) 50%, var(--md-skeleton-bg) 100%);
+    background-size: 200% 100%;
+    animation: md-image-shimmer 1.5s linear infinite;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--md-radius);
+    z-index: 1;
+    pointer-events: none;
+}
+
+.md-image-skeleton-icon {
+    fill: var(--md-skeleton-icon);
+}
+
+.md-image-skeleton-icon-detail {
+    fill: var(--md-skeleton-icon-detail);
+}
+
+/* ========================================
+   流式渲染 - 文本淡入动画
+   ======================================== */
+@keyframes md-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.md-animation-text {
+    color: inherit;
+}
+
+/* ========================================
+   KaTeX 错误样式覆盖
+   ======================================== */
+.katex-error {
+    color: inherit !important;
+}

package/dist/types.d.ts

@@ -0,0 +1,32 @@
+import { Pluggable } from 'unified';
+
+/**
+ * 插件配置
+ */
+export interface PluginConfig {
+    plugin: Pluggable;
+    options?: unknown;
+}
+/**
+ * Processor 配置选项
+ */
+export interface ProcessorOptions {
+    /** 启用 GFM（GitHub Flavored Markdown）扩展，默认 true */
+    gfm?: boolean;
+    /** 启用代码高亮，默认 true */
+    highlight?: boolean;
+    /** 启用数学公式渲染（LaTeX 语法），默认 false */
+    math?: boolean;
+    /** 自定义 remark 插件 */
+    remarkPlugins?: PluginConfig[];
+    /** 自定义 rehype 插件 */
+    rehypePlugins?: PluginConfig[];
+}
+/**
+ * 解析配置选项
+ */
+export interface ParseOptions extends ProcessorOptions {
+    /** Markdown 源文本 */
+    content: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB;IACpB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,oBAAoB;IACpB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@superlc/md-core",
+  "version": "0.1.0",
+  "description": "基于 unified 的 Markdown 解析核心库",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest",
+    "test:run": "vitest run"
+  },
+  "dependencies": {
+    "@types/hast": "^3.0.0",
+    "@types/mdast": "^4.0.0",
+    "hast-util-to-jsx-runtime": "^2.3.0",
+    "rehype-highlight": "^7.0.0",
+    "rehype-katex": "^7.0.1",
+    "rehype-stringify": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.0.0",
+    "unified": "^11.0.0",
+    "unist-util-visit": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "markdown",
+    "unified",
+    "remark",
+    "rehype",
+    "parser"
+  ],
+  "license": "MIT"
+}