@dr-ishaan/rehype-perfect-code-blocks 2.2.0 → 2.3.0

package/src/diagrams.ts

@@ -0,0 +1,125 @@
+/**
+ * Diagram & table rendering (v2.3.0).
+ *
+ * - Mermaid: render ```mermaid blocks as SVG diagrams
+ * - CSV/TSV: render ```csv / ```tsv blocks as HTML tables
+ *
+ * Both are build-time (server-side) — no client JS needed.
+ * `mermaid` is an optional peer dependency.
+ */
+
+import type { Element, ElementContent } from 'hast';
+
+/** Languages that trigger Mermaid rendering. */
+export const MERMAID_LANGS = new Set(['mermaid', 'mmd']);
+
+/** Languages that trigger CSV/TSV table rendering. */
+export const CSV_LANGS = new Set(['csv']);
+export const TSV_LANGS = new Set(['tsv']);
+
+export function isMermaidLanguage(lang: string): boolean {
+  return MERMAID_LANGS.has(lang.toLowerCase());
+}
+
+export function isCsvLanguage(lang: string): boolean {
+  return CSV_LANGS.has(lang.toLowerCase()) || TSV_LANGS.has(lang.toLowerCase());
+}
+
+/**
+ * Render a Mermaid diagram to SVG.
+ * Falls back to a `<pre>` with the source if mermaid is not installed.
+ */
+export async function renderMermaid(source: string): Promise<{ svg: string | null; isError: boolean }> {
+  try {
+    const mermaid = await import('mermaid');
+    // mermaid v10+ uses mermaid.default.render()
+    const m = (mermaid as unknown as { default?: { render: (id: string, text: string) => Promise<string> } }).default ?? mermaid;
+    if (typeof m.render === 'function') {
+      const id = 'pcb-mermaid-' + Math.random().toString(36).slice(2, 10);
+      const svg = await m.render(id, source.trim());
+      return { svg, isError: false };
+    }
+  } catch {
+    // mermaid not installed or rendering failed
+  }
+  return { svg: null, isError: true };
+}
+
+/**
+ * Parse CSV/TSV text into rows of cells.
+ */
+export function parseCsv(text: string, delimiter: ',' | '\t' = ','): string[][] {
+  const rows: string[][] = [];
+  for (const line of text.split('\n')) {
+    if (line.trim() === '') continue;
+    rows.push(line.split(delimiter).map((cell) => cell.trim()));
+  }
+  return rows;
+}
+
+/**
+ * Build a HAST element tree for a CSV/TSV table.
+ * First row is the header (in `<thead>`), remaining rows in `<tbody>`.
+ */
+export function buildCsvTable(text: string, delimiter: ',' | '\t' = ','): Element {
+  const rows = parseCsv(text, delimiter);
+  const children: ElementContent[] = [];
+
+  if (rows.length > 0) {
+    // Header
+    const headerCells: ElementContent[] = rows[0].map((cell) => ({
+      type: 'element',
+      tagName: 'th',
+      properties: { className: ['pcb__th'] },
+      children: [{ type: 'text', value: cell }],
+    }));
+    children.push({
+      type: 'element',
+      tagName: 'thead',
+      properties: {},
+      children: [{
+        type: 'element',
+        tagName: 'tr',
+        properties: { className: ['pcb__tr'] },
+        children: headerCells,
+      }],
+    });
+
+    // Body
+    const bodyRows: ElementContent[] = rows.slice(1).map((row) => ({
+      type: 'element',
+      tagName: 'tr',
+      properties: { className: ['pcb__tr'] },
+      children: row.map((cell) => ({
+        type: 'element',
+        tagName: 'td',
+        properties: { className: ['pcb__td'] },
+        children: [{ type: 'text', value: cell }],
+      })),
+    }));
+    children.push({
+      type: 'element',
+      tagName: 'tbody',
+      properties: {},
+      children: bodyRows,
+    });
+  }
+
+  return {
+    type: 'element',
+    tagName: 'table',
+    properties: { className: ['pcb__table'] },
+    children,
+  };
+}
+
+/** ASCII art language defaults — disable ligatures for alignment. */
+export const DEFAULT_ASCII_ART_LANGS = ['text', 'plaintext', 'txt', 'ascii', 'plain'];
+
+/**
+ * Check if a language should be treated as ASCII art (ligatures disabled).
+ */
+export function isAsciiArtLang(lang: string, asciiArtLangs: string[]): boolean {
+  const set = new Set(asciiArtLangs.map((l) => l.toLowerCase()));
+  return set.has(lang.toLowerCase());
+}

