Git Product home page Git Product logo

markdown-live's Introduction

📝 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

markdown-live's People

Contributors

allcontributors[bot] avatar keshann93 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

alientechsw

markdown-live's Issues

Spellchecker

I've been looking for something like this for a while now. Great job!

The only feature missing for me is a spellchecker. Otherwise, it's exactly what I need.

Option to show WYSIWYG only

I would want to hide the markdown file and show only the WYSIWYG , or like UNOTES, with a button to switch :

image

Is this planned?

Thank you for your great extensio

No image in preview

Describe the bug
No image in preview.

To Reproduce
On your gif animation, it seems an image is also not rendering.

Expected behavior
Images to show, to see the layout.

Additional context
would be nice to paste, in the actual code also.

Thanks for any help with this.

I cant have 2 different markdown files open.

So I have 2 markdown files one in a dot folder and the README.md If I open one when I try to open the other weird things happen.

Sometimes it jumps back to the first file I had open. Sometimes it shows the second file, but the editor seems broken on the second file because nothing is displayed in the editor view.

Mac keyboard shortcuts stomp on default keybindings

Full list of Mac keybindings available on this PDF. Example of problematic keybinding: ⌥⌘S should "Save All" but "Markdown Live" steals it. I haven't gone through to check all of the others to see if they're conflicting, but I happen to use "Save All" pretty often.

Sidenote: I love this extension - thank you so much for building it!

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.