Skip to content
Yet, just another markdown preview plugin for vim.
Python CSS Vim script Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github .github/CONTRIBUTING.md Aug 16, 2017
images
plugin
pythonx remove unused file and function Jul 1, 2018
resources add line-height for github.css May 24, 2018
.gitignore add unit test code Mar 14, 2016
.travis.yml add unit test code Mar 14, 2016
LICENSE change the license Oct 10, 2015
README.md Fix minor typos Sep 11, 2018
TEST.md Add unicode test case into test.md Jul 1, 2018
deploy.sh

README.md

markdown-preview.vim

GitHub version Build Status Scrutinizer Code Quality

Yet another vim markdown preview plugin. Not suitable for Windows.

Why you need this

  1. CommonMark Syntax Support
  2. It's easy to install with vundle or bundle
  3. No complex config steps
  4. Code Hightlight
  5. Easy to custom your own css style
  6. Code custom style hightlight(using hightlight.js)
  7. Now support flowcharts feature! (based on mermaid, should read the doc first)

Dependency

You may install some libraries first:

(sudo) pip install future
(sudo) pip install mistune

Installing

Recommend Bundle or Vundle

Vundle

  1. you can see how to install vundle here
  2. after you install your vundle, make sure your plugins folder is ~/.vim/bundle
  3. then you can write this plugin url into your .vimrc file, like Plugin 'MikeCoder/markdown-preview.vim'
  4. then use PluginInstall to install the plugin

Install without Vundle or other pacakage management plugins

  1. this is not a good choice, make sure every step is right
  2. use cd ~/.vim into your vim folder
  3. use git clone https://github.com/MikeCoder/markdown-preview.vim.git .
  4. use mv markdown-preview.vim/ . && rm -rf markdown-preview.vim*
  5. use **cp -r resources MarkDownRes ** to copy the resources
  6. then you can open your vim and type :MarkdownPreview Github to check whether it is ok

Usage

You can see example document here TEST.md

Config

If your plugin folder is not .vim/bundle, you should config it first, by adding these into your .vimrc file:

Like:

" markdown-preview.vim {{{
    let g:PluginDir = '/Users/Mike/.vim/bundle/markdown-preview.vim'
" }}}
  • g:PluginDir is where your markdown-preview.vim plugin is.

Common Usage

  1. edit your markdown doc normally
  2. when you want to preview it in html you just use :MarkdownPreview default to show your doc in your browser
  3. if you want to change your style. you just use :MarkdownPreview GitHub in github style markdown view
  4. you can also use the following code to your vimrc file to bind key maps.
map <leader>m :MarkdownPreview GitHub<CR>

Advanced Usage

Preview with custom code sytle and body style

  1. use :MarkdownPreviewWithCustomCodeStyle css-style code-style instead
  2. you can use custom css style and code hightlight style
  3. the following are code styles you can use:
    • github
    • solarized_dark
    • solarized_light
    • default
    • color-brewer
    • railscasts
    • tomorrow
    • zenburn
    • mono
    • monokai_sublime
  4. these code css files are in your ~/.vim/MarkDownRes/code-styles folder
  5. for example, when you use :MarkdownPreviewWithCustomCodeStyle GitHub zenburn, when edit the TEST.md

code hightlight example

For flowcharts

I don't recommand you to use this feature due to many websites or editors not supporting this feature which may confuse you. However, if you want to use the flowcharts feature, you must add the type when you writing flowcharts, for example, when you write, you should add chart to the code block as below:

code-chart

Then when you use MarkdownPreview github, you can see the result as below:

code-result

Customize

This theme is in the css folder, if you want to change it to your favorite theme. follow the steps:

  • go into your markdown-preview.vim folder
  • find resources folder and you will find default.css and github.css here
  • add your custom css file here, such as example.css
  • use vim open your markdown doc and :MarkdownPreview example
  • and you will see your doc preview in your browser with example.css

Thanks

  1. rtfd/CommonMark-py
  2. vim
  3. mermaid

TODO

See @TODO.md

LAST

Wish you have a nice day

LICENSE

See @LICENSE

You can’t perform that action at this time.