}
})
.use(rehypeStringify)

const result = await processor.process('[b]Bold[/b] [quote]Quote[/quote]')
console.log(String(result))
//

Bold

Quote

`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeStringify from 'rehype-stringify'

const processor = unified()
.use(bbcodeParser)
.use(bbcodeRehype, {
classNames: {
bold: 'my-bold',
italic: 'my-italic',
quote: 'my-quote'
}
})
.use(rehypeStringify)

const result = await processor.process('[b]Bold[/b] [quote]Quote[/quote]')
console.log(String(result))
//

Bold

Quote


`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeStringify from 'rehype-stringify'

const processor = unified()
.use(bbcodeParser)
.use(bbcodeRehype, {
defaultImageAttributes: {
loading: 'lazy',
decoding: 'async'
}
})
.use(rehypeStringify)

const bbcode =
[quote author="John"]
[b]Important:[/b] Check out this [url=https://example.com]awesome site[/url]!

[img=https://example.com/image.jpg]

[code]
const example = 'Hello World';
console.log(example);
[/code]
[/quote]

const result = await processor.process(bbcode)
console.log(String(result))
//

//

Important: Check out this awesome site!

//

//

const example = 'Hello World';
// console.log(example);

//


`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeStringify from 'rehype-stringify'

const processor = unified()
.use(bbcodeParser, { paragraphs: false })
.use(bbcodeRehype, { paragraphs: false })
.use(rehypeStringify)

const result = await processor.process('[b]Bold[/b] [i]italic[/i]')
console.log(String(result))
// Bold italic
`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeStringify from 'rehype-stringify'
import { read, write } from 'to-vfile'

const processor = unified()
.use(bbcodeParser)
.use(bbcodeRehype)
.use(rehypeStringify)

const input = await read('content.bbcode')
const result = await processor.process(input)
await write({ path: 'output.html', contents: String(result) })
`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeFormat from 'rehype-format'
import rehypeMinify from 'rehype-preset-minify'
import rehypeStringify from 'rehype-stringify'

// Pretty-formatted HTML
const prettyProcessor = unified()
.use(bbcodeParser)
.use(bbcodeRehype)
.use(rehypeFormat)
.use(rehypeStringify)

// Minified HTML
const minifyProcessor = unified()
.use(bbcodeParser)
.use(bbcodeRehype)
.use(rehypeMinify)
.use(rehypeStringify)
`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeStringify from 'rehype-stringify'

const processor = unified()
.use(bbcodeParser, {
customTags: {
spoiler: (tagName, attributes, children) => ({
type: 'spoiler',
revealed: attributes.revealed === 'true',
children
}),
youtube: (tagName, attributes) => ({
type: 'video',
provider: 'youtube',
id: attributes.youtube || attributes.id
})
}
})
.use(bbcodeRehype, {
// Custom element mapping for the custom tags
elementMappings: {
spoiler: 'details',
video: 'iframe'
}
})
.use(rehypeStringify)

const result = await processor.process('[spoiler]Hidden content[/spoiler]')
`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeStringify from 'rehype-stringify'
import { stream } from 'unified-stream'

const processor = unified()
.use(bbcodeParser)
.use(bbcodeRehype)
.use(rehypeStringify)

process.stdin
.pipe(stream(processor))
.pipe(process.stdout)
`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import { inspect } from 'unist-util-inspect'

const processor = unified()
.use(bbcodeParser)
.use(() => (tree) => {
console.log('BBCode AST:')
console.log(inspect(tree))
return tree
})
.use(bbcodeRehype)
.use(() => (tree) => {
console.log('HTML AST:')
console.log(inspect(tree))
return tree
})

await processor.process('[b]Hello[/b] [i]World[/i]!')
`

Integration with Unified Ecosystem

This plugin integrates seamlessly with the unified ecosystem:

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeHighlight from 'rehype-highlight'
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeStringify from 'rehype-stringify'

const processor = unified()
.use(bbcodeParser)
.use(bbcodeRehype)
.use(rehypeHighlight) // Syntax highlighting for code blocks
.use(rehypeSlug) // Add IDs to headings
.use(rehypeAutolinkHeadings) // Add links to headings
.use(rehypeStringify)
`

$3

`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeFormat from 'rehype-format'
import rehypeDocument from 'rehype-document'
import rehypeStringify from 'rehype-stringify'

const processor = unified()
.use(bbcodeParser)
.use(bbcodeRehype, {
classNames: {
quote: 'blockquote',
code: 'code-block'
}
})
.use(rehypeDocument, {
title: 'BBCode Content',
css: ['styles.css'],
meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }]
})
.use(rehypeFormat)
.use(rehypeStringify)

const result = await processor.process('[b]Hello[/b] [i]World[/i]!')
// Outputs complete HTML document with head, body, etc.
`

Supported Transformations

This plugin supports all transformations handled by @onachi/bbast-util-to-hast:

$3


- [b]bold[/b] → or
- [i]italic[/i] → or
- [u]underline[/u] →
- [s]strikethrough[/s] → or

$3

- [color=red]text[/color] →
- [size=large]text[/size] →
- [font=Arial]text[/font] →

$3

- [center]text[/center] →


- [left]text[/left] →


- [right]text[/right] →

$3

- [url=https://example.com]Link[/url] → Link
- [img=https://example.com/image.jpg] →

$3

- [quote]text[/quote] →

text


- [code]code[/code] → code

$3

- [list][li]item[/li][/list] →

• item

`

For complete documentation of supported transformations, see @onachi/bbast-util-to-hast.

Related

- @onachi/bbast — BBCode Abstract Syntax Tree format
- @onachi/bbast-util-from-bbcode — Convert BBCode to bbast
- @onachi/bbast-util-to-hast — Convert bbast to hast
- @onachi/bbcode-parser — Unified plugin to parse BBCode
- unified — Text processing framework
- hast — HTML Abstract Syntax Tree format
- rehype — HTML processor built on unified

License

MIT

Show more