@cellgit/markdown-render 0.1.0

package/iOS_COLORS.md

@@ -0,0 +1,146 @@
+# iOS 系统颜色适配说明
+
+本项目已完全适配 iOS 系统颜色规范，使用系统第一主色（System Colors），确保与原生 iOS 应用视觉一致。
+
+## 颜色映射表
+
+### 亮色模式（Light Mode）
+
+| 元素 | CSS 变量 | 颜色值 | iOS 系统颜色 |
+|------|---------|--------|-------------|
+| 主要文字 | `--chat-text-color` | `#000000` | label |
+| 次要文字 | `--chat-secondary-text-color` | `rgba(60, 60, 67, 0.6)` | secondaryLabel |
+| 链接 | `--chat-link-color` | `#007AFF` | systemBlue |
+| 主背景 | `--chat-background` | `#FFFFFF` | systemBackground |
+| 次级背景 | `--chat-secondary-background` | `#F2F2F7` | secondarySystemBackground |
+| 三级背景 | `--chat-tertiary-background` | `#FFFFFF` | tertiarySystemBackground |
+| 代码块背景 | `--chat-code-bg` | `#F2F2F7` | secondarySystemBackground |
+| 代码块文字 | `--chat-code-color` | `#000000` | label |
+| 内联代码背景 | `--chat-inline-code-bg` | `rgba(0, 0, 0, 0.06)` | - |
+| 表格边框 | `--chat-table-border` | `rgba(60, 60, 67, 0.29)` | separator |
+| 表格背景 | `--chat-table-bg` | `#FFFFFF` | systemBackground |
+| 表格交替行 | `--chat-table-alt-bg` | `#F2F2F7` | secondarySystemBackground |
+
+### 暗色模式（Dark Mode）
+
+| 元素 | CSS 变量 | 颜色值 | iOS 系统颜色 |
+|------|---------|--------|-------------|
+| 主要文字 | `--chat-text-color` | `#FFFFFF` | label |
+| 次要文字 | `--chat-secondary-text-color` | `rgba(235, 235, 245, 0.6)` | secondaryLabel |
+| 链接 | `--chat-link-color` | `#0A84FF` | systemBlue |
+| 主背景 | `--chat-background` | `#000000` | systemBackground |
+| 次级背景 | `--chat-secondary-background` | `#1C1C1E` | secondarySystemBackground |
+| 三级背景 | `--chat-tertiary-background` | `#2C2C2E` | tertiarySystemBackground |
+| 代码块背景 | `--chat-code-bg` | `#1C1C1E` | secondarySystemBackground |
+| 代码块文字 | `--chat-code-color` | `#FFFFFF` | label |
+| 内联代码背景 | `--chat-inline-code-bg` | `rgba(255, 255, 255, 0.1)` | - |
+| 表格边框 | `--chat-table-border` | `rgba(84, 84, 88, 0.65)` | separator |
+| 表格背景 | `--chat-table-bg` | `#000000` | systemBackground |
+| 表格交替行 | `--chat-table-alt-bg` | `#1C1C1E` | secondarySystemBackground |
+
+## 关键特性
+
+### 1. 纯黑/纯白背景
+- **亮色模式**：使用纯白 `#FFFFFF` 作为主背景（systemBackground）
+- **暗色模式**：使用纯黑 `#000000` 作为主背景（systemBackground）
+
+### 2. 系统蓝色链接
+- **亮色模式**：`#007AFF` (iOS 标准蓝)
+- **暗色模式**：`#0A84FF` (iOS 暗色模式蓝)
+
+### 3. 层次分明的背景
+- 主背景：systemBackground
+- 代码块/表格：secondarySystemBackground (比主背景稍深/浅)
+- 为内容提供清晰的视觉层次
+
+### 4. 自动主题切换
+使用 `color-scheme: light dark` 和 `@media (prefers-color-scheme: dark)` 实现自动切换，无需 JavaScript。
+
+## 代码高亮配色
+
+### 亮色模式
+- 基于 **GitHub Light** 主题
+- 背景：`#F2F2F7` (iOS secondarySystemBackground)
+- 文字：`#000000` (iOS label)
+
+### 暗色模式
+- 基于 **GitHub Dark** 主题
+- 背景：`#1C1C1E` (iOS secondarySystemBackground)
+- 文字：`#FFFFFF` (iOS label)
+
+## 使用方法
+
+### 在 iOS 项目中
+颜色会自动跟随系统主题：
+1. 在 **设置 > 显示与亮度** 中切换"浅色/深色"
+2. 应用会立即响应系统主题变化
+3. 所有文字、背景、链接颜色自动适配
+
+### 在浏览器中
+1. 打开 Safari 或 Chrome
+2. 在系统设置中切换"浅色/深色"外观
+3. 网页会自动切换颜色方案
+
+## 文件位置
+
+主要颜色定义位于：
+- `src/styles.css` - 主样式和颜色变量
+- `src/highlight-theme.css` - 代码高亮颜色
+- `templates/markdown-render.html` - HTML 模板样式
+
+## iOS 系统颜色参考
+
+官方文档：[Human Interface Guidelines - Color](https://developer.apple.com/design/human-interface-guidelines/color)
+
+主要系统颜色：
+- **systemBackground**: 主要背景色
+- **secondarySystemBackground**: 次级背景色（比主背景稍微深/浅）
+- **tertiarySystemBackground**: 三级背景色
+- **label**: 主要文字颜色
+- **secondaryLabel**: 次要文字颜色（带透明度）
+- **systemBlue**: 系统蓝色（用于链接、按钮等交互元素）
+- **separator**: 分隔线颜色
+
+## 更新日志
+
+### v1.1.0 - iOS 系统颜色适配
+- ✅ 使用 iOS systemBackground (白/黑) 替代自定义背景色
+- ✅ 使用 iOS label (黑/白) 作为主要文字颜色
+- ✅ 使用 iOS systemBlue (#007AFF/#0A84FF) 作为链接颜色
+- ✅ 代码块使用 secondarySystemBackground 作为背景
+- ✅ 表格、引用块等元素完全适配 iOS 系统颜色
+- ✅ 完美支持系统暗黑/亮色模式自动切换
+
+## 验证方法
+
+1. **iOS 设备测试**：
+   ```
+   - 在 Xcode 中运行应用
+   - 切换系统外观：设置 > 显示与亮度
+   - 观察颜色变化是否与原生 iOS 应用一致
+   ```
+
+2. **浏览器测试**：
+   ```
+   - 打开 test-dark-mode.html
+   - 切换系统外观设置
+   - 验证背景、文字、链接颜色
+   ```
+
+## 技术细节
+
+### CSS 变量优势
+使用 CSS 自定义属性（变量）实现：
+- 统一管理颜色
+- 自动响应媒体查询
+- 易于维护和修改
+- 性能优异，无需 JavaScript
+
+### WebView 配置
+在 `MarkdownViewController.swift` 中：
+```swift
+webView.isOpaque = false
+webView.backgroundColor = .clear  // 透明，让 CSS 控制颜色
+```
+
+这确保 WebView 不会覆盖 CSS 定义的背景色。

package/ios-example/MarkdownViewController.swift

@@ -0,0 +1,147 @@
+import UIKit
+import WebKit
+
+/// A view controller that renders Markdown content using WKWebView
+class MarkdownViewController: UIViewController {
+
+    // MARK: - Properties
+
+    private var webView: WKWebView!
+    private var isHTMLLoaded = false
+
+    // MARK: - Lifecycle
+
+    override func loadView() {
+        let config = WKWebViewConfiguration()
+
+        // Configure message handlers for iOS communication
+        let contentController = WKUserContentController()
+        contentController.add(self, name: "renderComplete")
+        contentController.add(self, name: "pageReady")
+        config.userContentController = contentController
+
+        // Create and configure webView
+        webView = WKWebView(frame: .zero, configuration: config)
+        webView.scrollView.isScrollEnabled = true
+        webView.scrollView.bounces = true
+
+        // Use transparent background to let CSS control colors for dark mode support
+        webView.isOpaque = false
+        webView.backgroundColor = .clear
+        webView.scrollView.backgroundColor = .clear
+
+        view = webView
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        loadHTMLFile()
+    }
+
+    // MARK: - Public Methods
+
+    /// Render markdown content
+    /// - Parameter markdown: The markdown string to render
+    func renderMarkdown(_ markdown: String) {
+        guard isHTMLLoaded else {
+            // Queue the render request until HTML is loaded
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+                self?.renderMarkdown(markdown)
+            }
+            return
+        }
+
+        // Escape the markdown string for JavaScript
+        let escapedMarkdown = markdown
+            .replacingOccurrences(of: "\\", with: "\\\\")
+            .replacingOccurrences(of: "`", with: "\\`")
+            .replacingOccurrences(of: "$", with: "\\$")
+            .replacingOccurrences(of: "\n", with: "\\n")
+            .replacingOccurrences(of: "\r", with: "\\r")
+            .replacingOccurrences(of: "\"", with: "\\\"")
+
+        let javascript = "window.renderMarkdown(`\(escapedMarkdown)`)"
+
+        webView.evaluateJavaScript(javascript) { result, error in
+            if let error = error {
+                print("❌ Error rendering markdown: \(error.localizedDescription)")
+            } else {
+                print("✅ Markdown rendered successfully")
+            }
+        }
+    }
+
+    /// Get the height of the rendered content
+    /// - Parameter completion: Callback with the content height in points
+    func getContentHeight(completion: @escaping (CGFloat) -> Void) {
+        webView.evaluateJavaScript("window.getContentHeight()") { result, error in
+            if let height = result as? CGFloat {
+                completion(height)
+            } else if let height = result as? Int {
+                completion(CGFloat(height))
+            } else {
+                completion(0)
+            }
+        }
+    }
+
+    /// Clear the rendered content
+    func clearContent() {
+        webView.evaluateJavaScript("window.clearContent()")
+    }
+
+    // MARK: - Private Methods
+
+    private func loadHTMLFile() {
+        // Try to find the HTML file in the markdown-render-bundle directory
+        guard let htmlPath = Bundle.main.path(
+            forResource: "markdown-render",
+            ofType: "html",
+            inDirectory: "markdown-render-bundle"
+        ) else {
+            print("❌ HTML file not found!")
+            print("📍 Bundle path: \(Bundle.main.bundlePath)")
+            print("⚠️ Make sure you added markdown-render-bundle using 'Create folder references'")
+            return
+        }
+
+        print("✅ HTML path: \(htmlPath)")
+
+        let htmlURL = URL(fileURLWithPath: htmlPath)
+        let bundleURL = htmlURL.deletingLastPathComponent()
+
+        do {
+            let htmlContent = try String(contentsOf: htmlURL, encoding: .utf8)
+            webView.loadHTMLString(htmlContent, baseURL: bundleURL)
+        } catch {
+            print("❌ Error loading HTML: \(error.localizedDescription)")
+        }
+    }
+}
+
+// MARK: - WKScriptMessageHandler
+
+extension MarkdownViewController: WKScriptMessageHandler {
+    func userContentController(
+        _ userContentController: WKUserContentController,
+        didReceive message: WKScriptMessage
+    ) {
+        if message.name == "pageReady" {
+            print("✅ WebView page is ready")
+            isHTMLLoaded = true
+        } else if message.name == "renderComplete" {
+            if let body = message.body as? [String: Any] {
+                if let success = body["success"] as? Bool {
+                    if success {
+                        print("✅ Render completed successfully")
+                        if let height = body["height"] as? CGFloat {
+                            print("📏 Content height: \(height)")
+                        }
+                    } else if let error = body["error"] as? String {
+                        print("❌ Render failed: \(error)")
+                    }
+                }
+            }
+        }
+    }
+}

package/ios-example/README.md

@@ -0,0 +1,185 @@
+# iOS 集成示例
+
+这个目录包含了在 iOS 项目中集成 markdown-render 的示例代码。
+
+## 文件说明
+
+- `MarkdownViewController.swift` - 用于渲染 Markdown 的 UIViewController
+
+## 快速开始
+
+请参考项目根目录的 [QUICK_START_iOS.md](../QUICK_START_iOS.md) 获取完整的集成步骤。
+
+## MarkdownViewController 使用方法
+
+### 1. 添加到项目
+
+将 `MarkdownViewController.swift` 复制到你的 Xcode 项目中。
+
+### 2. UIKit 中使用
+
+```swift
+import UIKit
+
+class MyViewController: UIViewController {
+    private let markdownVC = MarkdownViewController()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        // 添加为子视图控制器
+        addChild(markdownVC)
+        view.addSubview(markdownVC.view)
+        markdownVC.view.frame = view.bounds
+        markdownVC.didMove(toParent: self)
+
+        // 渲染 Markdown
+        let markdown = """
+        # Hello iOS! 👋
+
+        This is **bold** and this is *italic*.
+
+        ```swift
+        print("Hello, World!")
+        ```
+
+        Math: $E = mc^2$
+
+        - [x] Task completed
+        - [ ] Task pending
+        """
+
+        markdownVC.renderMarkdown(markdown)
+    }
+}
+```
+
+### 3. SwiftUI 中使用
+
+```swift
+import SwiftUI
+
+struct MarkdownView: UIViewControllerRepresentable {
+    let markdown: String
+
+    func makeUIViewController(context: Context) -> MarkdownViewController {
+        MarkdownViewController()
+    }
+
+    func updateUIViewController(_ uiViewController: MarkdownViewController, context: Context) {
+        uiViewController.renderMarkdown(markdown)
+    }
+}
+
+struct ContentView: View {
+    var body: some View {
+        MarkdownView(markdown: "# Hello SwiftUI\nThis is **bold**!")
+            .edgesIgnoringSafeArea(.all)
+    }
+}
+```
+
+## API 参考
+
+### renderMarkdown(_ markdown: String)
+
+渲染 Markdown 内容。
+
+```swift
+markdownVC.renderMarkdown("# Hello\nThis is **bold**")
+```
+
+### getContentHeight(completion: @escaping (CGFloat) -> Void)
+
+获取渲染内容的高度。
+
+```swift
+markdownVC.getContentHeight { height in
+    print("Content height: \(height)")
+}
+```
+
+### clearContent()
+
+清空已渲染的内容。
+
+```swift
+markdownVC.clearContent()
+```
+
+## 调试技巧
+
+### 1. 检查文件是否正确添加
+
+确保在 Xcode 中：
+- ✅ 使用 "Create folder references"（蓝色文件夹图标）
+- ✅ 文件已添加到正确的 Target
+- ✅ fonts 目录包含所有字体文件
+
+### 2. 查看控制台日志
+
+`MarkdownViewController` 会输出调试信息：
+- `✅ HTML path: ...` - HTML 文件已找到
+- `✅ WebView page is ready` - WebView 已准备好
+- `✅ Render completed successfully` - 渲染成功
+
+### 3. 使用 Safari Web Inspector
+
+1. 打开 Safari → 偏好设置 → 高级
+2. 勾选 "在菜单栏中显示开发菜单"
+3. 运行应用后，Safari → 开发 → [你的设备] → [WebView]
+4. 查看 JavaScript 控制台错误
+
+## 常见问题
+
+**Q: 显示空白页面**
+- 检查是否使用了 "Create folder references"
+- 查看 Xcode 控制台是否有 "❌ HTML file not found!" 错误
+- 确认 markdown-render-bundle 目录已正确添加
+
+**Q: 数学公式不显示**
+- 确认 fonts 目录已添加
+- 检查字体文件是否完整
+
+**Q: 代码高亮不工作**
+- 确认 markdown-render.js 文件完整
+- 使用 Safari Web Inspector 查看 JavaScript 错误
+
+## 技术细节
+
+### 文件结构
+
+```
+markdown-render-bundle/
+├── markdown-render.html    # WebView 加载的 HTML
+├── markdown-render.js      # 核心 JavaScript 库
+├── markdown-render.css     # 样式文件
+└── fonts/                  # KaTeX 数学公式字体
+    ├── KaTeX_*.woff2
+    └── ...
+```
+
+### iOS 与 JavaScript 通信
+
+MarkdownViewController 使用 `WKScriptMessageHandler` 与 WebView 通信：
+
+**从 JavaScript 到 iOS:**
+- `pageReady` - 页面加载完成
+- `renderComplete` - 渲染完成，包含成功状态和内容高度
+
+**从 iOS 到 JavaScript:**
+- `window.renderMarkdown(markdown)` - 渲染 Markdown
+- `window.getContentHeight()` - 获取内容高度
+- `window.clearContent()` - 清空内容
+
+## 更新日志
+
+### v1.0.0
+- 初始版本
+- 支持完整的 Markdown 渲染
+- 支持代码高亮和数学公式
+- 提供 UIKit 和 SwiftUI 示例
+
+## 许可证
+
+MIT License

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@cellgit/markdown-render",
+  "version": "0.1.0",
+  "description": "A frontend markdown rendering library with syntax highlighting, math support, and iOS system colors adaptation",
+  "type": "module",
+  "main": "dist/markdown-render.esm.js",
+  "module": "dist/markdown-render.esm.js",
+  "browser": "dist/markdown-render.js",
+  "exports": {
+    ".": {
+      "import": "./dist/markdown-render.esm.js",
+      "default": "./dist/markdown-render.esm.js"
+    },
+    "./styles": "./dist/markdown-render.css",
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist",
+    "ios-example",
+    "README.md",
+    "QUICK_START_iOS.md",
+    "iOS_COLORS.md"
+  ],
+  "scripts": {
+    "build": "rollup -c && node scripts/copy-katex-fonts.js && node scripts/copy-html-template.js",
+    "build:ios": "npm run build && node scripts/bundle-for-ios.js",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "keywords": [
+    "markdown",
+    "render",
+    "renderer",
+    "highlight",
+    "syntax-highlighting",
+    "katex",
+    "math",
+    "latex",
+    "ios",
+    "android",
+    "webview",
+    "react",
+    "vue",
+    "browser",
+    "dark-mode",
+    "system-colors",
+    "mobile"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/markdown-render.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/markdown-render/issues"
+  },
+  "homepage": "https://github.com/yourusername/markdown-render#readme",
+  "dependencies": {
+    "highlight.js": "^11.9.0",
+    "katex": "^0.16.9",
+    "markdown-it": "^14.1.0",
+    "markdown-it-task-lists": "^2.1.1",
+    "markdown-it-emoji": "^3.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.9.6",
+    "rollup-plugin-import-css": "^3.5.2"
+  }
+}