# HTML Entity Renderer for Obsidian

Renders HTML character entities in Live Preview without changing the Markdown source.

Examples:

- `©` displays as ©
- `&` displays as &
- `—` displays as —
- `©` displays as ©
- `©` displays as ©

When the cursor enters an entity, the original source is revealed so it can be edited.

Entities are only rendered in Live Preview. Source mode, inline code, code blocks, and backslash-escaped entities (`\©`) are left as written, matching Reading view.

Entities that would display as nothing or as a line break (`
`, `	`, `­`, `‍`, `​`) and invalid numeric references (`�`, `�`) are also left as source, so they stay visible and editable.

## Screenshots

![A note with HTML entities, shown before and after the plugin](https://raw.githubusercontent.com/rflukerii-dev/html-entity-renderer/main/screenshots/01-before-after.png)

| ![Moving the cursor into an entity reveals its source for editing](https://raw.githubusercontent.com/rflukerii-dev/html-entity-renderer/main/screenshots/02-cursor-reveal.png) | ![A real note using named entities for typography](https://raw.githubusercontent.com/rflukerii-dev/html-entity-renderer/main/screenshots/03-real-note.png) |
|---|---|
| ![Entities inside inline code and code blocks stay as written](https://raw.githubusercontent.com/rflukerii-dev/html-entity-renderer/main/screenshots/04-code-stays-code.png) | ![Rendered entities in light and dark themes](https://raw.githubusercontent.com/rflukerii-dev/html-entity-renderer/main/screenshots/05-any-theme.png) |

### Mobile

| Before and after | Real note |
|---|---|
| ![A note with HTML entities on mobile, shown before and after the plugin](https://raw.githubusercontent.com/rflukerii-dev/html-entity-renderer/main/screenshots/m01-before-after.png) | ![A real note on mobile using named entities for typography](https://raw.githubusercontent.com/rflukerii-dev/html-entity-renderer/main/screenshots/m02-real-note.png) |

## Install

### From Community plugins

1. In Obsidian, open **Settings → Community plugins**.
2. Turn off **Restricted mode**.
3. Click **Browse**, search for **HTML Entity Renderer**, then select **Install** and **Enable**.

### Manually

1. Close Obsidian, or leave it open and reload after installation.
2. Open your vault folder.
3. Open `.obsidian/plugins/`.
4. Create a folder named `html-entity-renderer`.
5. Put `main.js`, `manifest.json`, and `styles.css` in that folder.
6. In Obsidian, go to **Settings → Community plugins**.
7. If prompted, turn off **Restricted mode**.
8. Click the refresh/reload button if the plugin is not listed, or restart Obsidian.
9. Enable **HTML Entity Renderer**.

## Try it

Test with:

    Copyright © 2026
    Fish & Chips
    A B
    © and ©

The file itself remains unchanged; only the Live Preview display is decorated.

## Limitations

- Find matches the source text, not the rendered character. Search for `—`, not an em dash.
- Copying a selection copies the source, so pasting gives `—`, not an em dash.

## Development

`package.json` and `tests/` are only needed for development; don't copy them into the vault. To run the unit tests (Node.js 18 or later):

    npm install
    npm test

## Report issues

Found a bug or have an idea? [Open an issue](https://github.com/rflukerii-dev/html-entity-renderer/issues).

## License

[MIT](LICENSE)