CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-gatsby-remark-smartypants

Gatsby remark plugin that enhances typography by replacing dumb punctuation marks with smart punctuation marks

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

gatsby-remark-smartypants

gatsby-remark-smartypants is a Gatsby remark plugin that automatically enhances typography in markdown content by replacing "dumb" punctuation marks with "smart" punctuation marks using the retext-smartypants library.

Package Information

  • Package Name: gatsby-remark-smartypants
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install gatsby-remark-smartypants

Core Imports

// CommonJS (typically used in gatsby-config.js)
const gatsbyRemarkSmartypants = require("gatsby-remark-smartypants");

For TypeScript projects:

import gatsbyRemarkSmartypants from "gatsby-remark-smartypants";

Note: This plugin is typically not imported directly in user code but configured as part of gatsby-transformer-remark's plugin chain in gatsby-config.js.

Basic Usage

// In gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-smartypants`
        ],
      },
    },
  ],
}

With custom options:

// In gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-smartypants`,
            options: {
              dashes: "oldschool",
              quotes: true,
              ellipses: true,
              backticks: true
            }
          }
        ],
      },
    },
  ],
}

For TypeScript projects (gatsby-config.ts):

import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-smartypants`,
            options: {
              dashes: "oldschool",
              quotes: true,
              ellipses: true,
              backticks: true
            }
          }
        ],
      },
    },
  ],
};

export default config;

Capabilities

Plugin Function

The main plugin function processes markdown AST nodes to enhance typography.

/**
 * Gatsby remark plugin function that enhances typography in markdown content
 * @param {Object} params - Plugin parameters containing markdownAST
 * @param {Object} params.markdownAST - The markdown Abstract Syntax Tree to process
 * @param {Object} [pluginOptions={}] - Configuration options passed to retext-smartypants
 * @returns {Object} The processed markdown AST with enhanced typography
 */
function gatsbyRemarkSmartypants({ markdownAST }, pluginOptions = {}) {
  // Implementation processes all text nodes in the AST
  // using retext-smartypants with the provided options
  return markdownAST;
}

Configuration Options

All options are passed through to retext-smartypants. The following options are available:

interface SmartypantsOptions {
  /** Whether to transform straight quotes to smart quotes (default: true) */
  quotes?: boolean;
  
  /** 
   * Dash transformation behavior (default: true)
   * - true: Two dashes become em dash
   * - "oldschool": Three dashes become em dash, two dashes become en dash  
   * - "inverted": Three dashes become en dash, two dashes become em dash
   * - false: No dash transformation
   */
  dashes?: boolean | 'oldschool' | 'inverted';
  
  /** 
   * Ellipsis transformation behavior (default: true)
   * - true: Transform triple dots with or without spaces
   * - "spaced": Transform triple dots with spaces only
   * - "unspaced": Transform triple dots without spaces only
   * - false: No ellipsis transformation
   */
  ellipses?: boolean | 'spaced' | 'unspaced';
  
  /** Backtick quote transformation behavior (default: true) */
  backticks?: boolean | 'all';
  
  /** Custom opening quote characters */
  openingQuotes?: {
    double: string;
    single: string;
  };
  
  /** Custom closing quote characters */
  closingQuotes?: {
    double: string;
    single: string;
  };
}

Usage Examples

Default Configuration

// gatsby-config.js
{
  resolve: `gatsby-remark-smartypants`,
  // Uses default options: all transformations enabled
}

Transforms:

  • "Hello""Hello"
  • 'Hello''Hello'
  • He said, "A 'simple' sentence..."He said, "A 'simple' sentence…"
  • -- (em dash)
  • ... (ellipsis)

Custom Dash Behavior

// gatsby-config.js
{
  resolve: `gatsby-remark-smartypants`,
  options: {
    dashes: "oldschool"
  }
}

Transforms:

  • --- (em dash)
  • -- (en dash)

Selective Options

// gatsby-config.js
{
  resolve: `gatsby-remark-smartypants`,
  options: {
    quotes: true,
    dashes: false,
    ellipses: "unspaced",
    backticks: "all"
  }
}

Only transforms quotes, ellipses without spaces, and all backtick patterns.

Custom Quote Characters

// gatsby-config.js
{
  resolve: `gatsby-remark-smartypants`,
  options: {
    openingQuotes: {
      double: "«",
      single: "‹"
    },
    closingQuotes: {
      double: "»", 
      single: "›"
    }
  }
}

Uses custom French-style quotation marks.

Types

interface PluginParams {
  /** The markdown Abstract Syntax Tree to process */
  markdownAST: object;
}

interface MarkdownAST {
  /** Node type identifier */
  type: string;
  /** Node value for text nodes */
  value?: string;
  /** Child nodes */
  children?: MarkdownAST[];
}

Dependencies

  • retext: ^7.0.1 - Text processing framework
  • retext-smartypants: ^4.0.0 - Core smartypants typography enhancement
  • unist-util-visit: ^2.0.3 - Utility for traversing unist syntax trees

Peer Dependencies

  • gatsby: ^5.0.0-next - Required for Gatsby integration

Error Handling

The plugin is designed to be robust and will skip processing if:

  • The markdownAST parameter is not provided
  • Text nodes cannot be processed by retext-smartypants
  • Invalid options are provided (they are passed through to retext-smartypants)

No explicit error handling is required in configuration.

Node.js Compatibility

  • Minimum Node.js version: 18.0.0
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/gatsby-remark-smartypants@6.15.x
Publish Source
CLI
Badge
tessl/npm-gatsby-remark-smartypants badge