or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-markdown-loader

A webpack loader for processing Markdown files into HTML using the marked library

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/markdown-loader@8.0.x

To install, run

npx @tessl/cli install tessl/npm-markdown-loader@8.0.0

index.mddocs/

markdown-loader

A webpack loader for processing Markdown files into HTML using the marked library. This loader enables seamless integration of Markdown content into webpack builds by transforming .md files into HTML strings that can be imported as modules.

Package Information

  • Package Name: markdown-loader
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install markdown-loader

Core Imports

The loader is used in webpack configuration rather than direct imports:

// webpack.config.js
export default {
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          { loader: "html-loader" },
          { loader: "markdown-loader" }
        ]
      }
    ]
  }
};

Basic Usage

// webpack.config.js
export default {
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: "html-loader",
          },
          {
            loader: "markdown-loader",
            options: {
              // Pass options to marked library
              // See https://marked.js.org/using_advanced#options
            },
          },
        ],
      },
    ],
  },
};

Then import Markdown files in your JavaScript:

import readmeContent from './README.md';
// readmeContent contains the HTML string
console.log(readmeContent);

Architecture

markdown-loader uses a hybrid module structure for webpack compatibility:

  • CommonJS Entry (src/main.cjs): Required by webpack's loader system, serves as a trampoline
  • ES Module Core (src/loader.js): Contains the actual loader implementation
  • Marked Integration: Uses the marked library for Markdown parsing with configurable options

The loader follows webpack's loader interface, receiving raw markdown content and returning HTML.

Capabilities

Webpack Loader Function

The core loader functionality that transforms Markdown to HTML.

/**
 * Webpack loader function that converts markdown content to HTML
 * @param {string} markdown - Raw markdown content from file
 * @returns {string} HTML string generated by marked library
 */
function markdownLoader(markdown);

This function:

  • Receives markdown content as a string parameter
  • Uses this.getOptions() to retrieve webpack loader options
  • Passes options directly to marked.parse() for customization
  • Returns HTML string that can be processed by subsequent loaders

CommonJS Trampoline

The entry point required for webpack loader compatibility.

/**
 * CommonJS trampoline function for webpack loader compatibility
 * @param {...any} args - Arguments passed from webpack loader system
 * @returns {Promise<string>} Promise resolving to HTML string
 */
async function trampolin(...args);

This async function:

  • Dynamically imports the ES module loader
  • Calls the actual loader with proper this context
  • Returns the result from the ES module loader

Configuration Options

All options are passed directly to the marked library. Common options include:

interface MarkedOptions {
  /** Custom renderer for overriding HTML output */
  renderer?: Renderer;
  /** Function for syntax highlighting code blocks */
  highlight?: (code: string, lang: string) => string;
  /** Enable GitHub Flavored Markdown extensions */
  gfm?: boolean;
  /** Allow HTML tags in markdown */
  sanitize?: boolean;
  /** Other marked library options */
  [key: string]: any;
}

Usage Examples:

// With custom syntax highlighting
{
  loader: "markdown-loader",
  options: {
    highlight: (code, lang) => {
      return require('highlight.js').highlight(code, { language: lang }).value;
    }
  }
}

// With custom renderer
import { Renderer } from 'marked';

class CustomRenderer extends Renderer {
  heading(text, level) {
    return `<h${level} class="custom-heading">${text}</h${level}>`;
  }
}

{
  loader: "markdown-loader", 
  options: {
    renderer: new CustomRenderer()
  }
}

Integration Patterns

With html-loader Chain

The recommended usage pattern combines markdown-loader with html-loader:

{
  test: /\.md$/,
  use: [
    { loader: "html-loader" },    // Processes HTML output
    { loader: "markdown-loader" }  // Converts MD to HTML
  ]
}

Direct Module Import

After configuration, Markdown files can be imported as modules:

// Import processed markdown as HTML string
import content from './documentation.md';
document.getElementById('content').innerHTML = content;

Runtime Requirements

  • Node.js: >= 12.22.9
  • webpack: >= 5.0.0 (peer dependency)
  • marked: ^4.0.12 (bundled dependency)

Error Handling

The loader inherits error handling from the marked library. Common issues:

  • Invalid Markdown: Marked will attempt to parse malformed markdown gracefully
  • Option Conflicts: Invalid marked options will throw during parsing
  • File Access: Standard webpack file loading errors apply

The loader does not implement custom error handling beyond webpack's standard loader error propagation.