Developers · Gutenberg
Markdown Preview block for WordPress
Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons.
Inspector panels on this block: Content, Features, Layout. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Markdown Preview” (block name `blockenberg/markdown-preview` in block.json). Style it in the sidebar after insert.
How to use Markdown Preview block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Markdown Preview”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Content — Title”, “Show Title”, “Default Markdown Content”, “Show Toolbar”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Content — Title | Text field in the inspector. block.json default: Markdown Editor. Saved as `title`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Default Markdown Content | Multiline text field in the inspector. block.json default: # Hello, Markdown! Type your **Markdown** here and see the *live preview* on the right. ## Features - Bold, italic, headings - Code blocks - Lists and links - Blockquotes ```js console.log('Hello world'); ``` > This is a blockquote. [Visit example.com](https://example.com). Saved as `defaultContent`. |
| Show Toolbar | On/off toggle in the inspector. On by default. Saved as `showToolbar`. |
| Show Word Count | On/off toggle in the inspector. On by default. Saved as `showWordCount`. |
| Show Copy Buttons | On/off toggle in the inspector. On by default. Saved as `showCopyBtn`. |
| Sync Scroll | On/off toggle in the inspector. On by default. Saved as `syncScroll`. |
| Editor Height (px) | Numeric range control in the inspector. Range 200–800. block.json default: 380. Saved as `editorHeight`. |
| Max Width (px) | Numeric range control in the inspector. Range 500–1400. block.json default: 1100. Saved as `contentMaxWidth`. |
| Accent Color | Color control in the inspector. block.json default: #0ea5e9. Saved as `accentColor`. |
| Editor Background | Color control in the inspector. block.json default: #1e293b. Saved as `editorBg`. |
| Editor Text | Color control in the inspector. block.json default: #e2e8f0. Saved as `editorColor`. |
| Preview Background | Color control in the inspector. block.json default: #ffffff. Saved as `previewBg`. |
| Preview Text | Color control in the inspector. block.json default: #1f2937. Saved as `previewColor`. |
| Toolbar Background | Color control in the inspector. block.json default: #0f172a. Saved as `toolbarBg`. |
| Section Background | Color control in the inspector. block.json default: #f8fafc. Saved as `sectionBg`. |
| Title Color | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Keyboard handlers move focus between items.
When this is the right block
- Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons — that is the job of Markdown Preview, not a generic content block.
- Use it when you need the editor control labeled “Content — Title”, which exists on this block’s inspector.
- It matches pages about markdown, editor, preview.
- Inserter grouping: docs sites, utilities, and developer landing pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Markdown Preview block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Markdown Preview”. It sits under Developers. After insert, open Content and set “Content — Title”, “Show Title”, “Default Markdown Content”, “Show Toolbar”.
What makes Markdown Preview different from other Blockenberg blocks?
Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons. Inspector labels on this block include “Content — Title”, “Show Title”, “Default Markdown Content”, “Show Toolbar”.
Is the Markdown Preview Gutenberg block free?
Yes. Markdown Preview ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Markdown Preview to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Content, Features, Layout).
Related developers blocks
Code Playground
Interactive HTML/CSS/JS editor with live preview. Let visitors experiment with code directly on the page.
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Code Comparison
Side-by-side code comparison block with syntax highlighting, diff markers, labeled panels, copy buttons, line numbers, and a draggable split divider.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Markdown Preview from the Gutenberg inserter.