☰

色とCSSを使用したvim

tag-icon • tag-icon vim css
色とCSSを使用したvim

UbuntuでWeb開発のためにvimを使い始めました。解像度を設定するときにメディアクエリCSSを使用すると、視覚的な問題が発生します。

ヴィム

ご覧のとおり、最初のメディア画面は正常に動作していますが、2 番目の画面は動作していません。

これを修正して最初の CSS メディアクエリのように見えるようにする方法はありますか?

答え1

HTML5 および CSS3 メディア クエリに私が使用しているものは次のとおりです。

まずフォルダを作成します: mkdir -p ~/.vim/after/syntax/css

次に、 vi .vim/after/syntax/html.vim以下を編集します。

" Vim syntax file
" Language: HTML (version 5)
" Maintainer: Rodrigo Machado <[email protected]>
" URL: http://rm.blog.br/vim/syntax/html.vim
" Last Change: 2009 Aug 19
" License: Public domain
" (but let me know if you liked it :) )
"
" Note: This file just adds the new tags from HTML 5
" and don't replace default html.vim syntax file

" HTML 5 tags
syn keyword htmlTagName contained article aside audio bb canvas command datagrid
syn keyword htmlTagName contained datalist details dialog embed figure footer
syn keyword htmlTagName contained header hgroup keygen mark meter nav output
syn keyword htmlTagName contained progress time ruby rt rp section time video

" HTML 5 arguments
syn keyword htmlArg contained autofocus placeholder min max step
syn keyword htmlArg contained contenteditable contextmenu draggable hidden item
syn keyword htmlArg contained itemprop list subject spellcheck
" this doesn't work because default syntax file alredy define a 'data' attribute
syn match htmlArg "\<\(data-[\-a-zA-Z0-9_]\+\)=" contained

syn include @htmlCss syntax/css/css3-mediaqueries.vim

そして vi.vim/after/syntax/css/css3-mediaqueries.vimで次のように入力します:

syn region cssMediaType start='(' end=')' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape nextgroup=cssMediaComma,cssMediaAnd,cssMediaBlock skipwhite skipnl
syn match cssMediaAnd "and" nextgroup=cssMediaType skipwhite skipnl
syn clear cssMediaBlock
syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssSelectorOp,cssAttributeSelector,cssIdentifier,cssError,cssDefinition,cssPseudoClass,cssComment,cssUnicodeEscape,cssClassName,cssURL

関連情報