Unified plugin to convert BBCode AST to HAST (HTML Abstract Syntax Tree)
npm install @onachi/bbcode-rehypeUnified plugin to convert BBCode AST (bbast) to hast (HTML Abstract Syntax Tree).
``bash`
npm install @onachi/bbcode-rehypeor
pnpm add @onachi/bbcode-rehypeor
yarn add @onachi/bbcode-rehype
`typescript
import { unified } from 'unified'
import bbcodeParser from '@onachi/bbcode-parser'
import bbcodeRehype from '@onachi/bbcode-rehype'
import rehypeStringify from 'rehype-stringify'
// Complete BBCode to HTML pipeline
const processor = unified()
.use(bbcodeParser)
.use(bbcodeRehype)
.use(rehypeStringify)
const result = await processor.process('[b]Hello[/b] [i]World[/i]!')
console.log(String(result))
//
Hello World!
API
$3
Unified plugin that transforms bbast syntax tree to hast.
#### Parameters
-
options (ToHastOptions, optional) - Transform options (same as @onachi/bbast-util-to-hast)#### Returns
Returns a unified plugin that transforms bbast to hast.
$3
Transform configuration options (inherited from
@onachi/bbast-util-to-hast):`typescript
interface ToHastOptions {
/* Whether to create paragraphs for text blocks (default: true) /
paragraphs?: boolean
/* Custom element mappings /
elementMappings?: Partial
/* Custom class names for elements /
classNames?: Partial
/* Whether to preserve data attributes (default: true) /
preserveDataAttributes?: boolean
/* Default image attributes /
defaultImageAttributes?: Properties
}
`For detailed documentation of these options, see @onachi/bbast-util-to-hast.
Examples
$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)
.use(rehypeStringify)
const bbcode = '[b]Bold text[/b] and [i]italic text[/i]'
const result = await processor.process(bbcode)
console.log(String(result))
//
Bold text and italic text
`$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, {
elementMappings: {
bold: 'b', // Use instead of
italic: 'i', // Use instead of
quote: 'div' // Use instead of
}
})
.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