YouTip

To do a good job, one must first sharpen one's tools. Choosing a suitable editor is crucial for learning Markdown: ### 1. Professional Code Editors _Visual Studio Code_: A free editor developed by Microsoft. By installing Markdown-related extensions, you can get powerful editing and preview capabilities. **VSCode Installation Tutorial:*VSCode extensions that support Markdown include: * Markdown All in One: Provides shortcuts, table of contents generation, and math formula support * Markdown Preview Enhanced: Enhanced preview functionality, supports charts and presentation mode * markdownlint: Syntax checking and formatting standards Additionally, domestic companies Alibaba and ByteDance also have IDEs based on VS Code: * **Alibaba Qoder:** [https://qoder.com/](https://qoder.com/users/sign-up?referral_code=whhACoCj9WryAtAh2HAqjvE2ppbzwWtz) * **ByteDance Trae:** [ _**Obsidian**_: A local Markdown note-taking system that drives knowledge structure with folders and plain text. For usage tutorials, refer to: [ ### 2. Dedicated Markdown Editors * _Mark Text_: An open-source real-time preview Markdown editor with a clean interface and complete features. Download address: [https://github.com/marktext/marktext/](https://github.com/marktext/marktext/) * _Zettlr_: An academic writing-oriented Markdown editor that supports citation management and paper writing features. Download address: [https://github.com/Zettlr/Zettlr](https://github.com/Zettlr/Zettlr) * _Joplin_: A free and open-source note-taking application that supports markdown -- [https://joplinapp.org/](https://joplinapp.org/) ### 3. Online Editors * _Markdown Online Editor_: [https://www.jyshare.com/front-end/712/](https://www.jyshare.com/front-end/712/). * _Dillinger_: [https://dillinger.io/](https://dillinger.io/), a fully-featured online Markdown editor that supports cloud sync and multiple export formats. * _StackEdit_: [https://stackedit.io/](https://stackedit.io/), a browser-based editor integrated with Google Drive, Dropbox, and other cloud services. * _Jianshu, Yuque Editors_: Online Markdown editing environments provided by domestic platforms. * * * ## VS Code Markdown This tutorial will use the VSCode editor to explain Markdown syntax. VSCode supports MacOS, Windows, and Linux platforms, and includes multiple themes. VSCode comes with Markdown document editing plugins integrated by default, and natively supports Markdown syntax highlighting. VSCode (full name: Visual Studio Code) is a free source code editor developed by Microsoft that is cross-platform. * **VSCode Installation Tutorial:** **VSCode Official Website:** [https://code.visualstudio.com/](https://code.visualstudio.com/) !(#) VSCode real-time preview also requires executing the Markdown: Open Preview to the Side command. Enter the Markdown: Open Preview to the Side command in the command window: !(#) Final effect: !(#) If you need to convert markdown to PDF, images, HTML, and other formats, you can also install corresponding plugins to achieve this. You can also use our online editor to test: [https://www.jyshare.com/front-end/712](https://www.jyshare.com/front-end/712). MarkDown Mind Mapping Tool: [https://www.jyshare.com/front-end/9692/](https://www.jyshare.com/front-end/9692). ### Test Example In the following test, we will first install the **Markdown Preview Enhanced** plugin in VSCode to achieve more powerful functionality. Click the Extensions button in the right sidebar, search for the **Markdown Preview Enhanced** plugin, and click Install: !(#) **Restart VSCode after installation is complete.** Enter the following code in TUTORIAL.md: # TUTORIAL Markdown Test## Hello World! Paste this code format into the file TUTORIAL.md, the effect is as follows: !(#) Right-clicking in the preview box also provides various export functions: !(#) * * * ## MarkText We can also use (#). MarkText download address [https://github.com/marktext/marktext/releases](https://github.com/marktext/marktext/releases), you can choose different installation packages according to different systems: !(#) After downloading and installing, we can switch to source code mode in the View menu option, and also show the menu bar: !(#) Through the File menu option, you can export files in different formats: !(#)