Blocks Previewer for Visual Studio Code

The Blocks Previewer is a Visual Studio Code extension that enhances your markdown editing experience by providing live previews of markdown files using the Blocks pre-processor for mdBook. It allows you to see Bootstrap-styled components in real-time as you write your documentation, ensuring that your content looks exactly as expected before you even run mdBook.

Features

• Real-time Preview: Instantly visualize how markdown files will transform into Bootstrap components within VSCode.
• Seamless Integration: Works out-of-the-box with mdBook projects that use the Blocks pre-processor.
• Custom Markdown Syntax Support: Recognizes the custom Blocks markdown syntax and renders it accordingly.
• Developer-Friendly: Helps you write and edit markdown with an immediate feedback loop.

Installation

Install the Blocks Previewer from the Visual Studio Code Marketplace or by searching for "Blocks Previewer" in the VSCode Extensions view.

Usage

To start using the Blocks Previewer, open a markdown file (.md) and click on the "Preview" icon on the top right corner of the editor, or use the Ctrl+Shift+V shortcut (Cmd+Shift+V on macOS) to open the markdown preview side-by-side.

Ensure your mdBook project is set up with the Blocks preprocessor as described in the Blocks GitHub repository.

Example

Here's a glimpse of what you can do with the Blocks Previewer extension in your markdown files:

[blocks-card]
title: "Welcome to Blocks"
caption: "This is a live preview of a Blocks card component."
image: "./assets/blocks-watermark.png"
button: "Get Started"
link: "https://marketplace.visualstudio.com/items?itemName=SlipperyBrick.blockspreviewer"
[/blocks-card]

Visualize changes in real-time as you edit your markdown with custom Blocks syntax.

Feedback and Support

• Report Issues: For any issues or bugs, please report them on GitHub Issues.
• Support: If you need help or have any questions, reach out to us at support@davidrjames.co.uk.