Markdown and VS Code 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. A handy Markdown Cheatsheet is also available here, and can serve as a useful refresher for the formatting required in your markdown in order to use automatic formatting features such as headings, table of contents, tables, links, image embedding and comments. Visual Studio Code for Working with Markdowns.

By Jean-Claude Colette Mar 24, 2020

Description:

This article explains that Markdown can be installed in Visual Studio and used as a text editor and HTML converter or as a library, with examples of conversion on the fly.

This article shows how to install and use Markdown / MarkDig in Visual Studio.
Markdown can be integrated into Visual Studio and can be used as a text editor or a converter to HTML.

Interest of Markdown

The HTML language has a syntax that does not allow easy editing of a text. It requires an HTML code editor that you can find in Visual Studio for example.
But if a web developer decides to insert into a page of his website a comment editor, he has several possibilities:

• use a plain text box,
• use a rich text box,
• or design a WYSIWYG HTML editor

The last two solutions are ideal for a visitor to the site. Indeed, he will be able to format his comment, write text in italics, bold or color, etc.

The first solution allows to write only plain text and if posted it such, we would get an unsatisfactory result. To make more attractive viewing of comments, it is possible to use tags to represent emoticons, to create links to other sites, etc. But avoid asking a visitor to encode its comments in HTML.

Currently, the solution the most widespread is to ask the user to type his comment under certain rules, like placing his text between two dashes _ to get it in italics, etc.

This text is then automatically converted into HTML and viewed in another part of the page.

There are many languages including basic text formatting rules, but one that is widely used is Markdown. An interesting extension of Markdown is Markdig and can be installed on Visual Studio.

Markdown has other uses. Some web master uses it to create the content of the pages of their site. The text of a page is placed in a text file, automatically converted to HTML and inserted into a web page template. In keeping with the style of their site, they customize the CSS file that is created by default by Markdown. Pages may be also generated by the server, by converting on the fly the Markdown files to HTML.

On the other hand, Markdown can be useful for developers to write documentation for their software.

Use of Markdown as text editor

You can find a Markdown for Visual Studio editor at the following address:
MadsKristensen.MarkdownEditor
It is powered by the Markdig parser.

After installing, just create a text file with the .md extension in Visual Studio.

By double clicking on the file name in solution Explorer, it brings up two windows side by side.
Type a few lines of text in the left window:

We can see the result in the preview window:

Converting a Markdown file to HTML

To convert a Markdown file to HTML in VS, we right click on the file and select Generate HTML file.
A HTML file with the same name is created.

Give an example. Type the following text file:

In the preview window, we get:

And converting to HTML:

We remark that the header is reduced to a minimum and there is no link to bootstrap for example.

You can resolve this problem by creating the md-template.html template file and placing the necessary references to style sheets and JavaScript files.
It is possible to change the default template file name in Visual Studio. You can search: Tools > Options > Markdown > Advanced HTML > Template file name > file name.

This is the default template file:

Conversion of Markdown in HTML code by programming

If we stored Markdown text in files or in a database, such as for example comments, it may be useful to convert to HTML and insert the code into a Web page.

This conversion can be done on the server side when generating a page. We will give an example in ASP.NET MVC.

Create an ASP.NET MVC application, install the Markdig package on Nuget and in the index.cshtml file, insert the following instructions:

The display shows:

This is a text with some emphasis

In fact, we have not all features of Markdig. For example, missing citations, task lists, media links, ... If we want to use emoticons, for example, we need to add a few lines of code:

We get:

Now, load the file.md file, convert it to HTML:

Conclusion

That conversion can of course be done in an ASP.NETWebforms application.

If your site is not extremely fast, I advise you to convert Markdown files beforehand.

-- This extension is in early preview, please report any issues/suggestions at https://github.com/cschleiden/vsts-markdown or cschleid@microsoft.com --

Markdown is a custom work item form control, that allows you to edit the rich text fields on your work items with a Markdown enabled editor.

Features

Headings, Links, Code Snippets, Lists

Auto grow based on content

Markdown adjusts to the content when reading:

and editing:

Drag'n'Drop image upload

Easy drag and drop uploading:

How to: Install for VSTS

You can follow the documentation for VSTS or TFS.

Here are some quick steps to get you started on VSTS:

Step 1

From an inherited process, select the work item type you want to customize. Then, from the Layout tab, add a custom control. For a Feature it looks like this:

Step 2: Select Markdown control

Select the Markdown control from the dropdown:

Step 3: Configure Markdown control

From the Options tab, select the backing field. For example, Description:

Optionally, you can customize the minimum and maximum editor height.

Step 4: Select Markdown control

Place the control in a new group:

C# - How Can I View Markdown Text Inside Visual Studio ...

Step 5: Hide existing group

Since we don't want two editors on the work item form, hide the existing Description group:

Step 6: Use the Markdown control

All done, since the layout is auto-saved just navigate to an existing or a new work item and the control will show up:

FAQ

Q: When I start using Markdown what happens to the existing HTML content in my work items?

A: Markdown displays existing HTML content just fine. For editing, it detects whether content has been edited using an older editor and allows to convert existing HTML input to markdown, or to overwrite the changes.

Q: What happens with older clients when using Markdown?

A: Markdown stores the original markdown input plus rendered HTML in the actual work item field. It's difficult to edit, but displaying should work fine in all supported clients:

Version History

• 0.4.0 - BREAKING: Switched the markdown renderer from marked to markdown-it to be in sync with VSTS and support syntax highlighting. You might see the Conflict message when editing existing markdown fields. Just hit [Ignore] and save again, you should not lose any information.
• 0.3.0 - First preview release

Planned Features

See More Results

• Pasting images
• Refer to https://github.com/cschleiden/vsts-markdown/issues/ for an up-to-date list

Visual Studio Markdown Formula

As always, the code is available at https://github.com/cschleiden/vsts-markdown.