Làm thế nào để cập nhật Vim thành mã màu các phần tử html mới

Question

Tôi tự hỏi làm thế nào tôi có thể thiết lập vim để tô màu các phần tử html5 mới (tức là "canvas" và "video") như nó có với "script" hiện tại, "body "các phần tử (hoặc các từ dành riêng trong các ngôn ngữ khác như" def "của python) vv Phiên bản hiện tại là từ MacPorts thường được sử dụng trong trình giả lập thiết bị đầu cuối.

Answer 1

html.vim là tệp cú pháp Vim tư vấn để xác định thẻ nào sẽ được tô màu. Vị trí của điều này sẽ phụ thuộc vào cài đặt Vim của bạn. Trong tệp cú pháp này, bạn sẽ thấy nhiều dòng trông giống như sau:

" new html 4.0 tags 
syn keyword htmlTagName contained abbr acronym bdo button col label 
syn keyword htmlTagName contained colgroup del fieldset iframe ins legend 
syn keyword htmlTagName contained object optgroup q s tbody tfoot thead 

Những dòng này xác định từ khóa cú pháp. Trong trường hợp này, họ xác định cụ thể các tên thẻ HTML. Dòng đầu tiên yêu cầu Vim tô màu cho các thẻ abbr, acronym, bdo, button, col và label. Bạn có thể nói với Vim để tô màu thêm thẻ với cú pháp sau:

" new html 5 tags 
syn keyword htmlTagName contained video canvas 

Vim bây giờ sẽ tô màu video và canvas thẻ và bất kỳ từ khóa bổ sung mà bạn thêm.

Tuy nhiên, nếu bạn cập nhật được xây dựng trong html.vim nó sẽ bị ghi đè vào lần tiếp theo bạn cập nhật Vim, vì vậy thực hành tốt nhất là nối thêm các quy tắc của bạn với các quy tắc tích hợp này. Để thực hiện việc này, hãy tạo đường dẫn thư mục after/syntax trong thư mục .vim của bạn và đặt html.vim trong đó.

Có một số lượng lớn các yếu tố và đối số HTML 5 trong số này gist được đề cập bởi @ user240515 bên dưới. Dán nội dung của mục này vào mục mới tạo của bạn html.vim.

Tham khảo :help html.vim để biết thêm thông tin.

Answer 2

Cảm ơn câu hỏi này và cảm ơn câu trả lời được chấp nhận! Đây là một danh sách đầy đủ các thẻ mới để thêm cho html 5, khi chúng được quy định tại thời điểm viết:

" new html 5 tags 
syn keyword htmlTagName contained article aside audio canvas command datalist 
syn keyword htmlTagName contained details embed figcaption figure footer header 
syn keyword htmlTagName contained hgroup keygen mark meter nav output progress 
syn keyword htmlTagName contained rp rt ruby section source summary time video 

Answer 3

Chỉ cần đặt các tập tin sau đây trong ~/.vim/cú pháp:

http://gist.github.com/390929

Answer 4

tôi chỉ muốn thử cái này:

http://github.com/othree/html5.vim

vẻ khá hoàn chỉnh.

EDIT: Tôi không thấy bất kỳ điều gì về thụt lề. :(

EDIT [2012/12/23]: Tôi làm :) Nhưng có lẽ là đã được bổ sung sau: https://github.com/othree/html5.vim/tree/master/indent

Answer 5

lõm có thể được hỗ trợ bằng một cách tiếp cận tương tự như mô tả bởi michaelmichael cho việc mở rộng tập tin html.vim cú pháp . Nếu bạn chưa có html.vim trong ~/.vim/indent, bạn có thể tạo nó với nội dung được tìm thấy here.Trong ~/.vim/indent/html.vim bạn sẽ thấy một tập hợp các chức năng cuộc gọi lắp ráp một danh sách tên phần tử HTML trông giống như sau:

" [-- <ELEMENT ? - - ...> --] 
call <SID>HtmlIndentPush('a') 
call <SID>HtmlIndentPush('abbr') 
call <SID>HtmlIndentPush('acronym') 
call <SID>HtmlIndentPush('address') 
" ...and many more... 

Những dòng này được xác định các thẻ sẽ kích hoạt thẻ indenting cơ bản. Mở rộng danh sách này với bất kỳ thẻ HTML5 nào mà bạn muốn kích hoạt thụt lề. Tôi đã thêm phần sau vào cuối danh sách này:

" New HTML 5 elements 
call<SID>HtmlIndentPush('table') 
call<SID>HtmlIndentPush('article') 
call<SID>HtmlIndentPush('aside') 
call<SID>HtmlIndentPush('audio') 
call<SID>HtmlIndentPush('canvas') 
call<SID>HtmlIndentPush('command') 
call<SID>HtmlIndentPush('datalist') 
call<SID>HtmlIndentPush('details') 
call<SID>HtmlIndentPush('embed') 
call<SID>HtmlIndentPush('figcaption') 
call<SID>HtmlIndentPush('figure') 
call<SID>HtmlIndentPush('footer') 
call<SID>HtmlIndentPush('header') 
call<SID>HtmlIndentPush('hgroup') 
call<SID>HtmlIndentPush('keygen') 
call<SID>HtmlIndentPush('mark') 
call<SID>HtmlIndentPush('meter') 
call<SID>HtmlIndentPush('nav') 
call<SID>HtmlIndentPush('output') 
call<SID>HtmlIndentPush('progress') 
call<SID>HtmlIndentPush('rp') 
call<SID>HtmlIndentPush('rt') 
call<SID>HtmlIndentPush('ruby') 
call<SID>HtmlIndentPush('section') 
call<SID>HtmlIndentPush('source') 
call<SID>HtmlIndentPush('summary') 
call<SID>HtmlIndentPush('time') 
call<SID>HtmlIndentPush('video') 

Thụt lề bây giờ sẽ được kích hoạt trên thẻ HTML5 được liệt kê ở trên.

Answer 6

Tôi đã thêm tệp thụt lề html5 vào ngã ba của othree/html5.vim dựa trên các đề xuất ở trên.

Xem http://github.com/briangershon/html5.vim

Answer 7

File syntax/html.vim mà đi kèm với vim (8,0) là rất lỗi thời. Một cách hay để cập nhật cú pháp của bạn là sử dụng một plugin được duy trì tốt như vim-polygot được cập nhật nhiều hơn. Đó là html.vim syntax hỗ trợ, canvas, video, section và main (các câu trả lời khác không hỗ trợ), để đặt tên một vài.