Using VSCode Markdown For HTML

VSCode Markdown is a great way to write HTML content. It allows for easy export to HTML and has built in preview capabilities. The markdown syntax is intuitive and easy to learn, allowing for quick editing of content.

I have used it for creating help documentation for the last 6 months, and I prefer it to any other method I have tried.

I’ve been using VSCode markdown for my articles.

Markdown is an easy and powerful way to write.

I want to be able to use the same markdown files for my articles on medium and my website. So I created a new task in the vscode tasks.json file that will convert them for me into html files.

The task looks like this:

VSCode Markdown allows me to write my blog posts in Markdown, export it to HTML and publish it on the web.

By using VSCode Markdown I can write code with different programming languages and have them highlighted in the article.

It is also possible to use a dedicated Markdown preview editor for real-time preview of the file.

The way I use VSCode Markdown is by copy pasting the results from the preview editor (Ctrl + K V) into a CodePen pen and use that as a template for a blog post.

I can then easily add some CSS and JavaScript to make it look better and more interactive.

I’ve been using VSCode for a little while now and have used it to write Markdown extensively. I’m a big fan of the GitHub flavored version and use it quite frequently.

However, I’ve found that when you want to include some custom HTML in your markdown file (like embedding a video), it gets a bit tricky. For example, if you wanted to embed the following HTML in your markdown:

You’d run into problems because the Markdown processor would throw errors on both the < > and quotes.

Solution

VSCode markdown preview is great for checking the appearance of your markdown. But what if you want to create a pdf or html?

You can use pandoc and vscode tasks to convert to html. I’ll explain how below.

Install pandoc and make sure it’s in your path.

If you are using VSCode’s integrated terminal, you can use the following command to install pandoc:

npm install -g pandoc

You’ll need to add a task that calls pandoc.

Go to Terminal->Configure Tasks… and select Create Task.json file from template. Then select Markdown to HTML using Pandoc Task Template.

That will create a tasks.json file in your .vscode folder (create one if it doesn’t exist). You can customize this configuration as necessary, but I just used the default settings and it works great!

I use VSCode for writing Markdown. In the past, I used to use StackEdit and Boostnote.

While I love both of them, I don’t like to have my application opened all the time on my browser or desktop.

So I decided to try VSCode for Markdown.

Markdown is a lightweight markup language with plain text formatting syntax designed so that it can be converted to HTML and many other formats using a tool by the same name. Markdown is often used for formatting readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

Microsoft’s VSCode is one of the most popular cross-platform code editors available today. The primary features of markdown are:

Markdown converts text to HTML for publishing on the web.

It can be written using any text editor and read in its raw format without looking like an HTML document.

It is easy to learn, simple to use, and efficient as compared to WYSIWYG editors or manual coding.

It is not as feature-rich as HTML (especially when it comes to adding images, tables, etc.), but it’s perfect for blogging and online documentation.

Leave a Reply