A VS Code extension that automatically detects when README.md files are opened and displays them as beautifully rendered Markdown in a webview instead of the default text editor.
Features
Automatic Detection: Automatically detects when README.md files (case-insensitive) are opened
Markdown Rendering: Uses VS Code's built-in markdown renderer to display rich formatting
Live Updates: Content updates automatically when the README file is modified
VS Code Theming: Respects your VS Code theme colors and styling
No User Interaction Required: Works silently in the background
How It Works
Open any README.md file in VS Code
The extension automatically:
Closes the default text editor for the README file
Opens a webview panel with the rendered Markdown content
Updates the content live as you edit the file
Installation
Clone this repository
Open the project in VS Code
Run npm install to install dependencies
Press F5 to run the extension in a new Extension Development Host window
Development
Building
npm run compile
Running
Press F5 to open a new window with your extension loaded
Open any README.md file to see the extension in action
Testing
Open the debug console in VS Code (Ctrl+Shift+Y) to see logging output
Make changes to src/extension.ts and reload (Ctrl+R) to see changes
Technical Details
Architecture
File Detection: Uses workspace.onDidOpenTextDocument to detect when files are opened
Webview Creation: Uses window.createWebviewPanel to create the markdown preview panel
Markdown Rendering: Uses VS Code's markdown.api.render command for consistent rendering
Editor Management: Uses workbench.action.closeActiveEditor to close the default text editor
Key Components
README Detection: Case-insensitive detection of files named "readme.md"
Webview Management: Tracks open webview panels to prevent duplicates
Live Updates: Monitors document changes and updates webview content
Styling: CSS that respects VS Code theme variables for consistent appearance
Requirements
VS Code 1.101.0 or higher
No additional dependencies required
Known Issues
If VS Code's markdown renderer is unavailable, falls back to plain text display
Very large README files may take a moment to render initially
Release Notes
0.0.1
Initial release featuring:
Automatic README.md detection and rendering
Live content updates
VS Code theme integration
Background operation without user commands
Contributing
Feel free to contribute to this extension by:
Reporting bugs
Suggesting new features
Submitting pull requests
License
This extension is provided as-is for educational and practical use.
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
