Inline Ruby Annotation

approved

by Baksi Li

Render Inline Annotation ruby, bouten, underline, and two-slot annotations in reading view. - This plugin has not been manually reviewed by Obsidian staff.

2 stars105 downloadsUpdated 15d agoMIT

Inline Ruby Annotation for Obsidian

Render Inline Annotation syntax as ruby/furigana, over/under glosses, bouten, overlines, and underlines in Obsidian.

[漢字]^^(かんじ)
[base]^^(over)^_(under)
[重要]^^(..)^_(.~)

The plugin supports Reading view and an early Live Preview replacement widget. Both use the model from markdown-it-inline-annotation/core.

Behavior

SurfaceSupport
Reading viewyes
Live Previewprototype; reveals source while editing the expression
Source modeoriginal Markdown source
Commands and settingsnot yet
Network access or external resourcesnone

The adapter uses conservative spaceAlignment: "auto": phonetic readings such as [取り返す]^^(と り かえ す) align per character, while glosses such as [真值]^^(Truth Value) stay grouped.

Host Boundaries

Obsidian parses Markdown before Reading-view postprocessors run. The adapter:

  • renders complete expressions inside a plain or consistently formatted run;
  • may join adjacent plain text nodes and attribute-free spans;
  • does not join across emphasis, highlight, link, code, or another semantic boundary;
  • skips existing links, code, preformatted blocks, ruby elements, scripts, styles, textareas, and data-inline-annotation-ignore elements.

Annotation slots are plain text. Rich Markdown such as [term]^^(**bold gloss**) is intentionally not reconstructed after Obsidian has split it into semantic DOM nodes. Preserving the source and formatting is safer than silently flattening them to form an annotation.

Live Preview has a separate CodeMirror integration because it operates on source ranges rather than rendered DOM. See docs/live-preview-notes.md for its current tradeoffs.

Styling

The bundled stylesheet exposes a small customization surface:

body {
  --ia-rt-font-size: 0.65em;
  --ia-rt-line-height: 1;
  --ia-underline-offset: 0.15em;
}

Development

npm install
npm run check

npm run check builds the plugin, runs the shared rendering and segment-boundary fixtures, tests Live Preview source ranges, and verifies package safety rules. The core package is bundled into main.js; Obsidian and its CodeMirror packages remain external so the editor keeps one CodeMirror runtime.

To test the runtime files in a vault:

npm run install:vault -- "/path/to/Vault" --clean --enable --examples

Then reload Obsidian or disable and re-enable the plugin. The installer copies only main.js, manifest.json, versions.json, and styles.css; --examples also installs the maintained smoke and showcase notes.

To update the published core intentionally:

npm run update:core
npm run check

Ecosystem

Safety

Generated DOM is built with DOM APIs. User-authored text is escaped by the shared core, and the plugin loads no scripts or remote resources.

License

MIT

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.