VIM 的 MarkDown 预览插件

Posted on by D0n9X1n

首先，我习惯在 VIM 下进行代码的编写和文档的编写，但是有一个比较蛋疼的地方，就是没有比较好的预览方式，之前用过 sublime，觉得它的 markdown preview 的插件功能就刚刚好，使用简单不需要多余的配置。

在之前，我都是在 Mou 下进行文档的编写，然后导出 PDF 还有预览效果。不过始终不是很方便，因为，有时候写文档和代码都在 VIM 里面。如果需要查看效果，就要去打开其他的软件就觉得比较麻烦。尤其是，我希望能有代码高亮的功能。

找过几个 Vim preview 的插件：

以上， 所以就自己写了一个插件。markdown-preview.vim。主要是满足自己的一个需求。

  • 不用实时预览
  • 代码自动识别高亮
  • 主题可自定义

同时，代码的主题自定义也在开发中。

安装和使用的方法也很简单。

推荐使用 Bundle 和 Vundle 进行安装

  • 添加 Bundle ‘MikeCoder/markdown-preview.vim’ 到 vimrc 或者 vimrc.bundles 里面
  • 执行 BundleInstall 进行安装就可以了

BTW:推荐使用 k-vim 做为 VIM 的配置

插件使用方法

  • 正常编辑你的.md 或者.markdown 文件。
  • 如果需要进行预览的时候就可以执行:MarkdownPreview default 命令，在浏览器中进行预览
  • default是主题，插件自带有default 和 GitHub 两个主题。
  • 你也可以添加快捷键的方式简化操作，如:map m :MarkdownPreview GitHub

自定义

如果你想添加自己的主题。可以按照如下步骤:

  • 打开你的.vim 文件夹，一般位于$HOME/.vim
  • 然后找到 MarkDownRes 文件夹
  • 进入就可以看到 default.css 和 GitHub.css 两个文件
  • 将你的 css 文件添加到这，如 example.css
  • 然后回到 vim,执行:MarkDownPreview example
  • 就可以用 example.css 的效果渲染你的 markdown 文档了

代码高亮

插件自带有代码高亮功能。如下的 python 代码： 

import re
import inspect
__version__ = '0.7.1'
__author__ = 'Hsiaoming Yang lepture.com>'
__all__ = [
    'BlockGrammar', 'BlockLexer',
    'InlineGrammar', 'InlineLexer',
    'Renderer', 'Markdown',
    'markdown', 'escape',
]
_key_pattern = re.compile(r'\s+')
_escape_pattern = re.compile(r'&(?!#?\w+;)')
_newline_pattern = re.compile(r'\r|\r')
_block_quote_leading_pattern = re.compile(r'^ *> ?', flags=re.M)
_block_code_leadning_pattern = re.compile(r'^ {4}', re.M)
_inline_tags = [
    'a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'data',
    'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark',
    'ruby', 'rt', 'rp', 'bdi', 'bdo', 'span', 'br', 'wbr', 'ins', 'del',
    'img', 'font',
]
_pre_tags = ['pre', 'script', 'style']
_valid_end = r'(?!:/|[^\w\s@]*@)\b'
_valid_attr = r'''"[^"]*"|'[^']*'|[^'">]'''
_block_tag = r'(?!(?:%s)\b)\w+%s' % ('|'.join(_inline_tags), _valid_end)

在预览效果中，就是如下的效果:

代码预览

希望大家喜欢。

10 Replies to “VIM 的 MarkDown 预览插件”

  2. 你好
    今天用了你的vim markdown，什么都好，但就是同步滚动用不了～～
    系统：ubuntu 15.10
    Vim：版本详细信息如下
    谢谢！
    VIM – Vi IMproved 7.4 (2013 Aug 10, compiled Oct 21 2015 13:04:09)
    Included patches: 1-712
    Modified by pkg-vim-maintainers@lists.alioth.debian.org
    Compiled by buildd@
    Huge version without GUI. Features included (+) or not (-):
    +acl +farsi +mouse_netterm +syntax
    +arabic +file_in_path +mouse_sgr +tag_binary
    +autocmd +find_in_path -mouse_sysmouse +tag_old_static
    -balloon_eval +float +mouse_urxvt -tag_any_white
    -browse +folding +mouse_xterm -tcl
    ++builtin_terms -footer +multi_byte +terminfo
    +byte_offset +fork() +multi_lang +termresponse
    +cindent +gettext -mzscheme +textobjects
    -clientserver -hangul_input +netbeans_intg +title
    -clipboard +iconv +path_extra -toolbar
    +cmdline_compl +insert_expand -perl +user_commands
    +cmdline_hist +jumplist +persistent_undo +vertsplit
    +cmdline_info +keymap +postscript +virtualedit
    +comments +langmap +printer +visual
    +conceal +libcall +profile +visualextra
    +cryptv +linebreak +python +viminfo
    +cscope +lispindent -python3 +vreplace
    +cursorbind +listcmds +quickfix +wildignore
    +cursorshape +localmap +reltime +wildmenu
    +dialog_con -lua +rightleft +windows
    +diff +menu -ruby +writebackup
    +digraphs +mksession +scrollbind -X11
    -dnd +modify_fname +signs -xfontset
    -ebcdic +mouse +smartindent -xim
    +emacs_tags -mouseshape -sniff -xsmp
    +eval +mouse_dec +startuptime -xterm_clipboard
    +ex_extra +mouse_gpm +statusline -xterm_save
    +extra_search -mouse_jsbterm -sun_workshop -xpm
    system vimrc file: “$VIM/vimrc”
    user vimrc file: “$HOME/.vimrc”
    2nd user vimrc file: “~/.vim/vimrc”
    user exrc file: “$HOME/.exrc”
    fall-back for $VIM: “/usr/share/vim”
    Compilation: gcc -c -I. -Iproto -DHAVE_CONFIG_H -g -O2 -fPIE -fstack-protector-strong -Wformat -Werror=format-security -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=1
    Linking: gcc -Wl,-Bsymbolic-functions -fPIE -pie -Wl,-z,relro -Wl,-z,now -Wl,–as-needed -o vim -lm -ltinfo -lnsl -lselinux -lacl -lattr -lgpm -ldl -L/usr/lib/python2.7/config-x86_64-linux-gnu -lpython2.7 -lpthread -ldl -lutil -lm -Xlinker -export-dynamic -Wl,-O1 -Wl,-Bsymbolic-functions

    Reply

      1. @Mike Tang：多谢回复！
        恩恩，当网页的字到底了，它不会自动同步滚动。
        vim写一行，得手动下拉网页，不然看不到最新的一行

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.