Markdown

Page Manager addon WHMCS

Order now | Download | FAQ

The Markdown widget renders Markdown content as a printable A4-styled document on the client area. The admin side provides a Markdown source editor with a one-click preview toggle, and the frontend optionally exposes a "Download as PDF" button that produces an A4 PDF file.

---

Admin Settings

The widget has two view modes that toggle with a single button.

Editor mode

In editor mode the full Markdown source is shown in a syntax-friendly textarea. Click Show preview to switch to the rendered preview.

markdown-admin.png

Preview mode

Preview mode renders the Markdown using the same parser as the frontend (without the A4 paper styling). Click Show editor to go back to the source.

markdown-admin-preview.png

---

Frontend

On the client area the content is rendered inside an A4-sized paper element with a soft shadow and serif typography, similar to a printed document.

markdown-frontend.png

If the Show "Download as PDF" button option is enabled, a button is displayed above the document. Clicking it generates and downloads a real A4 PDF file produced from the rendered HTML.

markdown-pdf.png

---

Settings

Content

Setting	Type	Default	Description
markdown	textarea	—	Markdown source. Standard Markdown syntax is supported (headings, lists, links, images, code blocks, tables, blockquotes, inline HTML).

The Show preview / Show editor button switches between the source textarea and the rendered preview without leaving the editor.

---

Document Options

Setting	Type	Default	Description
show_download_pdf	checkbox	off	Show the Download as PDF button above the document on the frontend.
disable_a4	checkbox	off	Disable the A4 paper layout. The content is rendered as a regular full-width block instead of a fixed-size sheet.
pdf_filename	text	document	Base file name for the generated PDF (without .pdf extension).

The Download as PDF button label is fully translatable via the addon language files (Download as PDF, Generating... keys).

---

Layout Settings

Setting	Type	Default	Description
width	text	210mm	Width of the paper sheet. Examples: 210mm (A4), 180mm, 800px, 70%. Numeric-only values are interpreted as a percentage.
margin_top	text	—	CSS top padding of the widget container (e.g. 20px).
margin_bottom	text	—	CSS bottom padding of the widget container (e.g. 20px).
style	select	puq	Visual style template.
background_image	text	—	URL of the background image rendered behind the paper.
background_color	color	#FFFFFF	Background color of the widget container.
disable_background_shadow	checkbox	off	Remove the drop shadow from the container.
disable_background_radius_top	checkbox	off	Remove the top border radius from the container.
disable_background_radius_bottom	checkbox	off	Remove the bottom border radius from the container.
disable_background	checkbox	off	Disable the background container entirely.
full_width	checkbox	off	Stretch the widget to the full page width.

Tip: Paper width is controlled by the width field. If the field is empty the default 210mm (A4) is used. Use mm, px, or % units explicitly — bare numbers are treated as percentages.

---

Style Templates

Template	Description
puq	Default A4 document style: serif typography, sans-serif headings, soft shadow, rounded corners.

---

Notes

• Markdown is parsed on the client side using marked.js (loaded from a CDN on first use and cached for further widgets on the page).
• PDF generation uses html2pdf.js (loaded on demand the first time the user clicks the download button).
• The widget is a standard EditorJS block — multiple Markdown blocks can be placed on the same page; each one keeps its own settings and content.
• For mobile screens (< 800px) the paper expands to 100% width automatically so it remains readable on small devices. The fixed A4 width is preserved on tablets and desktops.
• When Disable A4 paper layout is enabled, the document is rendered without the paper sheet (no fixed width, no shadow, no minimum height) — handy if you only need the Markdown rendering on a regular page section.