package/src/index.ts

@@ -29,6 +29,8 @@ import type { DesignTokens } from './tokens.js';
 import { resolveMathOptions, isMathLanguage, renderMath } from './math.js';
 import type { MathOptions, ResolvedMathOptions } from './math.js';
 import { runDevWarnings, warnUnknownLanguage } from './dev-warnings.js';
+import { isMermaidLanguage, isCsvLanguage, buildCsvTable, parseCsv, renderMermaid } from './diagrams.js';
+import { CLASSES } from './classes.js';
 import type { PerfectCodeOptions } from './types.js';
 
 export { remarkPreserveCodeMeta };
@@ -37,6 +39,8 @@ export { wordDiff, hasChanges };
 export { generateTokenStyles, applyScopeToCss, generateDarkModeSelector, generateLightModeSelector };
 export { resolveMathOptions, isMathLanguage, renderMath };
 export { runDevWarnings, warnUnknownLanguage };
+export { isMermaidLanguage, isCsvLanguage, buildCsvTable, parseCsv, renderMermaid };
+export { CLASSES };
 export type { DiffToken, DesignTokens, MathOptions, ResolvedMathOptions };
 
 export const rehypePerfectCodeBlocks: Plugin<[PerfectCodeOptions?], Root> =
@@ -178,6 +182,10 @@ function resolveDefaults(opts: PerfectCodeOptions): Required<PerfectCodeOptions>
     diffMode: opts.diffMode ?? 'unified',
     annotations: opts.annotations ?? false,
     attribution: opts.attribution ?? false,
+    // v2.3.0: P2
+    mermaid: opts.mermaid ?? false,
+    csvTables: opts.csvTables ?? false,
+    asciiArtLangs: opts.asciiArtLangs ?? ['text', 'plaintext', 'txt', 'ascii', 'plain'],
     inline: opts.inline ?? false,
   };
 }

package/src/mermaid.d.ts

@@ -0,0 +1,11 @@
+/** Minimal type declaration for mermaid (optional peer dependency). */
+declare module 'mermaid' {
+  export interface MermaidConfig { [key: string]: unknown; }
+  export function render(id: string, text: string): Promise<string>;
+  export function initialize(config?: MermaidConfig): void;
+  const _default: {
+    render: typeof render;
+    initialize: typeof initialize;
+  };
+  export default _default;
+}

package/src/shiki.ts

@@ -19,6 +19,7 @@ import { visit } from 'unist-util-visit';
 import type { PerfectCodeOptions } from './types.js';
 import { computeThemeAwareDefaults } from './color-utils.js';
 import { isMathLanguage, renderMath, resolveMathOptions, MATH_LANGS } from './math.js';
