This remark plugin parses custom Markdown syntax to produce (HTML) ruby.
It introduces a new MDAST node type: "ruby".
interface ruby <: Node {
type: "ruby";
base: string;
text: string;
data: {
hName: "ruby";
hChildren: [
{
type: 'text',
value: string,
},
{
type: 'element',
children: [
{ type: 'text', value: string }
],
tagName: 'rp',
},
{
type: 'element',
children: [
{ type: 'text', value: string }
],
tagName: 'rt',
},
{
type: 'element',
children: [
{ type: 'text', value: string },
],
tagName: 'rp',
}
],
},
}
Ruby is defined in the following way:
This plugin works on {Markdown AST}^(MDAST).
This would compile to the following HTML:
<p>This plugin works on <ruby>Markdown AST<rp>(</rp><rt>MDAST</rt><rp>)</rp></p>
You could also use []
to delimit text:
{[紳][士]}^([へん][たい])
This would compile to the following HTML:
<p><ruby><rb>紳</rb><rb>士</rb><rp>(</rp><rt>へん</rt><rt>たい</rt><rp>)</rp></ruby></p>
Notice that this requires the usage of rb
tag, which is not supported by most of the browsers
except Firefox. Check caniuse for details.
npm:
npm install remark-ruby
Dependencies:
const unified = require('unified')
const remarkParse = require('remark-parse')
const remarkRuby = require('remark-ruby')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')
Usage:
unified()
.use(remarkParse)
.use(remarkRuby)
.use(remark2rehype)
.use(stringify)
Ruby fallback parenthesis which will be used in rp
tag. It should be a string with at most two characters. The first will be used as left parenthesis, the last will be used as right parenthesis.
By default, it's value is ()
.
example
.use(remarkAbbr, { parenthesis: '「」' })
given
This plugin works on {Markdown AST}^(MDAST).
produces
<p>This plugin works on <ruby>Markdown AST<rp>「</rp><rt>MDAST</rt><rp>」</rp></p>