Markdown Editor Plugin

View Plugin

The DmfMarkdownEditor plugin replaces the standard WYSIWYG editor with a powerful Markdown editor for selected content areas in the Shopware Administration. With live preview, configurable toolbar, and automatic HTML-to-Markdown conversion.

On this page:

• Requirements
• Installation
• Features
• Supported Content Areas
• Configuration
  • Toolbar Items
  • Editor Settings
  • Preview Themes
• Button Tool
  • Syntax
  • Available Button Variants
  • Usage
• Storefront Usage
  • Twig Filter
  • PHP Service
• Markdown for Custom Components
  • Via use-markdown Prop
  • Direct Component Usage
• Markdown Syntax Reference
  • Basic Formatting
  • Headings
  • Lists
  • Links & Images
  • Buttons
  • Code Blocks
  • Tables
  • Blockquotes
• Troubleshooting
  • Editor not loading
  • Toolbar items not showing
  • Markdown not rendering in storefront
  • WYSIWYG editor showing instead of Markdown

---

Requirements

• Shopware 6.7.0 or higher
• PHP 8.2 or higher

Installation

composer require dmf/sw6-plugin-markdown-editor
bin/console plugin:install --activate DmfMarkdownEditor
bin/build-js.sh
bin/console cache:clear

---

Features

• Selective Replacement: Only specific content areas use Markdown
• Automatic Conversion: Existing HTML content is automatically converted to Markdown
• Live Preview: Real-time rendering of Markdown content
• Configurable Toolbar: Select the tools you need
• GitHub Flavored Markdown: Tables, task lists, code blocks
• Button Tool: Create Bootstrap buttons directly in the editor
• Twig Filter: |markdown for storefront output
• Dark/Light Mode: Adapts to admin theme

---

Supported Content Areas

The Markdown editor is automatically enabled for these areas:

Content Area	Automatically Enabled
Product description	Yes
Category description	Yes
Manufacturer description	Yes
CMS Text element	Yes
Custom Fields (HTML/Text Editor)	Yes
Custom components	Via use-markdown="true" prop

All other text editors (e.g., customer group registration text) continue to use the standard WYSIWYG editor.

---

Configuration

Path: Settings → Extensions → DmfMarkdownEditor

Toolbar Items

Select the toolbar items to display:

Item	Description
bold	Bold (text)
italic	Italic (text)
underline	Underlined
strikeThrough	Strikethrough (text)
title	Headings (H1-H6)
sub	Subscript
sup	Superscript
quote	Blockquote
unorderedList	Bullet list
orderedList	Numbered list
task	Task list
link	Insert link
image	Insert image
table	Insert table
code	Code block
codeRow	Inline code
revoke	Undo
next	Redo
preview	Toggle preview
fullscreen	Fullscreen mode
catalog	Table of contents
mermaid	Mermaid diagrams
katex	Math formulas

Editor Settings

Setting	Description	Default
Editor Language	Interface language	de-DE
Show Preview on Start	Show preview panel on open	false
Show Line Numbers	Display line numbers in code	true
Min Height	Minimum editor height in pixels	300

Preview Themes

Theme	Description
github	GitHub style (recommended)
vuepress	VuePress documentation style
default	Default md-editor-v3 style
mk-cute	Playful style
smart-blue	Professional blue
cyanosis	Cyan accents

---

Button Tool

The editor includes a special Button Tool for creating Bootstrap buttons.

Syntax

[Button Text](url){.btn .btn-primary}

Available Button Variants

Variant	Classes	Description
Primary	.btn .btn-primary	Primary action
Secondary	.btn .btn-secondary	Secondary action
Link	.btn .btn-link	Link style
Outline Primary	.btn .btn-outline-primary	Outlined primary
Outline Secondary	.btn .btn-outline-secondary	Outlined secondary
Ghost	.btn .btn-ghost	Transparent button

Usage

1. Click the BTN icon in the toolbar
2. Select a button variant from the dropdown
3. Replace "Button Text" with your text
4. Replace "url" with your target link

---

Storefront Usage

Twig Filter

Use the |markdown filter to render Markdown as HTML:

{# In product templates #}
{{ product.description|markdown }}

{# In custom fields #}
{{ product.translated.customFields.my_markdown_field|markdown }}

{# As function #}
{{ render_markdown(someVariable) }}

PHP Service

use Dmf\MarkdownEditor\Service\MarkdownRendererService;

class MyService
{
    public function __construct(
        private readonly MarkdownRendererService $markdownRenderer
    ) {}

    public function convertMarkdown(string $markdown): string
    {
        return $this->markdownRenderer->render($markdown);
    }
}

---

Markdown for Custom Components

Via use-markdown Prop

Enable Markdown for an existing sw-text-editor:

<sw-text-editor
    :value="myContent"
    :use-markdown="true"
    @update:value="onContentChange"
/>

Direct Component Usage

<dmf-markdown-editor
    v-model="myContent"
    label="Description"
    placeholder="Enter markdown..."
    preview-theme="github"
/>

---

Markdown Syntax Reference

Basic Formatting

**bold** or __bold__
*italic* or _italic_
~~strikethrough~~
`inline code`

Headings

# H1
## H2
### H3
#### H4
##### H5
###### H6

Lists

- Bullet point
- Another point

1. Numbered item
2. Another item

- [x] Task completed
- [ ] Task pending

Links & Images

[Link text](https://example.com)
![Alt text](image.jpg)

Buttons

[Primary Button](https://example.com){.btn .btn-primary}
[Secondary Button](/page){.btn .btn-secondary}
[Link Button](#anchor){.btn .btn-link}

Code Blocks

```javascript
const hello = 'world';
```

Tables

| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |

Blockquotes

> This is a quote
> Multiple lines

---

Troubleshooting

Editor not loading

1. Install NPM dependencies: bin/build-js.sh
2. Rebuild admin: bin/build-administration.sh
3. Clear cache: bin/console cache:clear

Toolbar items not showing

1. Check plugin configuration in Admin
2. Ensure items are selected
3. Clear browser cache

Markdown not rendering in storefront

1. Use the |markdown filter: {<!-- -->{ content|markdown }<!-- -->}
2. Ensure content is actual Markdown, not HTML

WYSIWYG editor showing instead of Markdown

The Markdown editor only appears for supported content areas. For custom text editors, add the use-markdown="true" prop.