Working with Markdown files in Visual Studio Code is simple, straightforward, and fun. Besides VS Code's basic editing, there are a number of Markdown specific features that will help you be more productive.

I just started a new YouTube Coding Bootcamp series in 2020 Dev. Setting up Visual Studio Code (Part 2)—HTML, CSS and JavaScript settings 9th Feb 2018. Welcome back to Part 2 of the VS code setup series. If you haven’t watched the 1st part yet, I suggest you go watch it first, because everything we’re going to do.

Markdown extensions

In addition to the functionality VS Code provides out of the box, you can install an extension for greater functionality.

Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Markdown preview

VS Code supports Markdown files out of the box. You just start writing Markdown text, save the file with the .md extension and then you can toggle the visualization of the editor between the code and the preview of the Markdown file; obviously, you can also open an existing Markdown file and start working with it. To switch between views, press ⇧⌘V (Windows, Linux Ctrl+Shift+V) in the editor. You can view the preview side-by-side (⌘K V (Windows, Linux Ctrl+K V)) with the file you are editing and see changes reflected in real-time as you edit.

Here is an example with a very simple file.

Tip: You can also right-click on the editor Tab and select Open Preview (⇧⌘V (Windows, Linux Ctrl+Shift+V)) or use the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) to run the Markdown: Open Preview to the Side command (⌘K V (Windows, Linux Ctrl+K V)).

Dynamic previews and preview locking

By default, Markdown previews automatically update to preview the currently active Markdown file:

You can lock a Markdown preview using the Markdown: Toggle Preview Locking command to keep it locked to its current Markdown document. Locked previews are indicated by [Preview] in the title:

Editor and preview synchronization

VS Code automatically synchronizes the Markdown editor and the preview panes. Scroll the Markdown preview and the editor is scrolled to match the preview's viewport. Scroll the Markdown editor and the preview is scrolled to match its viewport:

You can disable scroll synchronization using the markdown.preview.scrollPreviewWithEditor and markdown.preview.scrollEditorWithPreviewsettings.

The currently selected line in the editor is indicated in the Markdown preview by a light gray bar in the left margin:

Additionally, double clicking an element in the Markdown preview will automatically open the editor for the file and scroll to the line nearest the clicked element.

Outline view

The Outline view is a separate section in the bottom of the File Explorer. When expanded, it will show the symbol tree of the currently active editor. For Markdown files, the symbol tree is the Markdown file's header hierarchy.

The Outline view is a great way to review your document's header structure and outline.

Extending the Markdown preview

Extensions can contribute custom styles and scripts to the Markdown preview to change its appearance and add new functionality. Here's a set of example extensions that customize the preview:

Using your own CSS

You can also use your own CSS in the Markdown preview with the 'markdown.styles': []setting. This lists URLs for style sheets to load in the Markdown preview. These stylesheets can either be https URLs, or relative paths to local files in the current workspace.

For example, to load a stylesheet called Style.css at the root of your current workspace, use File > Preferences > Settings to bring up the workspace settings.json file and make this update:

Keep trailing whitespace in order to create line breaks

To create hard line breaks, Markdown requires two or more spaces at the end of a line. Depending on your user or workspace settings, VS Code may be configured to remove trailing whitespace. In order to keep trailing whitespace in Markdown files only, you can add these lines to your settings.json:

Markdown preview security

For security reasons, VS Code restricts the content displayed in the Markdown preview. This includes disabling script execution and only allowing resources to be loaded over https.

When the Markdown preview blocks content on a page, an alert popup is shown in the top right corner of the preview window:

You can change what content is allowed in the Markdown preview by clicking on this popup or running the Markdown: Change preview security settings command in any Markdown file:

The Markdown preview security settings apply to all files in the workspace.

Here are the details about each of these security levels:

Strict

This is the default setting. Only loads trusted content and disables script execution. Blocks http images.

It is strongly recommended that you keep Strict security enabled unless you have a very good reason to change it AND you trust all markdown files in the workspace.

Allow insecure content

Keeps scripts disabled but allows content to be loaded over http.

Disable

Disables additional security in the preview window. This allows script execution and also allows content to be loaded over http.

Snippets for Markdown

There are several built-in Markdown snippets included in VS Code - press ⌃Space (Windows, Linux Ctrl+Space) (Trigger Suggest) and you get a context specific list of suggestions.

Tip: You can add in your own User Defined Snippets for Markdown. Take a look at User Defined Snippets to find out how.

Compiling Markdown into HTML

