@mirrordown/remd-ruby

Part of Mirrordown — a suite of markdown syntax extensions for the unified and markdown-it ecosystems.

A remark/rehype (unified) plugin for the ruby syntax extension.

Overview

The ruby plugin renders {base|reading} as HTML <ruby> annotations, used for pronunciation guides in East Asian text.

<ruby>base<rt>reading</rt></ruby>

Syntax

Use {base text|reading} inline to annotate characters with their pronunciation or reading:

{漢字|かんじ} are Chinese-derived characters used in Japanese writing.

{東京|とうきょう} is the capital of Japan.

Optionally pass rp parentheses for fallback rendering in unsupported browsers:

Install

npm install @mirrordown/remd-ruby

Unified

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import { remarkRuby } from "@mirrordown/remd-ruby";

const processor = unified()
  .use(remarkParse)
  .use(remarkRuby)
  .use(remarkRehype)
  .use(rehypeStringify);

// With ruby parentheses for fallback support:
const processorWithRp = unified()
  .use(remarkParse)
  .use(remarkRuby, { rp: ["(", ")"] })
  .use(remarkRehype)
  .use(rehypeStringify);

Astro

// astro.config.ts
import { defineConfig } from "astro/config";
import { remarkRuby } from "@mirrordown/remd-ruby";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkRuby]
  }
});

VitePress

// .vitepress/config.ts
import { defineConfig } from "vitepress";
import { remarkRuby } from "@mirrordown/remd-ruby";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkRuby]
  }
});

Documentation

Full documentation, more examples, and configuration options: github.com/mirrordown/mirrordown (dedicated docs site coming soon).

License

MIT © Drake Costa