How to Export Tutorials to PDF, Markdown, or HTML
// tl;dr
- — Procshot exports recorded guides to Markdown and HTML, and to PDF with Pro — each format serves a different distribution use case.
- — PDF (Pro) for sharing and printing, Markdown for wikis and developer docs, HTML for web-based help centers.
- — Choose format based on where the guide will live — the same recording can be exported in every format (PDF with Pro).
// why this matters
Exporting a tutorial in the wrong format creates unnecessary friction: a Markdown file emailed to a non-technical manager, a PDF pasted into a GitHub repository, HTML sent when Notion was expecting Markdown. The format isn't a technical detail — it's a distribution decision. Procshot supports Markdown and HTML (and PDF with Pro) from the same recording, so the choice is about where the guide is going and who will use it. Understanding when to use each format saves the downstream step of converting between them, which often degrades image quality or formatting.
Step-by-Step Guide
- 1
Complete your recording and review the guide
Finish recording your workflow in Procshot and review all step descriptions and annotations. Edit any descriptions that need improvement. With Pro, apply blur effects to any sensitive data. The content is the same regardless of export format — finalize it before choosing a format.
tip: The same guide can be exported in all three formats. If you're unsure which your audience needs, start with Markdown — it's the most flexible and can be converted to PDF or HTML later.
- 2
Open the Export panel in Procshot
In the Procshot guide editor, locate the Export button. The export panel shows the formats: Markdown, HTML, and PDF (Pro). Each format has a brief description of what it produces.
- 3
Choose PDF (Pro) for print, email, or standalone documents
With Pro, select PDF when the guide will be emailed as an attachment, printed, attached to a ticket or issue, or shared as a standalone document that doesn't live in a platform. PDF preserves layout exactly as shown — all annotations, formatting, and images are embedded. Procshot's PDF export includes Japanese font support for CJK characters.
tip: PDF is the safest format for sharing with non-technical recipients — it opens in any browser or PDF viewer with no rendering variation.
- 4
Choose Markdown for wikis, GitHub, and developer documentation
Select Markdown when the guide will be pasted into Notion, GitHub Issues, GitHub Wiki, a README, Linear, or any Markdown-compatible editor. Markdown exports include step descriptions and image references in standard Markdown syntax. Images are bundled in the export package.
tip: Markdown is ideal for documentation that will be version-controlled or edited by multiple people over time.
- 5
Choose HTML for help centers and web embedding
Select HTML when the guide will be embedded in a web-based help center (HelpScout, Zendesk, Intercom), a wiki system, or any platform that accepts HTML content. HTML exports include all images bundled inline or as referenced files. The output renders directly in browsers without additional styling needed.
- 6
Click Export and save the output
Click the Export button for your chosen format. Procshot generates the file and prompts you to save it. For Markdown exports, the output may include a zip archive with the Markdown file and an images folder — keep these together when moving the files.
- 7
Distribute the guide to its destination
Place the exported guide in its intended location: attach to an email, upload to a help center, paste Markdown into your wiki, commit to a repository. For Markdown, paste the text content directly; for PDF and HTML, upload as a file attachment or embed as appropriate to the platform.
// use cases
Technical Writers Publishing to GitHub
Technical writers export guides as Markdown and commit them to the repository's docs/ folder. The format renders natively in GitHub's markdown preview and integrates with documentation site generators like MkDocs or Docusaurus.
CS Teams Sending Welcome Email Attachments
Customer success managers export onboarding guides as PDF (Pro) and attach them to welcome emails or calendar invites for new customer kickoff calls. PDF's universal compatibility ensures every recipient can open it without a platform account.
Support Teams Publishing to Help Centers
Support teams export guides as HTML and embed them in HelpScout or Zendesk help articles. The HTML output includes screenshots inline, making the guide self-contained without managing separate image uploads.
// tips & best practices
- › For Notion: paste Markdown content directly into a Notion page — Notion converts Markdown formatting on paste automatically.
- › For Confluence: HTML export works better than Markdown since Confluence uses its own markup language.
- › For GitHub README or Wiki: Markdown export renders natively. Keep the images folder alongside the .md file in the repository.
- › For email attachments: PDF (Pro) is universally compatible. Markdown in an email body is readable but loses formatting in most email clients.
- › For documentation that will be translated: Markdown is the best base format — the text is easily editable and the image references are preserved.
- › Export in several formats from the same recording if you need flexibility — the additional exports take seconds and you may need different formats for different audiences.
// common pitfalls
Separating the Markdown file from its images folder
Procshot's Markdown export produces a .md file and an images folder (or a zip containing both). If you move only the .md file to a new location and leave the images folder behind, the images will not render. Keep the file and folder together, or use the zip archive for transfers.
Pasting HTML into a Markdown editor
HTML export is for HTML-native platforms. If you paste HTML into a Markdown editor like Notion or GitHub, it will show raw HTML tags rather than formatted content. Match the export format to the target platform's supported input format.
Exporting before finalizing annotations
Annotations (blur effects, arrows, text boxes — Pro) are applied to screenshots in Procshot before export. If you export and then realize a sensitive field wasn't blurred, you need to go back to Procshot and re-export. Do a final annotation review pass before exporting — especially for external-facing guides.
// faq
Can I export the same guide in multiple formats?
Yes. You can export a guide in Markdown and HTML (and PDF with Pro) from the same recording. Each export is independent. If you need the guide in multiple formats for different audiences, export all three from the finished guide.
Does the PDF export support languages other than English?
Yes. Procshot's PDF export (Pro) includes Japanese font support, making it suitable for guides with CJK characters. Screenshots capture whatever is displayed in the browser regardless of language.
What's included in the Markdown export?
The Markdown export includes the guide title, all step descriptions in Markdown-formatted text, and image references pointing to an accompanying images folder. The images folder contains all screenshots captured during recording. Both the .md file and images folder are typically packaged together as a zip archive.
Can I customize the PDF layout or add branding?
Pro includes branding settings: your company name, accent color, and logo are added to your exports. The page layout follows Procshot's templates; for custom headers, footers, or a cover page, use a PDF editor after export.
Which format works best for Notion?
Markdown. Notion accepts Markdown on paste and converts it to Notion blocks automatically. The text formatting and structure are preserved. Images referenced in the Markdown will need to be uploaded to Notion separately — paste the text first, then upload and replace the image placeholders.
// related tools
Procshot — Free Chrome Extension
Auto-record browser actions to create step-by-step guides with annotated screenshots.
// related guides
How to Create Step-by-Step Tutorials
Chrome extension tutorial guide
How to Document Software Processes
SOPs and onboarding materials
How to Create Bug Reports with Screenshots
QA and developer workflows
How to Make Onboarding Guides for SaaS
Customer success workflows
// compare procshot