@md-plugins/md-plugin-image

@md-plugins/md-plugin-image

A Markdown-It plugin that enhances image rendering by adding customizable CSS classes. This allows for consistent styling and seamless integration into design systems, making it easy to apply specific layouts or effects to images.

Features

• Adds a customizable CSS class to <img> elements.
• Supports a default class that can be overridden via plugin options.
• Enhances image styling and layout consistency.

Installation

Install the plugin via your preferred package manager:

# with pnpm:
pnpm add @md-plugins/md-plugin-image
# with bun:
bun add @md-plugins/md-plugin-image
# with Yarn:
yarn add @md-plugins/md-plugin-image
# with npm:
npm install @md-plugins/md-plugin-image

Usage

Basic Setup

import MarkdownIt from 'markdown-it'
import { imagePlugin } from '@md-plugins/md-plugin-image'

const md = new MarkdownIt()
md.use(imagePlugin, {
  imageClass: 'custom-image-class',
})

const markdownContent = `
![Alt text](https://raw.githubusercontent.com/md-plugins/md-plugins/HEAD/example.jpg)
`

const renderedOutput = md.render(markdownContent)

console.log('Rendered Output:', renderedOutput)

Example Output

The rendered output will include the specified CSS class:

<img src="https://raw.githubusercontent.com/md-plugins/md-plugins/HEAD/example.jpg" alt="Alt text" class="custom-image-class" />

Options

The md-plugin-image plugin supports the following options:

Testing

Run the tests to ensure the plugin behaves as expected:

pnpm test

Documentation

In case this README falls out of date, please refer to the documentation for the latest information.

Support

If md-plugin-image is useful in your workflow and you want to support ongoing maintenance:

• GitHub Sponsors: https://github.com/sponsors/hawkeye64
• PayPal: https://paypal.me/hawkeye64

License

This project is licensed under the MIT License. See the LICENSE file for details.