/markdown-preview-enhanced

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

Primary LanguageHTMLOtherNOASSERTION

Markdown Preview Enhanced

Still Beta Version!

中文文档

From version 0.9.9, markdown-preview-enhanced supports more powerful code chunk.
You can now use python matplotlib very easily to make plots and even create interactive figures powered by mpld3.
JavaScript code chunk (not node.js but browser javascript) is also supported so that you can use libraries like Char.js, d3js, plotly to draw graphs.
Code Chunk (beta) Doc is also updated.

Here is a demo, and its raw file.

language-gfm-enhanced is recommended to be installed to work with markdown-preview-enhanced.

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) (MathJax is incompatible with preview-inline package)
    • 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 with @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 with @puml or @plantuml notation will be rendered by PlantUML.
  • WaveDrom to create digital timing diagram.
    • code block with @wavedrom notation will be rendered by wavedrom.
  • Viz.js to render dot language graph.
    • code block with @viz notation will be rendered by Viz.js.
    • add engine:[engine_name] at the first line of code block to choose different render engine. For example engine:dot. Engine circo, dot, neato, osage, or twopi are supported. Default engine is dot.
  • 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: Toggle Zen Mode
    • Toggle distraction free writing.
  • 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
  • Markdown Preview Enhanced: Toggle Scroll Sync
    • Enable/Disable scroll sync for preview.
  • Markdown Preview Enhanced: Toggle Live Update
    • Enable/Disable live update for preview.
    • If disabled, preview will only be rendered when the file is saved.
  • 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
  • Save as Markdown

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.

FAQ

  1. I am not able to find this package in atom?
    Please search for the full name of this package. markdown-preview-enhanced
  2. I exported a html file, and I want to deploy it on my own remote server. But math typesetting (MathJax or KaTeX) doesn't work, what should I do?
    Please make sure you have Use CDN hosted resources checked when exporting.
  3. I exported a presentation html file, and I want to put it on my Github Page or deploy remotely?
    Please check the last question.
  4. How do I get dark style preview?
    If you want the style of the preview to be consistent with your atom editor, go to settings of this package, then uncheck Github.com style and Use Github.com syntax theme. #281.
    Or you can run Markdown Preview Enhanced: Customize Css command, then modify the style.less file. #68, #89.
  5. The preview is super super lagging?
    This might happen when your markdown file is too big, or you are using too many math or graphs.
    Therefore I would like to recommend you to disable Live Update functionality.
    You can run Markdown Preview Enhanced: Toggle Live Update to disable it.
  6. Do you need a job? (Huh... is this question really related to FAQ???)
    Yes, I DO NEED A JOB. (*/ω＼*) (Any country (region) should be fine for me. I can also work remotely.)
    I am an international student from China currently studying at University of Illinois at Urbana-Champaign. I am a CS major student and I will get my BS/MCS degree this May (2017).
    I am personally very interested in game development and front-end web development. If you are willing to offer me a job opportunity, please contact me by my school email ywang189@illinois.edu or my personal email shd101wyy@(sina|gmail).com. (plz don't be mad if you don't get any response from me because I might be busy working on my homework `(✿◡‿◡)).
    Thank you very much :)

Credits

  • remarkable - Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins are also available.
  • KaTeX - Fast math typesetting for the web.
  • MathJax - Beautiful math in all browsers.
  • mermaid - Generation of diagram and flowchart from text in a similar manner as markdown.
  • viz.js - A hack to put Graphviz on the web.
  • plantuml - Generate UML diagram from textual description.
  • WaveDrom - Digital timing diagram rendering engine.
  • reveal.js - The HTML Presentation Framework.
  • save-svg-as-png - Save SVGs as PNGs from the browser.
  • pandoc - Universal markup converter.
  • async - Async utilities for node and the browser.
  • babyparse - Fast and powerful CSV (delimited text) parser that gracefully handles large files and malformed input.
  • cheerio - Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
  • gray-matter - Smarter yaml front matter parser, used by assemble, metalsmith and many others.
  • html-pdf - Html to pdf converter in nodejs. It spawns a phantomjs process and passes the pdf as buffer or as filename.
  • node-imgur - Upload images to imgur.com.
  • request - Simplified HTTP request client.
  • node-temp - Temporary File, Directory, and Stream support for Node.js.
  • uslug - A permissive slug generator that works with unicode.
  • atom - The hackable text editor.

Thanks

Thanks for using and supporting this package ;)

University of Illinois/NCSA Open Source License