Visual Studio Code Shortcut For Html Template

VS Code integrates with Markdown compilers through the integrated task runner. We can use this to compile .md files into .html files. Let's walk through compiling a simple Markdown document.

Step 1: Install a Markdown compiler

For this walkthrough, we use the popular Node.js module, markdown-it.

Note: There are many Markdown compilers to choose from beyond markdown-it. Pick the one that best suits your needs and environment.

Step 2: Create a simple MD file

Open VS Code on an empty folder and create a sample.md file.

Note: You can open a folder with VS Code by either selecting the folder with File > Open Folder or navigating to the folder and typing 'code .' at the command line.

Place the following source code in that file:

Step 3: Create tasks.json

The next step is to set up the task configuration file tasks.json. To do this, run Terminal > Configure Tasks and click Create tasks.json file from templates. VS Code then presents a list of possible tasks.json templates to choose from. Select Others since we want to run an external command.

This generates a tasks.json file in your workspace .vscode folder with the following content:

To use markdown-it to compile the Markdown file, change the contents as follows:

Tip: While the sample is there to help with common configuration settings, IntelliSense is available for the tasks.json file as well to help you along. Use ⌃Space (Windows, Linux Ctrl+Space) to see the available settings.

Step 4: Run the Build Task

Since in more complex environments there can be more than one build task we prompt you to pick the task to execute after pressing ⇧⌘B (Windows, Linux Ctrl+Shift+B) (Run Build Task). In addition, we allow you to scan the output for compile problems. Since we only want to convert the Markdown file to HTML select Never scan the build output from the presented list.

At this point, you should see an additional file show up in the file list sample.html.

If you want to make the Compile Markdown task the default build task to run execute Configure Default Build Task from the global Terminal menu and select Compile Markdown from the presented list. The final tasks.json file will then look like this:

Automating Markdown compilation

Let's take things a little further and automate Markdown compilation with VS Code. We can do so with the same task runner integration as before, but with a few modifications.

Step 1: Install Gulp and some plug-ins

We use Gulp to create a task that automates Markdown compilation. We also use the gulp-markdown plug-in to make things a little easier.

We need to install gulp both globally (-g switch) and locally:

Note: gulp-markdown-it is a Gulp plug-in for the markdown-it module we were using before. There are many other Gulp Markdown plug-ins you can use, as well as plug-ins for Grunt.

You can test that your gulp installation was successful by typing gulp -v. You should see a version displayed for both the global (CLI) and local installations.

Step 2: Create a simple Gulp task

Open VS Code on the same folder from before (contains sample.md and tasks.json under the .vscode folder), and create gulpfile.js at the root.

Place the following source code in that file:

What is happening here?

1. We are watching for changes to any Markdown file in our workspace, i.e. the current folder open in VS Code.
2. We take the set of Markdown files that have changed, and run them through our Markdown compiler, i.e. gulp-markdown-it.
3. We now have a set of HTML files, each named respectively after their original Markdown file. We then put these files in the same directory.

Step 3: Run the gulp default Task

To complete the tasks integration with VS Code, we will need to modify the task configuration from before to run the default Gulp task we just created. You can either delete the tasks.json file or empty it only keeping the 'version': '2.0.0' property. Now execute Run Task from the global Terminal menu. Observe that you are presented with a picker listing the tasks defined in the gulp file. Select gulp: default to start the task. We allow you to scan the output for compile problems. Since we only want to convert the Markdown file to HTML select Never scan the build output from the presented list. At this point, if you create and/or modify other Markdown files, you see the respective HTML files generated and/or changes reflected on save. You can also enable Auto Save to make things even more streamlined.

If you want to make the gulp: default task the default build task executed when pressing ⇧⌘B (Windows, Linux Ctrl+Shift+B) run Configure Default Build Task from the global Terminal menu and select gulp: default from the presented list. The final tasks.json file will then look like this:

Step 4: Terminate the gulp default Task

The gulp: default task runs in the background and watches for file changes to Markdown files. If you want to stop the task, you can use the Terminate Task from the global Terminal menu.

Next steps

Read on to find out about:

• CSS, SCSS, and Less - Want to edit your CSS? VS Code has great support for CSS, SCSS, and Less editing.

Common questions

Is there spell checking?

Not installed with VS Code but there are spell checking extensions. Check the VS Code Marketplace to look for useful extensions to help with your workflow.

Does VS Code support GitHub Flavored Markdown?

No, VS Code targets the CommonMark Markdown specification using the markdown-it library. GitHub is moving toward the CommonMark specification which you can read about in this update.

