DEV Community

shadowy-pycoder
shadowy-pycoder

Posted on

Simple Markdown HTML Viever for Terminal and Neovim

#programming #tutorial #productivity #css

First we need to install pandoc from their official GitHub:

cd ~/Downloads && wget -N https://github.com/jgm/pandoc/releases/download/3.7.0.2/pandoc-3.7.0.2-1-amd64.deb && \
sudo dpkg -i pandoc-3.7.0.2-1-amd64.deb
Enter fullscreen mode Exit fullscreen mode

Create assets directory for pandoc and put some css files in here:

mkdir -p ~/.local/share/pandoc/ && wget http://a-dma.github.io/gruvbox-css/gruvbox-dark-medium.min.css -O ~/.local/share/pandoc/gruvbox-dark-medium.min.css
Enter fullscreen mode Exit fullscreen mode

Create an executable:

tee ~/.local/bin/md << EOF 
pandoc $1 --highlight-style zenburn -s -c ~/.local/share/pandoc/gruvbox-dark-medium.min.css.css -o /tmp/pandocRenderedMarkdown.html
xdg-open /tmp/pandocRenderedMarkdown.html
EOF
Enter fullscreen mode Exit fullscreen mode

Make sure ~/.local/bin in your PATH

chmod +x ~/.local/bin/md
Enter fullscreen mode Exit fullscreen mode

Create desktop application:

tee ~/.local/share/applications/md.desktop << EOF 
[Desktop Entry]
Encoding=UTF-8
Version=1.0
Type=Application
NoDisplay=true
Exec='/home/$USER/.local/bin/md' %f
Name=Markdown Viever
Comment=Markdown Viever
Categories=Development;Code;
EOF
Enter fullscreen mode Exit fullscreen mode

Finally, edit mimelist:

vi ~/.config/mimeapps.list
Enter fullscreen mode Exit fullscreen mode

Like that:

Image description

Confirm that it works:

which md
# ~/.local/bin/md
Enter fullscreen mode Exit fullscreen mode 
md README.md
# Should appear in your browser
Enter fullscreen mode Exit fullscreen mode 
xdg-open README.md
# Should appear in your browser
Enter fullscreen mode Exit fullscreen mode

Result should be similar to this:

GoHPTS - Transform SOCKS5 Proxy to HTTP proxy

How to use it in NeoVim?
Install NvimTree
Open your project and you will see file tree on the left.
Press s on any md file and it will be opened in a browser.

Top comments (0)