/markdown-preview-enhanced

One of the 'BEST' markdown preview extensions for Atom editor!

Primary LanguageCoffeeScriptOtherNOASSERTION

Markdown Preview Enhanced

Still Beta Version!

中文文档

Post here if you request new features or you want to report bugs ;)

(TOC below was generated by this package Markdown Preview Enhanced: Create Toc)

intro

Features

How it works

  • remarkable to convert markdown to html.
  • KaTeX or MathJax to render math expressions. (KaTeX Supported functions/symbols)
    • expression within $...$ will be rendered normally.
    • expression within $$...$$ will be rendered in displayMode.
    • if you want to enable math highlighting, try language-gfm-enhanced package.
    • You can choose your math rendering method from settings panel.
      MathJax supports more symbols, but it has slower rendering speed compared to KaTeX.
  • mermaid to render flowchart and sequence diagram.
    • code block within {mermaid} notation will be rendered by mermaid
    • check mermaid doc for more information about how to create flowchart and sequence diagram
    • mermaid
  • PlantUML to create multiple kinds of graph. (Java is required)
    • You can install Graphviz (not required) to generate all diagram types.
    • code block within {puml} or {plantuml} notation will be rendered by PlantUML.
  • WaveDrom to create digital timing diagram.
    • code block within {wavedrom} notation will be rendered by wavedrom.
  • Viz.js to render dot language graph.
    • code block within {viz} notation will be rendered by Viz.js.
  • reveal.js to render beautiful presentations.

Usages

To use this package, press cmd + shift + p in atom editor first to toggle Command Palette . Then choose the commands below:

  • Markdown Preview Enhanced: Toggle
    • Toggle Markdown file preview with KaTeX support.
      You can also use the keymap ctrl+shift+m to toggle preview. (To use keymap, you have to disable the default markdown preview package, otherwise there would be keymap conflict)
  • Markdown Preview Enhanced: Customize CSS
    • Customize preview page css. You can edit styles inside markdown-preview-enhanced-custom section in style.less file.
    • if you didn't see markdown-preview-enhanced-custom section in style.less file, you may need to run Markdown Preview Enhanced: Customize CSS command first.
  • Markdown Preview Enhanced: Create Toc
    • Generate TOC. doc is here.
      or simply insert <!-- toc --> in editor (need preview toggled).
  • Markdown Preview Enhanced: Toggle Scroll Sync
    • Enable/Disable scroll sync for preview.
  • Markdown Preview Enhanced: Toggle Break On Single Newline
    • Enable/Disable breaking on single newline.
  • Markdown Preview Enhanced: Insert New Slide
  • Markdown Preview Enhanced: Insert Table
  • Markdown Preview Enhanced: Insert Page Break
  • Markdown Preview Enhanced: Config Mermaid
    • edit mermaid init configuration.
  • Markdown Preview Enhanced: Config Header Footer
    • PDF export header and footer configuration.
  • Markdown Preview Enhanced: Image Helper
    • Image Helper supports image url quick insertion, image paste, and image upload powered by imgur and sm.ms.
      (if imgur is blocked by the Great Firewall, then you can choose sm.ms instead).
    • Keymap ctrl+shift+i
    • image_helper

Preview Context Menu

Right click at preview to see the menu

contextmenu

  • Open in Browser
    • Open HTML in browser
  • Export to Disk
    • Export HTML, PDF, PNG, JPEG, ePub etc files.
  • Pandoc Document Export

Extra

  • Code Chunks doc
  • EBook
    More information about how to create ebook can be found here.
  • Presentation Writer
    More information about how to create Presentation can be found here.
  • Task List
    This package supports Github Flavored task list.
    More information about how to create task list can be found here
  • Smart Navigation
    You can quickly open another markdown file by clicking its link in preview.
  • Preview Auto Open
    Open preview pane automatically when you open a markdown file. You can disable this functionality from settings panel.

For Developer

Manual installation instruction can be found here.
It is also very easy to write your own extension, more information can be found here.

Thanks

Thanks for everyone that supports this package!

TODO

  • fix bugs
  • modify css to make preview look nice
  • ePub output
  • support more image upload methods other than imgur (as imgur is blocked in some countries)
  • image paste #30
  • pdf book generation #56
  • header and footer for pdf 57

Thanks for using and supporting this package ;)

University of Illinois/NCSA Open Source License