CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-marked-terminal

A custom renderer for marked to output markdown to the terminal with rich formatting and styling

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

configuration.mddocs/

Configuration & Options

Comprehensive configuration options for customizing marked-terminal's output styling, formatting, and behavior.

Capabilities

Basic Configuration

Simple configuration for common use cases.

/**
 * Creates a marked extension for rendering markdown to terminal with custom styling
 * @param options - Renderer configuration options for colors, formatting, and behavior
 * @param highlightOptions - Syntax highlighting options passed to cli-highlight
 * @returns Marked extension object for use with marked.use()
 */
function markedTerminal(options?: RendererOptions, highlightOptions?: HighlightOptions): MarkedExtension;

/**
 * Creates a terminal renderer instance with custom options (legacy usage)
 * @param options - Renderer configuration options for colors, formatting, and behavior
 * @param highlightOptions - Syntax highlighting options passed to cli-highlight
 */
class Renderer {
  constructor(options?: RendererOptions, highlightOptions?: HighlightOptions);
}

Usage Examples:

import { marked } from 'marked';
import { markedTerminal } from 'marked-terminal';
import chalk from 'chalk';

// Custom styling
marked.use(markedTerminal({
  code: chalk.yellow,
  heading: chalk.green.bold,
  strong: chalk.bold,
  em: chalk.italic,
  codespan: chalk.yellow,
  link: chalk.blue,
  href: chalk.blue.underline
}));

// With syntax highlighting options
marked.use(markedTerminal({
  code: chalk.yellow
}, {
  language: 'javascript',
  theme: 'github'
}));

Color and Styling Options

Customization of colors and text styles for different markdown elements.

interface StyleOptions {
  /** Code block styling function */
  code?: ChalkFunction;
  /** Blockquote styling function */
  blockquote?: ChalkFunction;
  /** HTML element styling function */
  html?: ChalkFunction;
  /** General heading (h2-h6) styling function */
  heading?: ChalkFunction;
  /** First heading (h1) styling function */
  firstHeading?: ChalkFunction;
  /** Horizontal rule styling function */
  hr?: ChalkFunction;
  /** List item styling function */
  listitem?: ChalkFunction;
  /** Table styling function */
  table?: ChalkFunction;
  /** Paragraph styling function */
  paragraph?: ChalkFunction;
  /** Bold text styling function */
  strong?: ChalkFunction;
  /** Italic text styling function */
  em?: ChalkFunction;
  /** Inline code styling function */
  codespan?: ChalkFunction;
  /** Strikethrough text styling function */
  del?: ChalkFunction;
  /** Link text styling function */
  link?: ChalkFunction;
  /** Link URL styling function */
  href?: ChalkFunction;
  /** Plain text processing function */
  text?: (text: string) => string;
}

type ChalkFunction = (text: string) => string;

Default Style Values:

const defaultStyles = {
  code: chalk.yellow,
  blockquote: chalk.gray.italic,
  html: chalk.gray,
  heading: chalk.green.bold,
  firstHeading: chalk.magenta.underline.bold,
  hr: chalk.reset,
  listitem: chalk.reset,
  table: chalk.reset,
  paragraph: chalk.reset,
  strong: chalk.bold,
  em: chalk.italic,
  codespan: chalk.yellow,
  del: chalk.dim.gray.strikethrough,
  link: chalk.blue,
  href: chalk.blue.underline,
  text: (str) => str
};

Text Processing Options

Options that control text flow, formatting, and processing behavior.

interface TextProcessingOptions {
  /** Terminal width for text reflow (default: 80) */
  width?: number;
  /** Enable text reflow to fit terminal width (default: false) */
  reflowText?: boolean;
  /** Show section prefix (### ) for headings (default: true) */
  showSectionPrefix?: boolean;
  /** Unescape HTML entities (& -> &) (default: true) */
  unescape?: boolean;
  /** Convert emoji codes (:smile:) to emojis (default: true) */
  emoji?: boolean;
  /** Tab size as number of spaces or tab character (default: 4) */
  tab?: number | string;
}

Usage Examples:

// Text reflow configuration
marked.use(markedTerminal({
  width: 120,
  reflowText: true,
  showSectionPrefix: false,
  tab: 2
}));

// Disable emoji and HTML unescaping
marked.use(markedTerminal({
  emoji: false,
  unescape: false
}));

List Formatting

Custom list formatting function for controlling list appearance.

