Better CSS Syntax for Vim


Ⅰ. 插件描述

CSS3 syntax (and syntax defined in some foreign specifications) support for Vim's built-in syntax/css.vim

Ⅱ. 基本信息

创建日期:  2010-08-26
使用用户:  3586
Github星:  514
插件作者:  Chris Yip

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:
Plugin 'hail2u/better-css-syntax-for-vim'
… 然后在Vim中运行以下命令:
:source %
:PluginInstall

对于Vundle版本 < 0.10.2,请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:
NeoBundle 'hail2u/better-css-syntax-for-vim'
… 然后在Vim中运行以下命令:
:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:
Plug 'hail2u/better-css-syntax-for-vim'
… 然后在Vim中运行以下命令:
:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:
cd ~/.vim/bundle
git clone https://github.com/hail2u/vim-css3-syntax

Ⅳ. 文档说明

vim-css3-syntax

CSS3 syntax (and syntax defined in some foreign specifications) support for
Vim’s built-in syntax/css.vim

INSTALLATION

I strongly recommend to install this plugin on *Vim 8.1 or higher with
default runtime files*.

Vim package

$ mkdir -p ~/.vim/pack/css3-syntax/start
$ cd ~/.vim/pack/css3-syntax/start
$ git clone https://github.com/hail2u/vim-css3-syntax.git

pathogen.vim

$ cd ~/.vim/bundle
$ git clone https://github.com/hail2u/vim-css3-syntax.git

Manual

Download vim-css3-syntax.tar.gz from GitHub, extract it, and copy the contents
to your ~/.vim directory.

NOTES

Highlighting problems on: vertical-align, box-shadow, and others

Some properties do not highlight correctly by default. This is a limitation of
Vim’s highlight priority mechanism. To fix this problems, put following lines
in your ~/.vim/after/css.vim:

setlocal iskeyword+=-

Or in your ~/.vimrc:

augroup VimCSS3Syntax
  autocmd!

  autocmd FileType css setlocal iskeyword+=-
augroup END

This setting have side effects. So, use it at your own risk.

Vendor Prefixes

I do not plan to support CSS3 properties (or functions) with vendor prefixes,
such as -webkit- or -moz-, etc. These are hard to maintain because they are:

  • Added frequently
  • Changed unexpectedly
  • Removed silently

These must be supported by separate syntax plugins (Vim 7.4’s default CSS
syntax file supports this). If you want to highlight prefixed properties or
functions manually, :highlight and :match would help:

:highlight VendorPrefix guifg=#00ffff gui=bold
:match VendorPrefix /-\(moz\|webkit\|o\|ms\)-[a-zA-Z-]\+/

These commands highlight vendor prefixed properties and functions instantly with
cyan and bold (on gVim).

Media Queries

I drop Media Queries Level 3 support in v0.12.0. There is no easy way to support
Media Queries properly with after syntax plugin like this one, sorry. If you
want to highlight Media Queries correctly, you must update Vim to 8.0+.

AUTHOR

Kyo Nagashima <hail2u@gmail.com> (https://kyonagashima.com/)

LICENSE

MIT License

添加新评论