CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-remarkable

High-performance Markdown parser with full CommonMark support, syntax extensions, and configurable rule systems.

Pending
Overview
Eval results
Files

linkify.mddocs/

Linkify Plugin

The linkify plugin provides automatic URL and email detection and conversion to clickable links. It's available as a separate optional plugin that can be imported and used with any Remarkable instance.

Capabilities

Linkify Function

Plugin function that enables automatic link detection in text.

/**
 * Plugin function to enable automatic URL and email linking
 * @param md - Remarkable instance to modify
 */
function linkify(md: Remarkable): void;

Usage Examples:

import { Remarkable } from "remarkable";
import { linkify } from "remarkable/linkify";

// Apply linkify plugin
const md = new Remarkable().use(linkify);

// URLs are automatically converted to links
const result = md.render('Visit https://example.com for more info');
// Output: <p>Visit <a href="https://example.com">https://example.com</a> for more info</p>

// Email addresses are also converted
const emailResult = md.render('Contact us at support@example.com');
// Output: <p>Contact us at <a href="mailto:support@example.com">support@example.com</a></p>

Import Methods

Different ways to import and use the linkify plugin.

// ES6 modules
import { linkify } from "remarkable/linkify";

// CommonJS
const { linkify } = require("remarkable/linkify");

// Alternative: from main package (UMD only)
// import { Remarkable, linkify } from "remarkable";

Usage Examples:

// Basic usage
import { Remarkable } from "remarkable";
import { linkify } from "remarkable/linkify";

const md = new Remarkable('default').use(linkify);

// Chaining with other plugins
const md = new Remarkable()
  .use(linkify)
  .use(otherPlugin);

// With options (plugin doesn't accept options directly)
const md = new Remarkable('full').use(linkify);

Detection Patterns

Types of URLs and patterns that are automatically detected.

interface LinkifyPatterns {
  /** Web URLs starting with protocol */
  protocols: string[]; // ['http://', 'https://', 'ftp://']
  /** URLs starting with www */
  www: boolean;
  /** Email addresses */
  email: boolean;
  /** IP addresses */
  ip: boolean;
}

Detection Examples:

const md = new Remarkable().use(linkify);

// Protocol URLs
md.render('Visit https://example.com');
// → <p>Visit <a href="https://example.com">https://example.com</a></p>

md.render('Download from ftp://files.example.com/file.zip');
// → <p>Download from <a href="ftp://files.example.com/file.zip">ftp://files.example.com/file.zip</a></p>

// www URLs
md.render('Check out www.example.com');
// → <p>Check out <a href="http://www.example.com">www.example.com</a></p>

// Email addresses
md.render('Send email to user@domain.com');
// → <p>Send email to <a href="mailto:user@domain.com">user@domain.com</a></p>

// Mixed content
md.render('Visit https://example.com or email support@example.com');
// → <p>Visit <a href="https://example.com">https://example.com</a> or email <a href="mailto:support@example.com">support@example.com</a></p>

Link Validation

Built-in link validation to prevent malicious or invalid URLs.

/**
 * Link validation function used internally by the parser
 * @param url - URL to validate
 * @returns boolean indicating if URL is valid and safe
 */
function validateLink(url: string): boolean;

Validation Behavior:

// Valid URLs that will be linked
const validUrls = [
  'https://example.com',
  'http://example.com',
  'ftp://files.example.com',
  'www.example.com',
  'user@example.com'
];

// Invalid URLs that will NOT be linked
const invalidUrls = [
  'javascript:alert(1)',  // JavaScript protocol blocked
  'data:text/html,<script>',  // Data protocol blocked
  'file:///etc/passwd',  // File protocol blocked
  'vbscript:msgbox(1)'   // VBScript protocol blocked
];

Link Context Awareness

The plugin is aware of existing HTML links and markdown links to avoid double-linking.

Context Examples:

const md = new Remarkable().use(linkify);

// Already in markdown link - no auto-linking
md.render('[Visit example](https://example.com)');
// → <p><a href="https://example.com">Visit example</a></p>

// Already in HTML link - no auto-linking
md.render('<a href="other.com">Visit https://example.com</a>');
// → <p><a href="other.com">Visit https://example.com</a></p>

// Outside of links - will be auto-linked
md.render('Visit https://example.com for more info');
// → <p>Visit <a href="https://example.com">https://example.com</a> for more info</p>

// Mixed: some linked, some auto-linked
md.render('[Official site](https://main.com) or mirror at https://mirror.com');
// → <p><a href="https://main.com">Official site</a> or mirror at <a href="https://mirror.com">https://mirror.com</a></p>

Plugin Architecture

How the linkify plugin integrates with Remarkable's rule system.

/**
 * Internal linkify rule function added to core parser
 */
function linkifyRule(state: StateCore): void;

Integration Details:

// The plugin adds a rule to the core parser
function linkify(md) {
  md.core.ruler.push('linkify', linkifyRule);
}

// Custom linkify configuration (advanced usage)
function customLinkify(md, options) {
  // Remove default linkify if present
  md.core.ruler.disable(['linkify']);
  
  // Add custom linkify rule
  md.core.ruler.push('custom_linkify', function(state) {
    // Custom link detection logic
    return customLinkifyLogic(state, options);
  });
}

const md = new Remarkable().use(customLinkify, {
  protocols: ['https://'],
  emailEnabled: false
});

Performance Considerations

Understanding the performance impact and optimization strategies.

Performance Notes:

// Linkify processing occurs after block parsing but before inline parsing
// For optimal performance:

// 1. Apply linkify early in the plugin chain
const md = new Remarkable()
  .use(linkify)           // Early in chain
  .use(otherPlugins);

// 2. Consider disabling if not needed for performance-critical applications
const mdFast = new Remarkable('commonmark');  // No linkify by default

// 3. For large documents, consider selective enabling
const mdSelective = new Remarkable();
if (documentContainsUrls) {
  mdSelective.use(linkify);
}

Package Information

Information about the linkify plugin package structure.

// Package structure
interface LinkifyPackage {
  /** Main export path */
  main: string;          // "../dist/cjs/linkify.js"
  /** ES module export path */
  module: string;        // "../dist/esm/linkify.js"
  /** Package name */
  name: string;          // "remarkable/linkify"
}

// Dependencies
interface LinkifyDependencies {
  /** Autolinker library for URL detection */
  autolinker: string;    // "^3.11.0"
}

Installation and Usage:

// The linkify plugin is included with remarkable - no separate installation needed
npm install remarkable

// Import and use
import { Remarkable } from "remarkable";
import { linkify } from "remarkable/linkify";

const md = new Remarkable().use(linkify);

Install with Tessl CLI

npx tessl i tessl/npm-remarkable

docs

core-parser.md

index.md

linkify.md

rendering.md

rule-system.md

utilities.md

tile.json