Markdown Preview for Cursor IDE

A simple and efficient Markdown preview extension for Cursor IDE. View your Markdown files in a beautiful, GitHub-like style with syntax highlighting and automatic refresh.

Features

• Real-time Preview: See your Markdown changes immediately as you type
• Syntax Highlighting: Code blocks are automatically highlighted based on language
• GitHub-like Styling: Clean and familiar style similar to GitHub's rendering
• Image Support: View local images in your Markdown files
• Keyboard Shortcuts: Quick access with built-in shortcuts
• HTML Support: Renders HTML elements within your Markdown
• Table Support: Cleanly formatted tables
• Automatic Scrolling: Keeps the preview in sync with your editor (basic implementation)

Installation

Since this is a custom extension, follow these steps:

1. Clone this repository

git clone https://github.com/yourusername/cursor-md-preview.git
cd cursor-md-preview

2. Install dependencies

npm install

3. Build the extension

npm run compile

4. Package the extension

npm run package

5. Install the extension in Cursor IDE
   • Open Cursor IDE
   • Navigate to Extensions
   • Choose "Install from VSIX..."
   • Select the .vsix file from the dist folder

Usage

There are multiple ways to open the Markdown preview:

1. Keyboard Shortcut: When editing a Markdown file, press Ctrl+Shift+V (Cmd+Shift+V on macOS)
2. Context Menu: Right-click in a Markdown file and select "Markdown: Open Preview"
3. Explorer Context Menu: Right-click on a Markdown file in the explorer and select "Markdown: Open Preview"

Features in Detail

Syntax Highlighting

The extension uses highlight.js to provide syntax highlighting for code blocks. Simply specify the language after the opening triple backticks:

function hello() {
  console.log("Hello, world!");
}

Tables

Create tables using the standard Markdown syntax:

| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Images

Include images with the standard Markdown syntax. Both local and remote images are supported:

![Local Image](https://github.com/AdamIPTEK/cursor-md-preview/raw/HEAD/images/local-image.png)
![Remote Image](https://example.com/remote-image.png)

Development

Project Structure

• src/extension.ts: Main extension code
• package.json: Extension manifest
• webpack.config.js: Build configuration
• tsconfig.json: TypeScript configuration

Building the Extension

# Build once
npm run compile

# Watch for changes
npm run watch

# Package for distribution
npm run package

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Marked - Markdown parser and compiler
• highlight.js - Syntax highlighting library

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.