# @mdit-kdu/plugin-component

> A markdown-it plugin to allow kdu components in markdown

Latest version **1.0.0** (published 2023-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mdit-kdu/plugin-component
pnpm add @mdit-kdu/plugin-component
yarn add @mdit-kdu/plugin-component
bun add @mdit-kdu/plugin-component
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-12-15 |
| First published | 2023-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 24.7 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | NKDuy |
| Maintainers | nkduy |
| Keywords | markdown-it, markdown-it-plugin, kdu, component |

## Links

- npm: https://www.npmjs.com/package/@mdit-kdu/plugin-component
- Repository: https://github.com/kdujs/mdit-kdu
- Issues: https://github.com/kdujs/mdit-kdu/issues
- npm.io page: https://npm.io/package/@mdit-kdu/plugin-component

## Dependencies (2)

- [markdown-it](https://npm.io/package/markdown-it.md) ^13.0.1
- [@types/markdown-it](https://npm.io/package/@types/markdown-it.md) ^13.0.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-12-15

## README

# @mdit-kdu/plugin-component

A [markdown-it](https://github.com/markdown-it/markdown-it) plugin to allow Kdu components in markdown.

- Treats [kdu built-in components](https://kdu-js.web.app/api/built-in-components.html) and unknown HTML tags as kdu components (markdown-it would treat them as inline tags by default).
- Allows kdu [`@` directive](https://kdu-js.web.app/api/built-in-directives.html#k-on) on native HTML tags.

## Install

```sh
npm i @mdit-kdu/plugin-component
```

## Usage

This plugin will only take effects when the `html` option of markdown-it is enabled:

```ts
import MarkdownIt from 'markdown-it';
import { componentPlugin } from '@mdit-kdu/plugin-component';

const md = MarkdownIt({ html: true }).use(componentPlugin, {
  // options
});

const rendered = md.render(
  `\
<!-- @ shorthand is supported -->
<Foo @click="onClick" />

<!-- multi-line syntax won't be wrapped with <p> -->
<Foo
  class="foo"
  :bar="bar"
/>
`,
);
```

## Options

### blockTags

- Type: `string[]`

- Default: `[]`

- Details:

  Extra tags to be treated as block tags.

  By default, all standard [HTML inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) will be treated as inline tags (excluding [Kdu built-in special elements](https://kdu-js.web.app/api/built-in-special-elements.html)). All unknown elements will be assumed as Kdu components, and will be treated as block tags (with slight differences).

  In some cases (should be rare though) you might want to force some tags to behave like block tags, then you can use this option to specify the tag names.

  Notice that this option is case-sensitive, and has higher priority than the [inlineTags](#inlinetags) option.

### inlineTags

- Type: `string[]`

- Default: `[]`

- Details:

  Extra tags to be treated as inline tags.

  By default, only standard [HTML inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) will be treated as inline tags (excluding [Kdu built-in special elements](https://kdu-js.web.app/api/built-in-special-elements.html)). All unknown elements will be assumed as Kdu components, and will be treated as block tags (with slight differences).

  Treating Kdu components like block tags would work as expected in most cases. However, in some cases you might want to force some tags to behave like inline tags, then you can use this option to specify the tag names.

  Notice that this option is case-sensitive, and has lower priority than the [blockTags](#blocktags) option.

---
_Source: https://npm.io/package/@mdit-kdu/plugin-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._