https://github.com/thomd/rehype-block
rehype plugin to wrap a block of markdown with a HTML tag
https://github.com/thomd/rehype-block
markdown rehype rehype-plugin
Last synced: 28 days ago
JSON representation
rehype plugin to wrap a block of markdown with a HTML tag
- Host: GitHub
- URL: https://github.com/thomd/rehype-block
- Owner: thomd
- License: mit
- Created: 2024-07-22T20:28:55.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-16T17:46:29.000Z (over 1 year ago)
- Last Synced: 2025-02-05T21:42:31.025Z (over 1 year ago)
- Topics: markdown, rehype, rehype-plugin
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rehype-block
![Build][build-badge]
`rehype-block` is a [rehype][rehype] plugin to wrap a block of markdown with a HTML tag. So what is does in fact is simply replacing markdown lines like for example `:::aside` and `:::` with `` and `` respectively.
The opening block requires an appended name to be used for the HTML tag (see example below).
> [!NOTE]
> This plugin does in fact the same as the plugin [remark-directive](https://github.com/remarkjs/remark-directive) but is less generic which can be a better fit for certain markdown situations. If you need more flexibility, use `remark-directive` instead.
## Usage
Say we have the following markdown file `example.md`:
```markdown
# headline
:::aside
foo
:::
text
:::aside:2
bar
:::
```
and a module `example.js`:
```js
import { remark } from 'remark'
import remarkRehype from 'remark-rehype'
import rehypeBlock from 'rehype-block'
import rehypeStringify from 'rehype-stringify'
import rehypeDocument from 'rehype-document'
import rehypeFormat from 'rehype-format'
import { read } from 'to-vfile'
const file = await remark()
.use(remarkRehype)
.use(rehypeBlock, { blockSymbol: ':::', classSymbol: ':' })
.use(rehypeDocument)
.use(rehypeFormat, { indent: '\t' })
.use(rehypeStringify)
.process(await read('example.md'))
console.log(file.value)
```
then running `node example.js` yields:
```html
example
headline
foo
text
bar
```
## Test
npm run test
## API
The default export is `rehypeBlock`.
```js
unified().use(rehypeBlock, options)
```
### Options
The following options are available:
- `blockSymbol` (`string`, optional) — symbol to be used to define a block. Default is `:::`.
- `classSymbol` (`string`, optional) — symbol to be used to separate an optional CSS class-name. Default is `:`.
- `prefixClassWithBlockSymbol` (`Boolean`, optional) — prefix CSS class-name with block symbol. Default is `false`.
- `wrapperTag` (`string`, optional) — tag name to be used to wrap the content of a block. Default is no wrapper tag.
[rehype]: https://github.com/rehypejs/rehype
[build-badge]: https://github.com/thomd/rehype-block/workflows/plugin-test/badge.svg