+import { isMermaidLanguage, renderMermaid, isCsvLanguage, buildCsvTable } from './diagrams.js';
 import {
   transformerNotationDiff,
   transformerNotationFocus,
@@ -490,6 +491,87 @@ export async function runShikiOnRawBlocks(
     targets.splice(0, targets.length, ...codeTargets);
   }
 
+  // v2.3.0: Handle Mermaid diagram blocks — render as SVG instead of Shiki.
+  if ((opts as { mermaid?: boolean }).mermaid) {
+    const mermaidTargets: Element[] = [];
+    const remainingTargets: Element[] = [];
+    for (const pre of targets) {
+      const code = pre.children.find(
+        (c): c is Element => c.type === 'element' && c.tagName === 'code'
+      );
+      if (!code) { remainingTargets.push(pre); continue; }
+      const cls = (code.properties?.className as string[] | undefined) ?? [];
+      const langClass = cls.find((c) => c.startsWith('language-'));
+      const lang = langClass ? langClass.replace('language-', '') : '';
+      if (isMermaidLanguage(lang)) {
+        mermaidTargets.push(pre);
+      } else {
+        remainingTargets.push(pre);
+      }
+    }
+
+    for (const pre of mermaidTargets) {
+      const code = pre.children.find(
+        (c): c is Element => c.type === 'element' && c.tagName === 'code'
+      );
+      if (!code) continue;
+      const text = extractText(code).replace(/\r\n?/g, '\n').trim();
+      const { svg, isError } = await renderMermaid(text);
+      const mermaidDiv: Element = {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['pcb__mermaid', isError ? 'pcb__mermaid--error' : 'pcb__mermaid--rendered'] },
+        children: svg
+          ? [{ type: 'text', value: svg }]
+          : [{ type: 'element', tagName: 'pre', properties: {}, children: [{ type: 'text', value: text }] }],
+      };
+      Object.assign(pre, mermaidDiv);
+    }
+    targets.splice(0, targets.length, ...remainingTargets);
+  }
+
+  // v2.3.0: Handle CSV/TSV table blocks — render as HTML table instead of Shiki.
+  if ((opts as { csvTables?: boolean }).csvTables) {
+    const csvTargets: Element[] = [];
+    const remainingTargets: Element[] = [];
+    for (const pre of targets) {
+      const code = pre.children.find(
+        (c): c is Element => c.type === 'element' && c.tagName === 'code'
+      );
+      if (!code) { remainingTargets.push(pre); continue; }
+      const cls = (code.properties?.className as string[] | undefined) ?? [];
+      const langClass = cls.find((c) => c.startsWith('language-'));
+      const lang = langClass ? langClass.replace('language-', '') : '';
+      if (isCsvLanguage(lang)) {
+        csvTargets.push(pre);
+      } else {
+        remainingTargets.push(pre);
+      }
+    }
+
+    for (const pre of csvTargets) {
+      const code = pre.children.find(
+        (c): c is Element => c.type === 'element' && c.tagName === 'code'
+      );
+      if (!code) continue;
+      const text = extractText(code).replace(/\r\n?/g, '\n').trim();
+      const cls = (code.properties?.className as string[] | undefined) ?? [];
+      const langClass = cls.find((c) => c.startsWith('language-'));
+      const lang = langClass ? langClass.replace('language-', '') : 'csv';
+      const delimiter = lang.toLowerCase() === 'tsv' ? '\t' : ',';
+      const tableEl = buildCsvTable(text, delimiter);
+      // Replace the <pre> with the table wrapped in a div
+      const tableDiv: Element = {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['pcb__csv-table'] },
+        children: [tableEl],
+      };
+      Object.assign(pre, tableDiv);
+    }
+    targets.splice(0, targets.length, ...remainingTargets);
+  }
+
   if (targets.length === 0) return;
 
   // Build theme keys — supports single (string), dual ({light,dark}), and

package/src/styles.css

@@ -722,3 +722,95 @@ html.no-js .pcb__copy {
   border-top: 1px solid var(--pcb-border);
   font-style: italic;
 }
+
+/* ============================================================
+   v2.3.0: P2 — Retro preset, Mermaid, CSV tables, ASCII art, A11y
+   ============================================================ */
+
+/* ---------- Retro CRT preset ---------- */
+:where(.pcb--retro) {
+  --pcb-bg: #000000;
+  --pcb-fg: #00ff41;
+  --pcb-text-muted: #008f11;
+  --pcb-border: #00ff41;
+  --pcb-bg-header: #001100;
+  --pcb-bg-gutter: #000000;
+  --pcb-radius: 0px;
+  --pcb-font-mono: 'Courier New', 'Lucida Console', monospace;
+  --pcb-bar-font: 'Courier New', monospace;
+  text-shadow: 0 0 2px currentColor, 0 0 4px rgba(0, 255, 65, 0.3);
+}
+:where(.pcb--retro) .pcb__body {
+  position: relative;
+}
+:where(.pcb--retro) .pcb__body::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0) 0px,
+    rgba(0, 0, 0, 0) 2px,
+    rgba(0, 0, 0, 0.08) 2px,
+    rgba(0, 0, 0, 0.08) 4px
+  );
+  pointer-events: none;
+}
+:where(.pcb--retro) .pcb__dots span) {
+  background: #00ff41;
+  opacity: 0.6;
+}
+
+/* ---------- Mermaid diagram container ---------- */
+:where(.pcb__mermaid) {
+  padding: 1rem;
+  background: var(--pcb-bg);
+  overflow-x: auto;
+  text-align: center;
+}
+:where(.pcb__mermaid svg) {
+  max-width: 100%;
+  height: auto;
+}
+:where(.pcb__mermaid--error) {
+  color: var(--pcb-text-muted);
+  font-family: var(--pcb-font-mono);
+}
+
+/* ---------- CSV/TSV table ---------- */
+:where(.pcb__csv-table) {
+  padding: 0;
+  background: var(--pcb-bg);
+  overflow-x: auto;
+}
+:where(.pcb__table) {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--pcb-font-mono);
+  font-size: var(--pcb-font-size);
+}
+:where(.pcb__th) {
+  padding: 0.5rem 1rem;
+  text-align: left;
+  border-bottom: 2px solid var(--pcb-border);
+  color: var(--pcb-text-bar);
+  font-weight: 600;
+}
+:where(.pcb__td) {
+  padding: 0.4rem 1rem;
+  border-bottom: 1px solid var(--pcb-border);
+  color: var(--pcb-text);
+}
+:where(.pcb__tr:nth-child(even) .pcb__td) {
+  background: rgba(127, 127, 127, 0.05);
+}
+
+/* ---------- ASCII art: disable ligatures ---------- */
+:where(.pcb[data-language="text"] .pcb__code),
+:where(.pcb[data-language="plaintext"] .pcb__code),
+:where(.pcb[data-language="txt"] .pcb__code),
+:where(.pcb[data-language="ascii"] .pcb__code),
+:where(.pcb[data-language="plain"] .pcb__code) {
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0, "calt" 0;
+}

