Skip to content

hackjutsu/markdown-preview-enhanced

 
 

Repository files navigation

Markdown Preview Enhanced

Note:

This branch improves the image exportion feature. It can export images with a higher resolution and smaller size. To install the package with this branch:

  1. downlaod this branch to a folder named markdown-preview-enhanced

  2. run npm install inside root directory to get dependencies

  3. run npm install inside dependencies/html-pdf to get its dependencies

  4. copy this folder to ~/.atom/packages

Then we should be able to specify the viewport based on the selected device as shown below.

=== Still Beta Version!

中文文档

You can now create EBook using this plugin! More information can be found here.

Feature Presentation Writer is now supported after version 0.7.7! Click here to see the introduction slides generated by Markdown Preview Enhanced.

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

(TOC below was generated by this package)


main

Features

  • 2-way scroll sync
  • Presentation Writer (beta) Introduction
  • markdown preview with math rendering support You can choose MathJax or KaTeX to render math expressions
  • export PDF, PNG, and JPEG
  • export ePub, Mobi, and PDF ebook
  • export beautiful HTML (mobile device supported)
  • customize Markdown Preview css
  • [TOC] generation (beta)
  • Flowchart / Sequence diagram
  • Task List (Github Flavored)
  • Image Helper
  • Footnotes
  • And many more...

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.
    • 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
  • 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: Toc Create
    • Generate TOC 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: Config Mermaid
    • edit mermaid init configuration.
  • Markdown Preview Enhanced: Config Header Footer
    • PDF export header and footer configuration.
  • Markdown Preview Enhanced: Config Presentation
    • edit reveal init 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

context menu

  • Open in Browser
    • Open HTML in browser
  • Export to Disk
    • Export HTML, PDF, PNG, JPEG files.

Extra

  • 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. smart_navigation
  • 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.

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 ;)

MIT License

About

The 'Best' markdown preview for atom editor

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CoffeeScript 81.3%
  • CSS 18.7%