> Markdown version of [/magazine/395-5-vs-code-shortcuts-to-improve-your-markdown](https://www.wearedevelopers.com/magazine/395-5-vs-code-shortcuts-to-improve-your-markdown). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # 5 VS Code Shortcuts to Improve Your Markdown **By:** [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney) **Published:** March 12, 2024 Every developer will write markdown at some point, either as part of their learning journey or career. In an age of rich-text editors, advanced WYSIWYGs and AI-generated content, the humble markup language (and confusingly-named) markdown can so often get forgotten... that is, until you need it. With good practices requiring README files, and so many repo's being almost impossible to navigate without one, markdown is essential for any developer to know. With this in mind, we though we'd put together a few helpful shortcuts and tips for writing markdown in Visual Studio Code, to make you a little more productive and confident working with .md's. ## 1. Preview Mode ![](https://wearedevelopers.imgix.net/public/magazine/articles/395/images/673f29bd97a5ff93a183ebbe_65eee071f453d35f6589473d_Preview_Mode.gif) _CTRL + SHIFT + V opening Preview Mode_ There's a strong possibility your markdown file will feature formatted blocks of text and code, links, lists, images and more, so previewing it is a must. Check your formatting at any time by opening your markdown in a new tab, in preview mode. To open preview, simply click **CTRL + SHIFT + V** , and double-click anywhere to edit that particular line in markdown file. ## 2. Preview Side by Side ![](https://wearedevelopers.imgix.net/public/magazine/articles/395/images/673f29bd97a5ff93a183ebd3_65eee082b0c50ea0a92d2f68_Side_by_Side.gif) _CTRL + K, then V on its own opens side-by-side preview_ Get a live view of your markdown by previewing it side-by-side, next to your markdown. This is incredibly handy, and you'll notice that if you scroll down in your preview (or the markdown file), the other one will scroll down too, so you're always in sync. To open side-by-side mode, click **CTRL + K** then **V** on its own. ## 3. Navigating your Markdown ![](https://wearedevelopers.imgix.net/public/magazine/articles/395/images/673f29bd97a5ff93a183ebc9_65eee08b972d7c9b90936443_Jump_to_Header.gif) _CTRL + SHIFT + O makes it easier to navigate around your file_ As your markdown file gets longer, it can become difficult to navigate around it. Don't let this slow you down, because there's one simple shortcut you need to move around your file seamlessly. Click **CTRL + SHIFT + O** to see an overview of your document and jump straight to the header of your choice. ## 4. Inserting Links ![](https://wearedevelopers.imgix.net/public/magazine/articles/395/images/673f29bc97a5ff93a183eba3_65eee0923950981916feea1e_Insert_Links.gif) _Adding links to your markdown is easy_ Okay, so this isn’t strictly a shortcut. However, inserting links isn't always that intuitive, and there's a possibility you're not doing it the quickest way. To attach a link to some existing text, simply highlight some text and press **CTRL + V** to make it clickable. Alternatively, to display your link, paste your URL as plain text, and click the 'stack' icon next to the link to auto format it. ## 5. Open the Surround With Menu ![](https://wearedevelopers.imgix.net/public/magazine/articles/395/images/673f29bd97a5ff93a183ebc3_65eee0974deca004b724d34f_Surround_With.gif) _CTRL + > opens the 'surround with' menu_ When you're formatting markdown, it's highly likely you'll use particular tags again and again. Perhaps you're emboldening text, adding a link, inserting a code block, or inserting an image. Get to these quickly and with just a couple of clicks, formatting any line of markdown in almost any way imaginable, using the ‘surround with’ menu. Select your text, click **CTRL + the greater-than symbol (\>)** and make your selection. ## Summary These five shortcuts should help you save precious time the next time you're writing a README, or taking down some quick notes in markdown. Give them a go, and see how easy they are to integrate into your way of working, you'll be surprised! We hope you found these tips useful! Keep your eyes peeled for the next instalment in this series, and join over 150,000 other developers and [subscribe to the DevDigest](https://www.wearedevelopers.com/about/newsletter) so you never miss an update! ## Related Articles - [test](https://www.wearedevelopers.com/magazine/172-test) - [Visual Studio Code Shortcuts for Cleaning Up Your Code](https://www.wearedevelopers.com/magazine/410-visual-studio-code-shortcuts-for-cleaning-up-your-code) - [Visual Studio Code Shortcuts for Navigating Your Code](https://www.wearedevelopers.com/magazine/406-visual-studio-code-shortcuts-for-navigating-your-code) - [15 Great VS Code Keyboard Shortcuts](https://www.wearedevelopers.com/magazine/200-15-great-vs-code-keyboard-shortcuts) ## Related Videos - [WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more](https://www.wearedevelopers.com/videos/1320-wearedevelopers-live-50-years-microsoft-web-readiness-report-the-german-web-community-and-more) - [Practical tips for keeping your C# code base clean](https://www.wearedevelopers.com/videos/100149-practical-tips-for-keeping-your-c-code-base-clean) - [What you can learn from an open-source project with 500 million downloads](https://www.wearedevelopers.com/videos/1556-what-you-can-learn-from-an-open-source-project-with-500-million-downloads) - [Behind the Scenes of Building VS Code - Harald Kirschner](https://www.wearedevelopers.com/videos/1902-behind-the-scenes-of-building-vs-code-harald-kirschner) ## Related Jobs - [Senior Software Engineer](https://www.wearedevelopers.com/jobs/ext/15942-senior-software-engineer) at **GitHub** - [Senior Software Engineer](https://www.wearedevelopers.com/jobs/ext/159190-senior-software-engineer) at **GitHub** - [Staff Developer Advocate, GitHub Security Lab](https://www.wearedevelopers.com/jobs/ext/1921051-staff-developer-advocate-github-security-lab) at **GitHub** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**