Advanced Markdown Live Preview

A VS Code extension that provides a side-by-side Markdown preview with inverted theme support. Automatically adapts the preview theme based on your editor theme - dark editor shows light preview, light editor shows dark preview.

Features

• 📝 Side-by-side Markdown preview
• 🎨 Inverted theme support (dark editor → light preview, light editor → dark preview)
• ⚡ Real-time preview updates
• ⌨️ Keyboard shortcuts for quick access
• 🎯 Editor toolbar integration

Usage

1. Open any Markdown file (.md)
2. Press Ctrl+Shift+M (or Cmd+Shift+M on Mac) to open the preview
3. Or click the preview icon in the editor toolbar
4. The preview will automatically update as you edit

Keyboard Shortcuts

• Ctrl+Shift+M (Mac: Cmd+Shift+M) - Open/Show Preview

Publishing to VS Code Marketplace

Prerequisites

1. Azure DevOps Account: You need a free Azure DevOps account

   • Sign up at https://dev.azure.com
   • Create a Personal Access Token (PAT) with "Marketplace (Manage)" scope

2. Publisher Account: Create a publisher on VS Code Marketplace

   • Go to https://marketplace.visualstudio.com/manage
   • Sign in with your Microsoft/Azure account
   • Create a new publisher (e.g., "ahmadushay")

Steps to Publish

1. Get Personal Access Token (PAT):

   • Go to Azure DevOps: https://dev.azure.com
   • Click on User Settings → Personal Access Tokens
   • Create new token with:
     • Name: "VS Code Extension Publishing"
     • Organization: All accessible organizations
     • Expiration: Set as needed
     • Scopes: Select "Marketplace (Manage)"

2. Package the Extension:

   npm run compile
   vsce package
   

   This creates a .vsix file

3. Publish the Extension:

   vsce publish
   

   When prompted, enter your Personal Access Token (PAT)

   Or publish the .vsix file directly:

   vsce publish -p <YOUR_PERSONAL_ACCESS_TOKEN>
   

4. Update Extension (for future versions):

   • Update version in package.json
   • Run vsce package and vsce publish again

Alternative: Publish via Web UI

1. Go to https://marketplace.visualstudio.com/manage
2. Select your publisher
3. Click "New extension" → "Visual Studio Code"
4. Upload the .vsix file

Installation (After Publishing)

Users can install your extension via:

1. VS Code: Search for "Advanced Markdown Live Preview" in Extensions view
2. Command: code --install-extension ahmadushay.advanced-markdown-preview
3. VSIX file: code --install-extension path/to/extension.vsix

Development

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode (auto-compile on changes)
npm run watch

# Package extension
vsce package

License

MIT License - See LICENSE file for details