https://github.com/tomeraberbach/remark-admonition

A remark plugin for rendering admonitions from directives.
https://github.com/tomeraberbach/remark-admonition

admonition callout markdown npm-module npm-package remark remark-plugin

Last synced: 3 months ago
JSON representation

A remark plugin for rendering admonitions from directives.

• Host: GitHub
• URL: https://github.com/tomeraberbach/remark-admonition
• Owner: TomerAberbach
• License: apache-2.0
• Created: 2024-04-20T16:04:32.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-06-19T01:25:00.000Z (7 months ago)
• Last Synced: 2024-10-12T01:23:29.710Z (3 months ago)
• Topics: admonition, callout, markdown, npm-module, npm-package, remark, remark-plugin
• Language: TypeScript
• Homepage: https://npm.im/remark-admonition
• Size: 213 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • Contributing: contributing.md
  • License: license

Awesome Lists containing this project

README

        


  remark-admonition





  

    

  

  

    

  

  

    

  

  

    

  





  A remark plugin for rendering admonitions from directives.



## Install

```sh

$ npm i remark-admonition

```

## Usage

```js

import { DEFAULT_ADMONITION_TYPES, remarkAdmonition } from 'remark-admonition'

import { unified } from 'unified'

import remarkParse from 'remark-parse'

import remarkDirective from 'remark-directive'

import remarkRehype from 'remark-rehype'

import rehypeStringify from 'rehype-stringify'

console.log(

  unified()

    .use(remarkParse)

    .use(remarkDirective)

    .use(remarkAdmonition, {

      defaultElement: `section`,

      defaultProperties: { 'data-admonish': `true` },

      types: new Map([

        ...DEFAULT_ADMONITION_TYPES,

        [

          `fyi`,

          {

            defaultLabel: `FYI`,

            element: `div`,

            properties: { style: `color: blue;` },

          },

        ],

      ]),

    })

    .use(remarkRehype)

    .use(rehypeStringify).processSync(`

# Hello World!

:::note

Be careful folks!

:::

:::fyi[**title** time]

Wowowow!

:::

    `),

)

```

Output:

```html

Hello World!


  
Be careful folks!




  
Wowowow!



```


Of course, instead of directly converting to HTML you can write a plugin that

processes the attributes added by this plugin.

## Contributing

Stars are always welcome!

For bugs and feature requests,

[please create an issue](https://github.com/TomerAberbach/remark-admonition/issues/new).

For pull requests, please read the

[contributing guidelines](https://github.com/TomerAberbach/remark-admonition/blob/main/contributing.md).

## License

[Apache License 2.0](https://github.com/TomerAberbach/remark-admonition/blob/main/license)

This is not an official Google product.