The latest articles on DEV Community by Zack Young (@zaaack). https://dev.to/zaaack https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F29247%2Fa496c396-6baa-42e2-891b-8a010c036742.jpeg https://dev.to/zaaack en Zack Young Tue, 27 Apr 2021 01:55:15 +0000 https://dev.to/zaaack/how-to-make-your-vscode-become-a-seamless-markdown-writer-like-typora-412h https://dev.to/zaaack/how-to-make-your-vscode-become-a-seamless-markdown-writer-like-typora-412h <p>Writing markdown is a daily work for most programers. Switch between your favorate code editor or IDE and a nice markdown editor like typora, marktext, iA Writer, Ulysses or obsidian.md could be annoying. That's why I make this extension.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2to6q8w6p5clkucfykhy.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2to6q8w6p5clkucfykhy.gif" alt="demo"></a></p> <h2> Features </h2> <ul> <li>What You See Is What You Get (WYSIWYG)</li> <li>Auto sync changes between vsc editor and webview</li> <li>Copy markdown/html</li> <li>Upload/paste/drag-drop images will auto save to <code>assets</code> folder</li> <li>Multi-theme support</li> <li>Shortcut keys</li> <li>Instant Rendering mode(<strong>Recommand!</strong>) &amp; Wysiwyg mode &amp; split screen mode</li> <li>Markdown extensions</li> <li>Multiple graph support including KaTeX / Mermaid / Graphviz / ECharts / abc.js(notation) / ...</li> <li>For more usage please see <a href="https://github.com/Vanessa219/vditor" rel="noopener noreferrer">vditor</a> </li> </ul> <h2> Install </h2> <p><a href="https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor" rel="noopener noreferrer">https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor</a></p> <h2> Support syntax </h2> <p><a href="https://ld246.com/guide/markdown" rel="noopener noreferrer">demo article</a></p> <h2> Usage </h2> <h3> 1. Command mode in markdown file </h3> <ul> <li>open a markdown file</li> <li>type <code>cmd-shift-p</code> to enter command mode</li> <li>type <code>markdown-editor: Open with markdown editor</code> </li> </ul> <h3> 2. Explorer Context menu </h3> <ul> <li>right click on markdown file</li> <li>then click <code>Open with markdown editor</code> </li> </ul> <h3> 3. Editor title context menu </h3> <ul> <li>right click on a opened markdown file's tab title</li> <li>then click <code>Open with markdown editor</code> </li> </ul> <h2> Acknowledgement </h2> <ul> <li><a href="https://github.com/microsoft/vscode" rel="noopener noreferrer">vscode</a></li> <li><a href="https://github.com/Vanessa219/vditor" rel="noopener noreferrer">vditor</a></li> </ul> <h2> Todo </h2> <ul> <li>[ ] Using <a href="https://code.visualstudio.com/api/extension-guides/custom-editors#custom-text-editor" rel="noopener noreferrer">Custom Text Editor</a> (<a href="https://github.com/gera2ld/markmap-vscode" rel="noopener noreferrer">demo</a>)</li> </ul> <h2> License </h2> <p>MIT</p> vscode markdown typora wysiwyg