This PR adds support for footnote references in Markdown content using the syntax [^1], [^note], etc. Footnote references are rendered as superscript text that blends naturally with the surrounding content.
Footnote references are very common in RAG-generated content. Therefore, it is essential that Open-WebUI correctly renders these footnotes for improved readability and visual consistency.
Adds support for footnote references in Markdown content using the syntax [^1], [^note]
Supported syntax :
This is text with a footnote[^1] and another[^note].
Multiple consecutive footnotes[^a][^b][^c] are properly spaced.
Rendering Behavior
Footnotes appear as superscript text
Inherit text color from surrounding content
Subtle hover effects for better UX
Proper spacing prevents visual crowding
Screenshots
Breaking Changes
n/a
Changes Made
New Extension (src/lib/utils/marked/footnote-extension.ts)
Created: New marked extension for parsing footnote reference syntax
Pattern: Supports [^identifier] where identifier can be alphanumeric, underscore, or hyphen
Security: Implements proper HTML escaping for all user content
Output: Generates clean superscript HTML with semantic CSS classes
Integration Updates
Markdown.svelte: Added footnote extension to the marked processing pipeline
MarkdownInlineTokens.svelte: Added rendering support for footnoteRef token type
Positioning: Footnote handling placed appropriately in the token processing flow
Styling (src/app.css)
Visual Design: Footnote references inherit parent text color and use normal font weight
Typography: Optimized superscript sizing (0.7em) and positioning (0.3em vertical-align)
User Experience: Subtle hover effect with opacity transition
Spacing: Proper margin (0.3em) between consecutive footnotes
Security
All user input is HTML-escaped
XSS protection through proper sanitization
Safe HTML generation using marked's renderer API
Testing Considerations
Footnote references render correctly as superscript
HTML escaping prevents XSS vulnerabilities
Multiple consecutive footnotes display with proper spacing
Hover effects work smoothly across different themes
Future Enhancements
RAG system( like LightRAG) provides a structured list of referenced documents alongside the LLM-generated response, enabling us to render footnote references as clickable HTTP links that open the original source webpages.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/open-webui/open-webui/pull/17870
**Author:** [@danielaskdd](https://github.com/danielaskdd)
**Created:** 9/28/2025
**Status:** ❌ Closed
**Base:** `dev` ← **Head:** `main`
---
### 📝 Commits (2)
- [`02fcf4f`](https://github.com/open-webui/open-webui/commit/02fcf4f630f8ce5bb52a53987e7fb0bb282881c3) Add footnote reference support to markdown renderer
- [`3f1dabe`](https://github.com/open-webui/open-webui/commit/3f1dabeaaf108b696181316d0e8be876dbaa6d02) Merge branch 'dev'
### 📊 Changes
**4 files changed** (+66 additions, -0 deletions)
<details>
<summary>View changed files</summary>
📝 `src/app.css` (+20 -0)
📝 `src/lib/components/chat/Messages/Markdown.svelte` (+2 -0)
📝 `src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte` (+2 -0)
➕ `src/lib/utils/marked/footnote-extension.ts` (+42 -0)
</details>
### 📄 Description
## feat: Add Footnote Reference Support to Markdown
### Overview
This PR adds support for footnote references in Markdown content using the syntax `[^1]`, `[^note]`, etc. Footnote references are rendered as superscript text that blends naturally with the surrounding content.
Footnote references are very common in RAG-generated content. Therefore, it is essential that Open-WebUI correctly renders these footnotes for improved readability and visual consistency.
**Related Discussion** : #17867
### Feature Added
* Adds support for footnote references in Markdown content using the syntax `[^1]`, `[^note]`
* Supported syntax :
```
This is text with a footnote[^1] and another[^note].
Multiple consecutive footnotes[^a][^b][^c] are properly spaced.
```
### Rendering Behavior
- Footnotes appear as superscript text
- Inherit text color from surrounding content
- Subtle hover effects for better UX
- Proper spacing prevents visual crowding
### Screenshots
<img width="1083" height="777" alt="image" src="https://github.com/user-attachments/assets/1c9ba0af-9618-46d8-8fe0-dc5adcb886e9" />
### Breaking Changes
n/a
### Changes Made
#### New Extension (`src/lib/utils/marked/footnote-extension.ts`)
- **Created**: New marked extension for parsing footnote reference syntax
- **Pattern**: Supports `[^identifier]` where identifier can be alphanumeric, underscore, or hyphen
- **Security**: Implements proper HTML escaping for all user content
- **Output**: Generates clean superscript HTML with semantic CSS classes
#### Integration Updates
- **Markdown.svelte**: Added footnote extension to the marked processing pipeline
- **MarkdownInlineTokens.svelte**: Added rendering support for `footnoteRef` token type
- **Positioning**: Footnote handling placed appropriately in the token processing flow
#### Styling (`src/app.css`)
- **Visual Design**: Footnote references inherit parent text color and use normal font weight
- **Typography**: Optimized superscript sizing (0.7em) and positioning (0.3em vertical-align)
- **User Experience**: Subtle hover effect with opacity transition
- **Spacing**: Proper margin (0.3em) between consecutive footnotes
### Security
- All user input is HTML-escaped
- XSS protection through proper sanitization
- Safe HTML generation using marked's renderer API
### Testing Considerations
- Footnote references render correctly as superscript
- HTML escaping prevents XSS vulnerabilities
- Multiple consecutive footnotes display with proper spacing
- Hover effects work smoothly across different themes
## Future Enhancements
RAG system( like LightRAG) provides a structured list of referenced documents alongside the LLM-generated response, enabling us to render footnote references as clickable HTTP links that open the original source webpages.
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/17870
Author: @danielaskdd
Created: 9/28/2025
Status: ❌ Closed
Base:
dev← Head:main📝 Commits (2)
02fcf4fAdd footnote reference support to markdown renderer3f1dabeMerge branch 'dev'📊 Changes
4 files changed (+66 additions, -0 deletions)
View changed files
📝
src/app.css(+20 -0)📝
src/lib/components/chat/Messages/Markdown.svelte(+2 -0)📝
src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte(+2 -0)➕
src/lib/utils/marked/footnote-extension.ts(+42 -0)📄 Description
feat: Add Footnote Reference Support to Markdown
Overview
This PR adds support for footnote references in Markdown content using the syntax
[^1],[^note], etc. Footnote references are rendered as superscript text that blends naturally with the surrounding content.Footnote references are very common in RAG-generated content. Therefore, it is essential that Open-WebUI correctly renders these footnotes for improved readability and visual consistency.
Related Discussion : #17867
Feature Added
[^1],[^note]Rendering Behavior
Screenshots
Breaking Changes
n/a
Changes Made
New Extension (
src/lib/utils/marked/footnote-extension.ts)[^identifier]where identifier can be alphanumeric, underscore, or hyphenIntegration Updates
footnoteReftoken typeStyling (
src/app.css)Security
Testing Considerations
Future Enhancements
RAG system( like LightRAG) provides a structured list of referenced documents alongside the LLM-generated response, enabling us to render footnote references as clickable HTTP links that open the original source webpages.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.