How to Create and Preview Vim Markdown Files

H
Markdown is a lightweight easy-to-use markup language that is used to format text in a plain text file. The Markdown language is widely used to create README files on platforms like GitHub, Trello, StackExchange, and SourceForge. This is not limited to creating README files; It is also used to create web content, emails, and technical documentation.

Vim can be used to create, edit, and execute Markdown files directly from the terminal. Multiple plugins allow you to type Markdown and preview the output live.

This guide will explore Vim's capabilities for creating, modifying, and previewing Markdown files.

Comment: For the instructions in this tutorial, I am using Linux (Ubuntu 22.04).

Vim does not preview Markdown files out of the box. Full setup is required to render the markup file. To enable live preview of Markdown files in Vim, some dependencies and prerequisites need to be installed.

install dependencies

To play Markdown files using Vim you need to install the following programs on Linux:

To install Node.js on Linux:

Then you need to install Node Package Manager (NPM) using the following command:

Use this to verify Node.js version node -v For using commands and package managers npm -v, npm Used to install the mini node.js server that is required for various Vim Markdown file preview plugins.

Prerequisites for viewing Vim Markdown

You need to use plugins to prepare Vim to render a Markdown file. The best way to install plugins in Vim is to use the Vim Plugin Manager. Various plugin managers can be installed on Vim such as Vimplug, Pathogen, Neobundle or Vandal. I am installing wimplug, however, that's up to personal preference.

Installing Vimplugin Plugin Manager for Vim

First of all, execute the command mentioned below:

curl ,flow ,Vim,auto load,plug,Vim ,create,dir\

HTTPS,Raw,githubusercontent,com,jungun,Vim,plug,Owner,plug,Vim

above order -create-dirs makes auto load Directory if it doesn't exist and downloads the VimPlug file there.

Installing Markdown Live Preview Plugin

There are many plugins that provide a live preview of a Markdown file. A list of such plugins is given below:

All plugins do their job very efficiently. For this tutorial, I will install the vim-instant-markdown plugin because as soon as you open any Markdown file in Vim it opens the browser to give a live preview of the file.

Click here to open the VimAwesome Vim-Instant-Markdown plugin webpage and copy the code for VimPlug.

Open the vimrc file with sudo privileges:

Well, editing system files is not recommended, hence, create a user-specific vimrc file using the following command.

Place the following lines in the file.

call out plug#start,,

plug 'suan/vim-instant-markdown'

call out plug#end,,

You can install any plugin by placing the plugin code in between call plug#start() And call plug#end() tag in vimrc file. Save the file using SHIFT+zz keys or use the :wq command in Vim command mode.

Now, open the Vim editor using Vim order and run :plugininstall In command mode.

This will install the plugin and you are all set to create a Markdown file and preview it live in the Vim editor.

Creating a Markdown File in Vim

The latest Vim provides Markdown file syntax highlighting out of the box.

To create a Markdown file in Vim, use the following syntax:

You can use different extensions for Markdown file, such as:

Let's create a markdown file.

# Welcome

,it Is linux,

,A website that provides related tutorials To linux and open,source software,

## Popular Categories

1, ubuntu

2, linux commands

3, Power

### Permission To install node,js But linux

`sudo apt install nodejs`

### Java Hello World Code

,

class helloworld ,

public static void main,string[] logic, ,

System,Outside,println,“Hello World!”,,

,

,

,

visit [Linuxhint],world Wide Web,linuxhint,com, Now,

In the above file, hash (#, ##, ###) signs are used to add titles with different weights, the greater than (>) sign is used to add blockquotes, and the tick (`, “`) is used to add a command or code block, see the cheat sheet in the following section for more Markdown file elements.

vim markdown file preview

To view a Markdown file, you need a renderer that can translate the file and provide output as directed. Like an HTML file that requires a web browser to render, a Markdown file also requires an application to view it.

There are many renderer apps available that can view a Markdown file, for this tutorial we have installed a Vim plugin that can help us preview the Markdown file live.

So, when you open a Markdown file the vim-instant-markdown plugin opens the browser to a live preview rendered version of the Markdown file in Vim.

As you edit the file in Vim, the plugin will translate the instructions at runtime and give a live preview on the browser.

Vim Markdown preview in terminal

Markdown files can be read in the terminal using various Markdown renderers like Pandoc or Glo. Let's install Glo using Snap on Linux:

Now, to view the markdown file in the terminal:

However, these readers only interpret a limited number of Markdown elements and may not support all features. In my opinion, viewing markdown from the terminal is not a good option.

Exporting Markdown file to different formats using Vim

A nice feature of Markdown files is that you can export them to different file formats like Doc, PDF, and HTML. For that, you need to install a utility called Pandoc.

To install pandoc on Linux, use this:

sudo apt,to get install pandoc texlive,condom,base texlive,Fonts,Recommended texlive,Excessive,utils texlive,condom,Excessive

You may require additional utilities as mentioned in the above commands for PDF conversion.

Comment: To export Markdown files to a different format make sure to save the file before executing the command.

Converting Markdown File to HTML

Use the below command to convert Markdown file to HTML.

Comment: To use! Any external command can be executed in the Vim editor.

,Pondok [filename],MD ,hey [filename],HTML

converting markdown file to pdf

PDF is a widely accepted file format; Use the below mentioned commands to convert a Markdown file to PDF:

,Pondok [filename],MD ,hey [filename],PDF

Converting Markdown File to Docx

Docx is another file format that can be converted to a Markdown file.

,Pondok [filename],MD ,hey [filename],docx

replace the [filename] In the above commands with the file names you want to convert.

markdown cheat sheet

Commonly used Markdown elements are given in the following image:

conclusion

Vim is a powerful editor that becomes an even better option with the help of plugins. Vim provides basic syntax highlighting of Markdown files, so that they can be easily edited in the editor. Additionally, to preview the rendered form of a Markdown file, you need to install a plugin like vim-instant-markdown. Files can be exported to various file formats with the help of Linux utilities like Pandoc Markdown.

Add comment

By Ranjan