tessl/npm-slidev--types

Comprehensive TypeScript type definitions and interfaces for the Slidev presentation framework ecosystem

—

Pending

Overview

Eval results

Files

Markdown Transform System

Name: tessl/npm-slidev--types
Author: tessl

Types for Slidev's markdown transformation system, enabling custom processing of slide markdown content during build and rendering.

Capabilities

Markdown Transform Context

Context interface providing tools and information for markdown transformers.

/**
 * Context interface for markdown transformers
 */
interface MarkdownTransformContext {
  /** Magic string instance for current markdown content modification */
  s: MagicString;
  /** Slide information for the current slide being transformed */
  slide: SlideInfo;
  /** Resolved Slidev configuration options */
  options: ResolvedSlidevOptions;
}

Markdown Transformer

Function type for transforming markdown content within slides.

/**
 * Markdown transformer function
 * @param ctx - Transform context with tools and slide information
 */
type MarkdownTransformer = (ctx: MarkdownTransformContext) => Awaitable<void>;

Usage Examples:

import type { MarkdownTransformer } from "@slidev/types";

// Example transformer that adds custom syntax highlighting
const customHighlighter: MarkdownTransformer = async (ctx) => {
  const { s, slide, options } = ctx;
  
  // Find code blocks with custom language
  const codeBlockRegex = /```customlang\n([\s\S]*?)\n```/g;
  
  let match;
  while ((match = codeBlockRegex.exec(s.original)) !== null) {
    const [fullMatch, code] = match;
    const start = match.index;
    const end = start + fullMatch.length;
    
    // Replace with highlighted version
    const highlighted = await highlightCustomLanguage(code);
    s.overwrite(start, end, `\`\`\`html\n${highlighted}\n\`\`\``);
  }
};

// Example transformer that injects slide metadata
const metadataInjector: MarkdownTransformer = (ctx) => {
  const { s, slide } = ctx;
  
  // Add slide number at the beginning
  if (slide.index > 0) {
    s.prepend(`<!-- Slide ${slide.index} -->\n`);
  }
  
  // Add slide title as comment if available
  if (slide.title) {
    s.prepend(`<!-- Title: ${slide.title} -->\n`);
  }
};

// Example transformer that processes custom directives
const directiveProcessor: MarkdownTransformer = (ctx) => {
  const { s } = ctx;
  
  // Process custom ::warning directive
  s.replace(
    /::warning\n([\s\S]*?)\n::/g,
    '<div class="warning-box">\n$1\n</div>'
  );
  
  // Process custom ::note directive
  s.replace(
    /::note\[(.*?)\]\n([\s\S]*?)\n::/g,
    '<div class="note-box" data-title="$1">\n$2\n</div>'
  );
};

Types

import type { Awaitable } from '@antfu/utils';
import type MagicString from 'magic-string-stack';
import type { ResolvedSlidevOptions } from './options';
import type { SlideInfo } from './types';

Install with Tessl CLI