In the walkthrough above, I didn't find the Configure Task command in the Command Palette?

You may have opened a file in VS Code rather than a folder. You can open a folder by either selecting the folder with File > Open Folder or navigating to the folder and typing 'code .' at the command line.

Today we’re going to build an amazing HTML editor using Visual Studio Code (VS Code), a powerful, versatile cross-platform code editor that provides a lot of capabilities. Let’s get this out of the way up front: I’m a raving VS Code fan! In a previous post, I showed you how to Build an Amazing Markdown Editor, and now we’re going to learn how to create a fabulous HTML editor as well. Let’s get started!

Install Visual Studio Code

Go to the VS Code Downloads page to download and install the appropriate bits for your platform (i.e. Windows, Linux, or OS X). If you already have VS Code installed, be sure you update your copy to the latest version by going to Help | Check For Updates… from the VS Code menu.

If you are installing VS Code for Windows, be sure to check the two checkboxes shown in the screenshot below. This will provide the ability to right click on a folder in Windows Explorer and launch VS Code. These checkboxes are not checked by default.

Familiarize yourself with VS Code Out-of-the-box HTML features

HTML Formatting

VS Code includes a number of built-in HTML features. Microsoft has created an excellent introductory article that we will build upon. Let’s explore these built-in HTML features as a first step in your journey to become a VS Code HTML editing pro.

First, create a folder called html (or name of your choice) that you can use to store your HTML files.

Next, right click on this folder and choose Open with Code. This will open Code for the entire folder rather than just for an individual file which is very handy for creating and editing many files in a given folder at once. If this feature is not available on your platform, open VS Code first, and then select File | Open Folder... and navigate to the html folder.

Create a file called index.html and add the following HTML exactly as it is written here with no indentation and with the extra vertical space between the paragraph (<p>) tags:

Next, press Shift+Alt+F and VS Code will reformat your HTML to look much prettier. Very nice! (You can also highlight a selected area of text and reformat just the selected area.) Your document should now look something like this:

Visual Studio C# Examples

Alas, VS Code has indented the HTML tags to provide for easier reading; however, I prefer my HTML to be tighter without the extra vertical spacing. This is obviously a personal preference and you may opt for the extra vertical spacing. In case you want to change it, here are the steps:

From the VS Code menu, select File | Preferences | User Settings

Add the following contents between the curly braces (there may be other entries there already):

This is a JSON configuration file so make sure there is a comma after each entry with the exception of the last entry. Here’s what these settings accomplish:

