Markdown Preview Enhanced Documentation

Markdown Preview Enhanced provides an advanced markdown writing and previewing experience with the following capabilities:

• Sync & Navigation: Automatic scroll sync and Table of Contents (TOC) generation.
• Code & Math: Code Chunks, LaTeX math support (including TikZ and Chemfig), and diagramming (Flowcharts, Sequence diagrams, etc.).
• File Management: Importing external files, Image Helper, Footnotes, and Front Matter support.
• Export Options:
  • Puppeteer: Export to PDF, PNG, and JPEG.
  • HTML: Export beautiful, mobile-supported HTML.
  • Pandoc/Prince: Advanced document conversion.
  • eBook: Export to eBook formats.
  • Presentation: Use the Presentation Writer for slide-based content.
• Customization: Customize Preview CSS and compile to GitHub Flavored Markdown.

When exporting markdown to GFM Markdown, diagrams are saved as PNG images in the imageFolderPath defined in your package settings.

You can specify a custom filename for the exported image using the {filename="..."} attribute in the code block.

To export your preview as a PDF using the browser's print functionality:

1. Right-click anywhere in the Markdown Preview pane.
2. Select Open in Browser from the context menu.
3. Once the preview opens in your web browser, use the browser's print function (e.g., Ctrl+P or Cmd+P) and select 'Save as PDF' or 'Print to PDF'.

To install from a local clone of the repository:

1. Clone the project.
2. Navigate to the markdown-preview-enhanced folder.
3. Run yarn install.
4. Run apm link to copy the folder to ~/.atom/packages.

Note: If you do not have npm installed, install Node.js first. Alternatively, after running apm link, open Atom and run the command Update Package Dependencies: Update via the command palette (cmd-shift-p).

cd the_path_to_folder/markdown-preview-enhanced
yarn install
apm link

Markdown Preview Enhanced supports math rendering using either KaTeX or MathJax.

Default Delimiters

• Inline Math: Use $...$ or \(...\).
• Block Math: Use $$...$$, \[...\], or a fenced code block with the math language tag (math ).

Engine Comparison

• KaTeX: Faster rendering, but has fewer supported functions and symbols.
• MathJax: Slower, but offers more extensive feature support.

To define styles that only apply to a specific Markdown file, use front-matter to configure an id or class, and then @import a .less or .css file directly within the Markdown content.

After modifying your imported style file, click the refresh button in the top right corner of the preview pane to recompile the LESS to CSS.

---
id: "my-id"
class: "my-class1 my-class2"
---

@import "my-style.less"

# Heading1

When importing images (or files treated as images), you can pass attributes like width, height, title, and alt using curly braces.

@import "test.png" {width="300px" height="200px" title="my title" alt="my alt"}

![](test.png){width="300px" height="200px"}

![[ test.png ]]{width="300px" height="200px"}

By default, script execution is disabled for security reasons. To run code chunks, you must explicitly enable script execution in your Atom package or VSCode extension preferences using the following option:

enableScriptExecution

Warning: Enabling this allows arbitrary code execution from markdown files, which can pose a security risk.

The documentation website is powered by docsify. To run a local version of the documentation for modification, follow these steps:

1. Clone the repository.
2. Install docsify-cli globally.
3. Navigate to the repository directory and serve the docs folder.

# install docsify
npm i docsify-cli -g

cd path_to/markdown-preview-enhanced

docsify serve docs

You can add CSS classes to fenced code blocks by appending them in curly braces. To enable line numbers, add the .line-numbers class.

Example syntax:

function add(x, y) {
  return x + y;
}