📝 Markdown Editor & Previewer

Markdown-live introduces a Markdown editor & previewer into Visual Studio Code.

Introduction

• Markdown Live is an extension that provides you with many useful functionalities including a live editor with useful options
• A lot of its ideas are inspired by Markdown Preview Style and Unotes.
• Feel free to ask questions, post issues, submit pull request, and request new features.
• For more information about this project and how to use this extension, please check out our Functionalities section⬇︎

Features

Markdown-live supports the followings

• 💅 Renders instantly any markdown/.md document with its content.
• 🎨 markdown-live editor comes with supportive tools/extension accompanied to edit markdown content in an efficient manner
• 🌈 Supports rendering of multiple .md files
• 🌏 Instantly syncs the changes made in either of two panels (markdown editor and text-document) across seamlessly
• 🌟 Editor supports shortcut keys for the toolbar, please check the Keybindgs section for more information
• 🌟 Editor supports set a configurations defined, please check the Workspace configuration section for more information
• 🌟 auto scroll syn support is been added
• 🌟 copy & paste of image support is been additionally added along with other functionalities that comes with tui-editor
• 💥 lightweight custom editor extension for markdown:
• ⚡️ Check tui.editor for more information and config changes.

Getting started

• Install the Markdown-live extension in VS Code
• After opening a markdown/.md file, click on the icon to toggle the side-bar
• Place your cursor in the markdown content
• You should see the sidebar tries to render the markdown content

Functionality Demo

Themes Demo

Multi Document Render Demo

Command Configurations

Command	Description
showMarkdown	Toggle Markdown panel
toggleScrollSync	Toggle Scroll Sync Mode

• can be executed by opening the command pallete (ctr+shift+p) and type the command to select it and execute

Workspace Configurations

Name	Description	Default value
automaticallyShowPreviewOfMarkdown	Automatically shows preview once the markdown/.md file gets opened up	true(boolean)
syncScroll	Automatically sync the scroll of both editor and doc	true(booelan)
display2X	Display toolbar buttons of the editor at 2X size	false(boolean)
convertPastedImages	Convert pasted images to local files, if not it will show in base64 format	true(boolean)
mediaFolder	The folder where images are saved relative to the markdown file project folder	.media(string)

• above values are easily configurable through File -> Preferrences -> settings

Keybindings

Shortcuts	Functionality
ctrl + alt + 1/ cmd + alt + 1	Heading 1
ctrl + alt + 2/ cmd + alt + 2	Heading 2
ctrl + alt + 3/ cmd + alt + 3	Heading 3
ctrl + alt + 4/ cmd + alt + 4	Heading 4
ctrl + alt + 5/ cmd + alt + 5	Heading 5
ctrl + alt + 6/ cmd + alt + 6	Heading 6
ctrl + alt + 0/ cmd + alt + 0	Normal
ctrl + alt + b/ cmd + alt + b	Bold
ctrl + alt + i/ cmd + alt + i	Italic
ctrl + alt + r/ cmd + alt + r	Strike
ctrl + alt + t/ cmd + alt + r	Task
ctrl + alt + u/ cmd + alt + u	Unordered List
ctrl + alt + o/ cmd + alt + o	Ordered List
ctrl + alt + q/ cmd + alt + q	BlockQuote
ctrl + alt + h/ cmd + alt + h	Inline Code (highlight)
ctrl + alt + c/ cmd + alt + c	Code Block
ctrl + alt + l/ cmd + alt + l	Horizontal Line
ctrl + alt + n/ cmd + alt + n	Indent
ctrl + alt + m/ cmd + alt + m	Outdent

Acknowledgment

tui.editor is integrated as the markdown editor

Changelog

Please check the Releases | Github page of this project.

Contributing

Have a look at our contribution guide.

Contributors

Thanks goes to these wonderful people (emoji key):

Keshan Nageswaran💻 🎨

License

MIT License