rEcomment: MD/LaTeX Comments for VS Code

[!IMPORTANT] Beta Version: rEcomment is currently in beta. We are actively refining the rendering engine and SVG-slicing technology. Please report any issues on GitHub!

rEcomment is a powerful Visual Studio Code extension that brings rich Markdown and LaTeX rendering directly into your source code comments. Say goodbye to plain-text limitations and visualize documentation, complex math formulas, and diagrams where they belong—right next to your code.

✨ Features

• 📝 Full Markdown Support: Render headers, lists, bold/italic text, and code blocks inside comments.
• ➗ LaTeX Integration: High-fidelity math rendering using KaTeX.
• ⚡ Seamless Workflow: Comments are rendered automatically. Focus on a comment to edit the raw text; move away to see the rendered view.
• 🎨 Pixel-Perfect Alignment: Innovative SVG-slicing technology ensures rendered content aligns perfectly with your editor's line height.
• 🐍 Language Agnostic: Support for Python, JavaScript, TypeScript, C, C++, Rust, and more.

🚀 Usage

Wrap your Markdown content in <md> tags within comments:

Python

# <md>
# # Algorithm Optimization
# This function implements the gradient descent update:
# $$ \theta_{j} := \theta_{j} - \alpha \frac{\partial}{\partial \theta_{j}} J(\theta) $$
# </md>
def gradient_descent(...):
    ...

TypeScript / JavaScript

/* <md>
 * ## Configuration Schema
 * | Property | Type | Default |
 * | :--- | :--- | :--- |
 * | `enabled` | `boolean` | `true` |
 * </md>
 */
const config = { ... };

🏗️ Architecture

rEcomment uses a sophisticated multi-stage pipeline to achieve its unique rendering effect:

1. Parser (commentParser.ts): Scans the active document for <md> tags inside language-specific comment markers.
2. Renderer (renderer.ts): Converts Markdown and LaTeX into sanitized HTML using markdown-it and KaTeX.
3. Measurement (measurementProvider.ts): A hidden Webview measures the rendered HTML and generates precise SVG slices for each line.
4. Decoration (decorationProvider.ts): Orchestrates VS Code's decoration API to overlay the SVG slices while hiding the underlying raw comment text.

🛠️ Development

Prerequisites

• Node.js (v16 or higher)
• Visual Studio Code

Setup & Run

1. Clone the repository.
2. Install dependencies:

   npm install
   

3. Compile the project:

   npm run compile
   

4. Press F5 in VS Code to open a new "Extension Development Host" window with rEcomment loaded.

Running Tests

The project includes automated tests for the parser and renderer:

npm test

⚙️ Configuration

rEcomment can be toggled via your VS Code settings:

📂 Project Structure

• src/extension.ts: Main entry point and lifecycle management.
• src/commentParser.ts: Logic for detecting Markdown blocks in different languages.
• src/renderer.ts: Markdown and KaTeX rendering logic.
• src/measurementProvider.ts: Webview-based measurement and SVG generation.
• src/decorationProvider.ts: VS Code Decoration API orchestration.

Find the code at https://github.com/valk/rEcomment/

Contributors are warmly welcomed to contribute!

Built with ❤️.