• “html.format.preserveNewLines”: false (This makes our HTML tighter and removes the extra vertical space between HTML tags such as the vertical space between our paragraph tags in the sample above)
• “html.format.extraLiners”: “” (Use this to configure a list of tags, comma separated, that should have an extra newline before them. We enter “” so that no tags will have an extra newline before them.

After saving the changes you made to the user settings file, go ahead and reformat your HTML document again using Shift+Alt+F. Your HTML will now look much tighter:

Push it to the Limit with Emmet

VS Code supports Emmet snippets out of the box. As described on the Emmet website, “Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation.” Let’s try a couple of examples:

Create a new file called index2.html and enter the following text:

After entering “html:5”, press the Tab key. Bam! VS Code expands this Emmet shortcut into an HTML 5 starting template with your cursor positioned to start typing under the body tag:

Next, between the two body tags, enter the following text and press the Tab key:

This Emmet shortcut is expanded to create 5 <li> tags under the ul tag as follows:

Emmet provides a very powerful shortcut syntax for writing HTML. See this Emmet cheat sheet to gain a deeper understanding of the full scope of Emmet’s capabilities.

Install HTML Snippets Extension

Let’s add some extensions to make VS Code an even better HTML editor. We’ll first start by adding the HTML Snippets extension written by Mohamed Abusaid to enable us to add basic HTML tags quickly. Here’s how to install this extension:

• Press Ctrl+P to launch VS Code Quick Open.
• Paste in the following text and press Enter: ext install html-snippets
• There will be several extensions listed. Tap the Install button associated with the HTML Snippets extension.
• After the installation completes, tap the Enable button.
• Restart VS Code when prompted.

To use the HTML snippets, press Ctrl+Space and you will be presented with a list of possible snippets. As an example of the elegance of this extension:

• Press Ctrl-Space.
• Type “a” to select the <a> (anchor/hyperlink) snippet.
• Press the Tab key.
• Your cursor will now be positioned to enter the hyperlink source link (URL). Enter a URL.
• Press Tab again and your cursor will be positioned to enter the text assocated with the URL.
• Press Tab again to move outside of the anchor element you created.

Add HTML Previewing Options

We would like to be able to preview the HTML we develop in a browser window. In this section, we will implement two methods to make this happen. The first method provides a quick preview and the second method provides continuous live preview feedback each time we save our HTML document.

Add Extension to View HTML Document in a Browser

The first option adds a simple, but useful, way of viewing the HTML we are creating in a browser window. We’ll use the View In Browser extension created by qinjia. To install, carry out the following steps:

• Press Ctrl+P to launch VS Code Quick Open.
• Paste in the following text and press Enter: ext install view-in-browser
• There will be several extensions listed. Tap the Install button associated with the View in Browser extension.
• After the installation completes, tap the Enable button.
• Restart VS Code when prompted.

To use the extension, simply press Ctrl+F1 and the default browser on your system will launch the current HTML page you are editing. It does not get much easier than this!

Add Extension to Use BrowserSync for Continuous Feedback

BrowserSync enables us to save changes to our HTML document and see those changes immediately reflected in a browser window rather than having to press Ctrl+R to refresh the browser window. It’s even more awesome in a multi-monitor configuration since you can edit your HTML on one monitor and see the browser results on another monitor.

We will install the excellent lite-server npm (Node.js) package created by John Papa to accomplish this goal. Here’s how we do it:

• Install Node.js from here if you do not already have it installed. This will install both Node.js and npm, the Node.js package manager which we will use in the next step.
• From VS Code, open a terminal session by typing Ctrl+`(Ctrl + back tick character)
• In the terminal, enter the following to install the lite-server package globally on your system:
• Enter the following command in the terminal to start lite-server:
• lite-server will start up and host your files using a server on localhost port 3000 (http://localhost:3000). Additionally, lite-server will launch your default web browser and take you to that location.
• Note: lite-server uses index.html as the default document. Change the URL in your browser after it launches to the appropriate HTML file name. For example, if you have created an HTML file called home.html, enter http://localhost:3000/home.html in your browser address bar.
• Make some changes to your HTML file in VS code and save those changes. You should see those changes reflected in your Web browser without needing to refresh the content. This is the power of BrowserSync in action!

Install HTML Linter

Finally, let’s add an HTML linter to make our HTML editor even more capable. Linters are used by programmers to check source code for programmatic and stylistic errors. It helps both proactively fix errors before they occur as well as enforce a standard style to help make the source more readable and maintainable. We’ll use the HTMLHint extension developed by Mike Kaufman to conduct static code analysis behind the scenes and provide linting suggestions for improving our HTML code.

Let’s first install the extension:

• Press Ctrl+P to launch VS Code Quick Open.
• Paste in the following text and press Enter: ext install HTMLHint
• There will be several extensions listed. Tap the Install button associated with the HTMLHint extension.
• After the installation completes, tap the Enable button.
• Restart VS Code when prompted.

Next, let’s see how it works. Create a new document called test.html, enter “html:5”, and press the Tab key to expand the Emmet HTML5 shortcut. You should now see the following contents:

Remove the opening “<body>” tag. HTMLHint will activate a green squiggly line under the closing body tag. Hover your mouse over this green squiggly line and you will see a message that indicates this tag must be paired with a start tag as shown here:

It’s great to have this extra guidance!

To modify the linting rules used by HTMLHint, create a file called .htmlhintrc in the root of your project directory containing your HTML files. Add the following rules as a starting point:

You can, for example, change the doctype-first value to false if you do not want to require an HTML doctype declaration at the top of your HTML documents. You will find a complete list of HTMLHint rules here.

Visual Studio Code Snippets For Html

Conclusion

Visual Studio Code provides solid HTML editing functionality out of the box. In this guide, we have taken it up several notches to create a very impressive HTML editor. You are now equipped and ready to create some awesome HTML pages in a highly productive fashion!

How To Use Visual Studio Code For Html

Follow @thisDaveJ (Dave Johnson) on Twitter to stay up to date on the latest tutorials and tech articles.

Visual Studio Code Html Viewer

Additional Articles

Visual Studio Code For Html Editing

Build an Amazing Markdown Editor Using Visual Studio Code and Pandoc
Visual Studio Code Jumpstart for Node.js Developers
Using Visual Studio Code with a Raspberry Pi (Raspbian)
Beginner’s Guide to Installing Node.js on a Raspberry Pi