https://github.com/martypdx/rehype-add-classes

Add classes to HAST html by selector
https://github.com/martypdx/rehype-add-classes

html rehype rehype-plugin

Last synced: 3 months ago
JSON representation

Add classes to HAST html by selector

• Host: GitHub
• URL: https://github.com/martypdx/rehype-add-classes
• Owner: martypdx
• License: mit
• Created: 2018-02-22T21:22:01.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-08-14T23:01:45.000Z (over 1 year ago)
• Last Synced: 2024-04-29T11:05:43.264Z (9 months ago)
• Topics: html, rehype, rehype-plugin
• Language: JavaScript
• Size: 185 KB
• Stars: 17
• Watchers: 3
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-astro - rehype-add-classes - Markdown plugin that lets you add classes(tailwind) to selectors (What Do I Use... / If I want to style my markdown?)

README

        
# rehype-add-classes

Consider using this fork of the project which is currently being maintained:

https://github.com/tycol7/rehype-add-classes

---

Add classes by selector to elements with [**rehype**][rehype]. 

Useful for adding:

* `hljs` class to `
` tag when converting markdown code snippets to html

* Required css framework classes to elements (for example using [Bulma][bulma])


## Installation

[npm][]:

```bash

npm install rehype-add-classes

```

## Usage

Consider the following `example.js` with rehype processor (or use unified) setup as follows:

```javascript

import rehype from 'rehype';

import vfile from 'to-vfile';

import addClasses from 'rehype-add-classes';

const processor = rehype()

    .data('settings', { fragment: true })

    .use(addClasses, {

        pre: 'hljs',

        'h1,h2,h3': 'title',

        h1: 'is-1',

        h2: 'is-2',

        p: 'one two'

    });

const html = `

    


    
header

    
sub 1

    
sub 2

    


`;


const { contents } = processor.processSync(vfile({ contents: html }));

console.log(contents);

```

Now, running `node example.js` yields:

```console

    


    
header

    
sub 1

    
sub 2

    


```


## API

### `rehype().use(addClasses, additions)`

Add to `rehype` or `unified` pipeline with `.use`, where `additions` is an object

with keys that are the css selectors and the values are a string to add to 

the `class` of each found node.

Example:

```js

{

    pre: 'hljs',         

    'h1,h2,h3': 'title',

    h1: 'is-1',         

    h2: 'is-2',         

    p: 'one two'

}       

```

* Results are cumulative: `
`

* `value` is added to existing classes: `
sub 2
`

* Whole of string indicated by `value` is added: `
`

This library uses `hast-util-select` under the hood. See [these details][supported-selectors]

for supported selectors.

## License

[MIT][license] ©2018 [Marty Nelson][author]

[author]: https://github.com/martypdx

[bulma]: https://bulma.io

[npm]: https://docs.npmjs.com/cli/install

[license]: LICENSE

[rehype]: https://github.com/rehypejs/rehype

[supported-selectors]: https://github.com/syntax-tree/hast-util-select#support

[travis-badge]: https://img.shields.io/travis/martypdx/rehype-add-classes.svg

[travis]: https://travis-ci.org/martypdx/rehype-add-classes