feat: add ruby plugin

docs/package.json

@@ -12,6 +12,7 @@
     "@mdit/plugin-abbr": "workspace:*",
     "@mdit/plugin-container": "workspace:*",
     "@mdit/plugin-insert": "workspace:*",
+    "@mdit/plugin-ruby": "workspace:*",
     "@mdit/plugin-snippet": "workspace:*",
     "@mdit/plugin-spoiler": "workspace:*",
     "@vuepress/bundler-vite": "2.0.0-rc.9",

docs/src/.vuepress/config.ts

@@ -2,6 +2,7 @@ import { abbr } from "@mdit/plugin-abbr";
 import { container } from "@mdit/plugin-container";
 // import { demo } from "@mdit/plugin-demo";
 import { insert } from "@mdit/plugin-insert";
+import { ruby } from "@mdit/plugin-ruby";
 import { snippet } from "@mdit/plugin-snippet";
 import { spoiler } from "@mdit/plugin-spoiler";
 import { cut } from "nodejs-jieba";
@@ -54,6 +55,7 @@ export default defineUserConfig({
       },
     });
     md.use(insert);
+    md.use(ruby);
     md.use(snippet, {
       currentPath: (env: MarkdownEnv) => env.filePath,
 

docs/src/README.md

@@ -89,6 +89,11 @@ features:
     details: Add plantuml diagram support
     link: ./plantuml.html
 
+  - title: ruby
+    icon: paperclip
+    details: Add ruby tag support
+    link: ./ruby.html
+
   - title: snippet
     icon: file-lines
     details: Import code snippets in markdown

docs/src/ruby.md

@@ -0,0 +1,58 @@
+---
+title: "@mdit/plugin-ruby"
+icon: paperclip
+---
+
+Plugin to support ruby annotation `<ruby>`.
+
+<!-- more -->
+
+## Usage
+
+::: code-tabs#language
+
+@tab TS
+
+```ts
+import MarkdownIt from "markdown-it";
+import { ruby } from "@mdit/plugin-ruby";
+
+const mdIt = MarkdownIt().use(ruby);
+
+mdIt.render("{中国:zhōng|guó}");
+```
+
+@tab JS
+
+```js
+const MarkdownIt = require("markdown-it");
+const { ruby } = require("@mdit/plugin-ruby");
+
+const mdIt = MarkdownIt().use(ruby);
+
+mdIt.render("{中国:zhōng|guó}");
+```
+
+:::
+
+## Syntax
+
+Use `{ruby base:ruby text1|ruby text2|...}` to add ruby annotation.
+
+::: tip Escaping
+
+- You can use `\` to escape `{` `:` or `}`:
+
+  ```md
+  \{中国:zhōng|guó}
+  ```
+
+  will be
+
+  \{中国:zhōng|guó}
+
+:::
+
+## Demo
+
+`{中国:zhōng|guó}`: {中国:zhōng|guó}

docs/src/zh/README.md

@@ -89,6 +89,11 @@ features:
     details: 添加 Plantuml 图表支持
     link: ./plantuml.html
 
+  - title: ruby
+    icon: paperclip
+    details: 添加 ruby 标签支持
+    link: ./ruby.html
+
   - title: snippet
     icon: file-lines
     details: 在 Markdown 中导入代码片段

docs/src/zh/ruby.md

@@ -0,0 +1,58 @@
+---
+title: "@mdit/plugin-ruby"
+icon: paperclip
+---
+
+提供 `<ruby>` 声明支持的插件。
+
+<!-- more -->
+
+## 使用
+
+::: code-tabs#language
+
+@tab TS
+
+```ts
+import MarkdownIt from "markdown-it";
+import { ruby } from "@mdit/plugin-ruby";
+
+const mdIt = MarkdownIt().use(ruby);
+
+mdIt.render("{中国:zhōng|guó}");
+```
+
+@tab JS
+
+```js
+const MarkdownIt = require("markdown-it");
+const { ruby } = require("@mdit/plugin-ruby");
+
+const mdIt = MarkdownIt().use(ruby);
+
+mdIt.render("{中国:zhōng|guó}");
+```
+
+:::
+
+## 格式
+
+通过 `{ruby base:ruby text1|ruby text2|...}` 来添加 ruby 声明。
+
+::: tip 转义
+
+- 你可以使用 `\` 来转义 `{` `}` 或 `:`:
+
+  ```md
+  \{中国:zhōng|guó}
+  ```
+
+  会被渲染为
+
+  \{中国:zhōng|guó}
+
+:::
+
+## 示例
+
+`{中国:zhōng|guó}`: {中国:zhōng|guó}

packages/ruby/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Hiroshi Takase.
+Copyright (C) 2022 - PRESENT by MrHope
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

packages/ruby/README.md

@@ -0,0 +1,18 @@
+# @mdit/plugin-ruby
+
+[![Version](https://img.shields.io/npm/v/@mdit/plugin-ruby.svg?style=flat-square&logo=npm) ![Downloads](https://img.shields.io/npm/dm/@mdit/plugin-ruby.svg?style=flat-square&logo=npm) ![Size](https://img.shields.io/bundlephobia/min/@mdit/plugin-ruby?style=flat-square&logo=npm)](https://www.npmjs.com/package/@mdit/plugin-ruby)
+
+Mark plugin for MarkdownIt.
+
+## [Docs](https://mdit-plugins.github.io/ruby.html) | [文档](https://mdit-plugins.github.io/zh/ruby.html)
+
+## Install / 安装
+
+```bash
+# pnpm
+pnpm add -D @mdit/plugin-ruby
+# npm
+npm i -D @mdit/plugin-ruby
+# yarn
+yarn add -D @mdit/plugin-ruby
+```

packages/ruby/__tests__/ruby.spec.ts

@@ -0,0 +1,78 @@
+import MarkdownIt from "markdown-it";
+import { expect, it } from "vitest";
+
+import { ruby } from "../src/index.js";
+
+const markdownIt = MarkdownIt({ linkify: true }).use(ruby);
+
+it("should render", () => {
+  const tests: [content: string, expected: string][] = [
+    [
+      `{ruby base:ruby text}`,
+      `<p><ruby>ruby base<rt>ruby text</rt></ruby></p>\n`,
+    ],
+    [
+      `{鬼:き}{門:もん}の{方:ほう}{角:がく}を{凝:ぎょう}{視:し}する。`,
+      `<p><ruby>鬼<rt>き</rt></ruby><ruby>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt></ruby><ruby>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt></ruby><ruby>視<rt>し</rt></ruby>する。</p>\n`,
+    ],
+    [
+      `{鬼門:き|もん}の{方角:ほう|がく}を{凝視:ぎょう|し}する。`,
+      `<p><ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する。</p>\n`,
+    ],
+    [`{編集者:editor}`, `<p><ruby>編集者<rt>editor</rt></ruby></p>\n`],
+    [`{editor:エディター}`, `<p><ruby>editor<rt>エディター</rt></ruby></p>\n`],
+  ];
+
+  tests.forEach(([content, expected]) => {
+    expect(markdownIt.render(content)).toEqual(expected);
+  });
+});
+
+it("should work with other gramma", () => {
+  const tests: [content: string, expected: string][] = [
+    [
+      `**{ruby base:ruby text}**`,
+      `<p><strong><ruby>ruby base<rt>ruby text</rt></ruby></strong></p>\n`,
+    ],
+    [
+      `{**ruby base**:ruby text}`,
+      `<p><ruby><strong>ruby base</strong><rt>ruby text</rt></ruby></p>\n`,
+    ],
+    [
+      `{ruby base:**ruby text**}`,
+      `<p><ruby>ruby base<rt><strong>ruby text</strong></rt></ruby></p>\n`,
+    ],
+    [
+      `[{ruby base:ruby text}](http://example.com)`,
+      `<p><a href="http://example.com"><ruby>ruby base<rt>ruby text</rt></ruby></a></p>\n`,
+    ],
+    [
+      `{[ruby base](//example.com):ruby text}`,
+      `<p><ruby><a href="//example.com">ruby base</a><rt>ruby text</rt></ruby></p>\n`,
+    ],
+    [
+      `{ruby base:[ruby text](http://example.com)}`,
+      `<p><ruby>ruby base<rt><a href="http://example.com">ruby text</a></rt></ruby></p>\n`,
+    ],
+  ];
+
+  tests.forEach(([content, expected]) => {
+    expect(markdownIt.render(content)).toEqual(expected);
+  });
+});
+
+it("do not break text", () => {
+  expect(markdownIt.render(`Lore ipsum.`)).toEqual(`<p>Lore ipsum.</p>\n`);
+});
+
+it("should not parse", () => {
+  const tests: [content: string, expected: string][] = [
+    [`\\{ruby base:ruby text}`, `<p>{ruby base:ruby text}</p>\n`],
+    [`{ruby base\\:ruby text}`, `<p>{ruby base:ruby text}</p>\n`],
+    [`{ruby base|ruby text\\}`, `<p>{ruby base|ruby text}</p>\n`],
+  ];
+
+  tests.forEach(([content, expected]) => {
+    expect(markdownIt.render(content)).toEqual(expected);
+  });
+});

packages/ruby/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@mdit/plugin-ruby",
+  "version": "0.9.0",
+  "description": "ruby plugin for MarkdownIt",
+  "keywords": [
+    "markdown-it",
+    "markdown-it-plugin",
+    "ruby"
+  ],
+  "homepage": "https://mdit-plugins.github.io/mark.html",
+  "bugs": {
+    "url": "https://mdit-plugins/mdit-plugins/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mdit-plugins/mdit-plugins.git",
+    "directory": "packages/ruby"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Mr.Hope",
+    "email": "mister-hope@outlook.com",
+    "url": "https://mister-hope.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "type": "./lib/index.ts",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.ts --configPlugin esbuild",
+    "clean": "rimraf ./lib"
+  },
+  "dependencies": {
+    "@types/markdown-it": "^14.0.1"
+  },
+  "peerDependencies": {
+    "markdown-it": "^14.1.0"
+  },
+  "peerDependenciesMeta": {
+    "markdown-it": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">= 18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/ruby/rollup.config.ts

@@ -0,0 +1,3 @@
+import { rollupTypescript } from "../../scripts/rollup.js";
+
+export default rollupTypescript("index");

packages/ruby/src/index.ts

@@ -0,0 +1 @@
+export * from "./plugin.js";