Giter VIP home page Giter VIP logo

markdowneditor's Introduction

Markdown Editor

Build status

Download this extension from the VS Gallery or get the CI build.


A full featured Markdown editor with live preview and syntax highligting. Supports GitHub flavored Markdown.

See the changelog for changes and roadmap.

Features

  • Powered by Markdig - the best markdown parser
  • Syntax highlighting supporting GitHub flavor
  • Live preview window
  • High-DPI support
  • Drag 'n drop of images supported
  • Paste image from clipboard directly onto document
  • Outlining/folding of code blocks
  • Keyboard shortcuts
  • Light Bulbs
  • Brace completion with type-through
  • Lightning fast

Syntax highlighting

All fonts can be changed in Tools -> Options -> Environment -> Fonts and Colors dialog.

Font Options

GitHub and other flavors

Advanced markdown extensions are supported to give more features to the syntax. This includes pipe tables, emoji, mathematics and a lot more.

Live Preview Window

The preview window opens up on the right side of the document when it opens.

Preview window

Every time the markdown document is modified, the preview window will update.

Any code blocks recieves full syntax highligting in the preview window. Here's an example of JavaScript code rendered.

Code Colorizing

The preview window is automatically scrolled to match the scroll position of the document. As the document is scrolled up and down, the preview window will follow.

Live preview can be disabled in the settings.

The syntax highligter is powered by Prism

Drag 'n drop images

Drag an image directly from Solution Explorer onto the document to insert the appropriate markdown that will render the image.

Paste images

This is really helpful for copying images from a browser or for inserting screenshots. Simply copy an image into the clipboard and paste it directly into the document. This will prompt you for a file name relative to the document and then it inserts the appropriate markdown.

It will even parse the file name and make a friendly name to use for the alt text.

Outlining

Any fenced code and HTML blocks can be collapsed, so that tihs:

Outlining Expanded

...can be collapsed into this:

Outlining Collapsed

Keyboard shortcuts

Ctrl+B makes the selected text bold by wrapping it with **.

Ctrl+I makes the selected text italic by wrapping it with _.

Ctrl+Space checks and uncheks task list items.

- [x] task list item

Tab increases indentation of list items.

Shift+Tab decreases indentation of list items.

Ctrl+K,C wraps the selection with HTML comments.

Ctrl+K,U removes HTML comments surrounding the selection/caret.

Light Bulbs

The suggested actions shown in light bulbs makes it easier to perform common tasks.

Light bulbs

For instance, converting the selected text to a link will result in this:

Light bulbs image

Brace completion with type-through

This makes typing faster. Whenever you type opening braces, paranthesis or brackets, a corrosponding closing character is inserted. It is smart about when it adds the closing character so it doesn't become annoying.

It also inserts * and _ characters to make typing bold and italic text as fast as possible.

This feature can be disabled in the settings.

Settings

Control the settings for this extension under Tools -> Options -> Text Editor -> Markdown

Options

Contribute

Check out the contribution guidelines if you want to contribute to this project.

For cloning and building this project yourself, make sure to install the Extensibility Tools 2015 extension for Visual Studio which enables some features used by this project.

License

Apache 2.0

markdowneditor's People

Contributors

madskristensen avatar xoofx avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.