interface ListOptions {
  /** Custom list formatting function */
  list?: (body: string, ordered: boolean, indent: string) => string;
}

Usage Example:

marked.use(markedTerminal({
  list: function(body, ordered, indent) {
    // Custom list formatting logic
    const marker = ordered ? '1.' : '•';
    return body.split('\n')
      .map(line => line ? `${indent}${marker} ${line}` : line)
      .join('\n');
  }
}));

Table Configuration

Options for customizing table appearance using cli-table3.

interface TableConfiguration {
  /** Options passed directly to cli-table3 */
  tableOptions?: {
    /** Table border characters */
    chars?: {
      top?: string;
      'top-mid'?: string;
      'top-left'?: string;
      'top-right'?: string;
      bottom?: string;
      'bottom-mid'?: string;
      'bottom-left'?: string;
      'bottom-right'?: string;
      left?: string;
      'left-mid'?: string;
      mid?: string;
      'mid-mid'?: string;
      right?: string;
      'right-mid'?: string;
      middle?: string;
    };
    /** Table styling */
    style?: {
      'padding-left'?: number;
      'padding-right'?: number;
      head?: string[];
      border?: string[];
    };
    /** Column widths */
    colWidths?: number[];
    [key: string]: any;
  };
}

Usage Example:

marked.use(markedTerminal({
  tableOptions: {
    chars: { 
      'top': '═', 
      'top-mid': '╤', 
      'top-left': '╔', 
      'top-right': '╗',
      'bottom': '═', 
      'bottom-mid': '╧', 
      'bottom-left': '╚', 
      'bottom-right': '╝',
      'left': '║', 
      'left-mid': '╟', 
      'mid': '─', 
      'mid-mid': '┼',
      'right': '║', 
      'right-mid': '╢', 
      'middle': '│'
    },
    style: { 
      'padding-left': 1, 
      'padding-right': 1,
      head: ['cyan'],
      border: ['grey']
    }
  }
}));

Image Handling

Custom image rendering function for controlling how images are displayed.

interface ImageOptions {
  /** Custom image rendering function */
  image?: (href: string, title?: string, text?: string) => string;
}

Usage Example:

marked.use(markedTerminal({
  image: function(href, title, text) {
    let output = `![${text}]`;
    if (title) output += ` – ${title}`;
    output += `(${href})`;
    return output + '\n';
  }
}));

Syntax Highlighting

Configuration options for code syntax highlighting using cli-highlight.

interface HighlightOptions {
  /** Default language for code blocks without language specification */
  language?: string;
  /** Color theme for syntax highlighting */
  theme?: string;
  /** Ignore illegal syntax and continue highlighting */
  ignoreIllegals?: boolean;
  /** Language detection options */
  languageDetection?: boolean;
  /** Additional cli-highlight options */
  [key: string]: any;
}

Usage Example:

// Syntax highlighting configuration
marked.use(markedTerminal({
  code: chalk.reset // Let cli-highlight handle colors
}, {
  theme: 'github',
  language: 'javascript',
  ignoreIllegals: true
}));

Complete Configuration Example

import { marked } from 'marked';
import { markedTerminal } from 'marked-terminal';
import chalk from 'chalk';

marked.use(markedTerminal({
  // Custom colors
  code: chalk.yellow,
  blockquote: chalk.gray.italic,
  heading: chalk.green.bold,
  firstHeading: chalk.magenta.underline.bold,
  strong: chalk.bold,
  em: chalk.italic,
  codespan: chalk.yellow,
  del: chalk.strikethrough,
  link: chalk.blue,
  href: chalk.blue.underline,
  
  // Text processing
  width: 100,
  reflowText: true,
  showSectionPrefix: true,
  unescape: true,
  emoji: true,
  tab: 2,
  
  // Table styling
  tableOptions: {
    style: { 
      head: ['cyan', 'bold'],
      border: ['grey'] 
    }
  },
  
  // Custom image handler
  image: (href, title, text) => {
    return chalk.dim(`[Image: ${text || 'image'}]`);
  }
}, {
  // Syntax highlighting
  theme: 'github',
  language: 'javascript'
}));

const markdown = `
# Example Document

This is a **bold** statement with *italic* text and \`inline code\`.

\`\`\`javascript
function hello() {
  console.log("Hello, world!");
}
\`\`\`

| Name | Age | City |
|------|-----|------|
| Alice | 25 | NYC |
| Bob | 30 | LA |
`;

console.log(marked.parse(markdown));

docs

configuration.md

index.md

tile.json