package/src/transformer.ts

@@ -253,6 +253,10 @@ export function rehypePerfectCodeBlocks(userOptions: PerfectCodeOptions = {}) {
     diffMode: 'unified' as const,
     annotations: false,
     attribution: false,
+    // v2.3.0: P2
+    mermaid: false,
+    csvTables: false,
+    asciiArtLangs: ['text', 'plaintext', 'txt', 'ascii', 'plain'] as string[],
     inline: false,
     ...rest,
   };
@@ -999,7 +1003,7 @@ function toLineSpans(
     const lineChildren: ElementContent[] = [];
     if (resolved.lineNumbers) {
       lineChildren.push(
-        h('span', { className: ['pcb__ln'], ariaHidden: true }, [hText(String(lineNumber))])
+        h('span', { className: ['pcb__ln'], ariaHidden: true, 'aria-label': `Line ${lineNumber}` }, [hText(String(lineNumber))])
       );
     }
     lineChildren.push(
@@ -1017,6 +1021,13 @@ function toLineSpans(
     if (annotationText !== null) {
       lineProps['dataAnn'] = annotationText;
     }
+    // v2.3.0: Add aria-label for diff lines (accessibility)
+    if (classes.has('pcb__line--add')) {
+      lineProps['aria-label'] = 'Added line';
+    } else if (classes.has('pcb__line--del')) {
+      lineProps['aria-label'] = 'Removed line';
+    }
+
     return h('span', lineProps, lineChildren);
   });
 }

package/src/types.ts

@@ -343,7 +343,7 @@ export interface PerfectCodeOptions {
 
   /* ---------- Styling ---------- */
   /** Visual preset. Default: 'default' */
-  preset?: 'default' | 'terminal' | 'minimal';
+  preset?: 'default' | 'terminal' | 'minimal' | 'retro';
   /** Inject the bundled CSS automatically. Set false to ship your own. Default: true */
   injectStyles?: boolean;
   /** Manual theme override. Default: 'auto' (prefers-color-scheme) */
@@ -609,6 +609,35 @@ export interface PerfectCodeOptions {
    */
   attribution?: boolean;
 
+  /* ---------- v2.3.0: P2 — Diagrams, Tables, ASCII, Frames, A11y ---------- */
+
+  /**
+   * Mermaid diagram rendering. When a fenced code block has language `mermaid`,
+   * render it as an SVG diagram instead of syntax-highlighted code.
+   *
+   * `mermaid` must be installed: `npm install mermaid`
+   *
+   * Default: `false` (mermaid blocks render as plain code)
+   */
+  mermaid?: boolean;
+
+  /**
+   * CSV/TSV table rendering. When a fenced code block has language `csv` or
+   * `tsv`, render it as a styled HTML table instead of code.
+   *
+   * Default: `false` (CSV/TSV blocks render as plain code)
+   */
+  csvTables?: boolean;
+
+  /**
+   * ASCII art preservation. For languages in the list, disable ligatures,
+   * preserve trailing whitespace, and set `font-variant-ligatures: none` to
+   * ensure ASCII art alignment is maintained.
+   *
+   * Default: `['text', 'plaintext', 'txt', 'ascii', 'plain']`
+   */
+  asciiArtLangs?: string[];
+
   /* ---------- Inline code (legacy cosmetic option) ---------- */
   /** Also style inline `code` cosmetically (no tokenization). Default: false */
   inline?: boolean;