Skip to content

keshann93/markdown-live

Repository files navigation

📝 Markdown Editor & Previewer

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

intro

Visual Studio Marketplace Version Visual Studio Marketplace Installs Visual Studio Marketplace Downloads

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: Only 883 Kb
  • ⚡️ 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