@wsxjs/wsx-marked-components 0.0.22 → 0.0.24

package/src/Code.wsx

@@ -1,16 +1,82 @@
 /** @jsxImportSource @wsxjs/wsx-core */
 /**
  * WSX Code Component
- * Custom code block component for markdown rendering
+ * Custom code block component for markdown rendering with syntax highlighting.
+ *
+ * Features:
+ * - Displays code as raw text (not rendered as HTML)
+ * - Syntax highlighting via Prism.js
+ * - Support for WSX language highlighting
  */
 
 import { LightComponent, autoRegister } from "@wsxjs/wsx-core";
 import styles from "./Code.css?inline";
 
+// Import Prism.js core
+import Prism from "prismjs";
+// Note: We don't import Prism's default theme here.
+// Instead, we use custom CSS in Code.css that supports both light and dark modes.
+
+// Import language components (in dependency order)
+// Base languages (no dependencies)
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-c";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-rust";
+import "prismjs/components/prism-go";
+
+// Languages depending on base languages
+import "prismjs/components/prism-typescript"; // depends on javascript
+import "prismjs/components/prism-jsx"; // depends on javascript
+import "prismjs/components/prism-cpp"; // depends on c
+
+// Languages depending on other languages (must be after dependencies)
+import "prismjs/components/prism-tsx"; // depends on typescript and jsx
+
+// Import WSX language definition (depends on tsx)
+import "./prism-wsx";
+
+/** Language alias mapping for common language names */
+const LANGUAGE_ALIASES: Record<string, string> = {
+    js: "javascript",
+    ts: "typescript",
+    py: "python",
+    rb: "ruby",
+    sh: "bash",
+    shell: "bash",
+    yml: "yaml",
+    html: "markup",
+    xml: "markup",
+    svg: "markup",
+    vue: "markup",
+    md: "markdown",
+    plaintext: "text",
+    plain: "text",
+    txt: "text",
+};
+
+/**
+ * Normalize language name to Prism-compatible format
+ */
+function normalizeLanguage(lang: string): string {
+    const normalized = lang.toLowerCase().trim();
+    return LANGUAGE_ALIASES[normalized] || normalized;
+}
+
 @autoRegister({ tagName: "wsx-marked-code" })
 export default class Code extends LightComponent {
     private code: string = "";
     private language: string = "";
+    private codeElement: HTMLElement | null = null;
+    private isHighlighting: boolean = false;
 
     constructor() {
         super({
@@ -32,14 +98,135 @@ export default class Code extends LightComponent {
         this.rerender();
     }
 
+    protected onRendered() {
+        super.onRendered?.();
+        // Apply syntax highlighting after render
+        if (!this.isHighlighting && this.codeElement) {
+            this.highlightCode();
+        }
+    }
+
     render() {
+        const normalizedLang = normalizeLanguage(this.language);
+
         return (
-            <div>
+            <div class="code-container">
                 {this.language && <span class="language-label">{this.language}</span>}
                 <pre>
-                    <code>{this.code}</code>
+                    <code
+                        class={normalizedLang ? `language-${normalizedLang}` : ""}
+                        ref={(el) => {
+                            this.codeElement = el as HTMLElement | null;
+                        }}
+                    >
+                        {/* Code will be set via textContent in highlightCode() */}
+                    </code>
                 </pre>
             </div>
         );
     }
+
+    /**
+     * Apply syntax highlighting to the code element
+     * Uses textContent to ensure code is displayed as raw text
+     */
+    private highlightCode(): void {
+        // Prevent concurrent highlighting
+        if (this.isHighlighting) {
+            return;
+        }
+
+        this.isHighlighting = true;
+
+        try {
+            // Use requestAnimationFrame to ensure DOM is fully updated
+            requestAnimationFrame(() => {
+                try {
+                    if (!this.codeElement) {
+                        this.isHighlighting = false;
+                        return;
+                    }
+
+                    // Skip if already highlighted with same content
+                    if (
+                        this.codeElement.hasAttribute("data-prism-highlighted") &&
+                        this.codeElement.getAttribute("data-code-hash") === this.hashCode(this.code)
+                    ) {
+                        this.isHighlighting = false;
+                        return;
+                    }
+
+                    // Set code as raw text (prevents HTML rendering)
+                    this.codeElement.textContent = this.code;
+
+                    // Get normalized language
+                    const normalizedLang = normalizeLanguage(this.language);
+
+                    // Apply syntax highlighting if language is supported
+                    if (normalizedLang && Prism.languages[normalizedLang]) {
+                        this.codeElement.className = `language-${normalizedLang}`;
+                        Prism.highlightElement(this.codeElement);
+                    } else if (normalizedLang && normalizedLang !== "text") {
+                        // Language not supported, try to fall back to similar language
+                        const fallback = this.getFallbackLanguage(normalizedLang);
+                        if (fallback && Prism.languages[fallback]) {
+                            this.codeElement.className = `language-${fallback}`;
+                            Prism.highlightElement(this.codeElement);
+                        }
+                    }
+
+                    // Mark as highlighted
+                    this.codeElement.setAttribute("data-prism-highlighted", "true");
+                    this.codeElement.setAttribute("data-code-hash", this.hashCode(this.code));
+                } catch (error) {
+                    console.error("[wsx-marked-code] Failed to highlight code:", error);
+                } finally {
+                    this.isHighlighting = false;
+                }
+            });
+        } catch (error) {
+            console.error("[wsx-marked-code] Failed to schedule highlight:", error);
+            this.isHighlighting = false;
+        }
+    }
+
+    /**
+     * Get fallback language for unsupported languages
+     */
+    private getFallbackLanguage(lang: string): string | null {
+        const fallbacks: Record<string, string> = {
+            vue: "markup",
+            svelte: "markup",
+            astro: "markup",
+            scss: "css",
+            sass: "css",
+            less: "css",
+            stylus: "css",
+            coffee: "javascript",
+            coffeescript: "javascript",
+            kotlin: "java",
+            scala: "java",
+            groovy: "java",
+            swift: "typescript",
+            dart: "typescript",
+            csharp: "typescript",
+            "c#": "typescript",
+            fsharp: "typescript",
+            "f#": "typescript",
+        };
+        return fallbacks[lang] || null;
+    }
+
+    /**
+     * Simple hash function for content comparison
+     */
+    private hashCode(str: string): string {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash = hash & hash; // Convert to 32bit integer
+        }
+        return hash.toString(36);
+    }
 }

package/src/Markdown.wsx

@@ -79,14 +79,24 @@ export default class Markdown extends LightComponent {
         return { ...this.customRenderers };
     }
 
+    /**
+     * 移除 markdown 中的 frontmatter（YAML 元数据块）
+     * frontmatter 格式：文件开头的 --- 包围的 YAML 块
+     */
+    private stripFrontmatter(markdown: string): string {
+        return markdown.replace(/^---\n[\s\S]*?\n---\n?/, "");
+    }
+
     render() {
         if (!this.markdown) {
             return <div class="marked-content"></div>;
         }
 
         try {
+            // 移除 frontmatter 后再解析
+            const cleanMarkdown = this.stripFrontmatter(this.markdown);
             // Use marked.lexer to get tokens, then render with WSX JSX
-            const tokens = marked.lexer(this.markdown);
+            const tokens = marked.lexer(cleanMarkdown);
             return <div class="marked-content">{this.renderTokens(tokens)}</div>;
         } catch (error) {
             logger.error("Failed to render markdown", error);

package/src/index.ts

@@ -12,5 +12,8 @@ export { default as Markdown } from "./Markdown.wsx";
 // Export utilities
 export * from "./marked-utils";
 
+// Export Prism WSX language registration
+export { registerWsxLanguage } from "./prism-wsx";
+
 // Export types
 export type { TokenRenderer, CustomRenderers, MarkdownOptions } from "./types";

package/src/prism-wsx.ts

@@ -0,0 +1,65 @@
+/**
+ * Prism.js WSX Language Definition
+ *
+ * WSX is a JSX-like syntax for Web Components.
+ * This definition extends TSX with WSX-specific patterns.
+ */
+
+import Prism from "prismjs";
+
+// Ensure JSX is loaded first (TSX depends on it)
+import "prismjs/components/prism-jsx";
+// Ensure TypeScript is loaded
+import "prismjs/components/prism-typescript";
+// Ensure TSX is loaded
+import "prismjs/components/prism-tsx";
+
+/**
+ * Register WSX language with Prism
+ * WSX is essentially TSX with Web Components conventions
+ */
+export function registerWsxLanguage(): void {
+    // Check if already registered
+    if (Prism.languages.wsx) {
+        return;
+    }
+
+    // Clone TSX as base for WSX
+    Prism.languages.wsx = Prism.languages.extend("tsx", {
+        // WSX-specific decorators (e.g., @autoRegister, @state)
+        decorator: {
+            pattern: /@[\w]+(?:\([^)]*\))?/,
+            inside: {
+                "decorator-name": {
+                    pattern: /@[\w]+/,
+                    alias: "function",
+                },
+                punctuation: /[(),]/,
+            },
+        },
+        // Web Component tag names (custom elements with hyphens)
+        "web-component": {
+            pattern: /<\/?[a-z][\w-]*(?:-[\w-]+)+(?:\s|\/?>)/i,
+            inside: {
+                punctuation: /^<\/?|\/?>$/,
+                "tag-name": {
+                    pattern: /[a-z][\w-]*(?:-[\w-]+)+/i,
+                    alias: "class-name",
+                },
+            },
+        },
+        // WSX specific imports
+        "wsx-import": {
+            pattern: /(?:from\s+)["']@wsxjs\/[\w-]+["']/,
+            inside: {
+                string: /["']@wsxjs\/[\w-]+["']/,
+            },
+        },
+    });
+
+    // Also register as alias
+    Prism.languages.WSX = Prism.languages.wsx;
+}
+
+// Auto-register when this module is imported
+registerWsxLanguage();