othree / html5.vim Goto Github PK

View Code? Open in Web Editor NEW

933.0 19.0 76.0 235 KB

HTML5 omnicomplete and syntax

Home Page: http://www.vim.org/scripts/script.php?script_id=3236

Makefile 7.21% Vim Script 92.79%

rdfa microdata vim html wai-aria syntax mathml svg

html5.vim's Introduction

html5.vim

HTML5 + inline SVG omnicomplete function, indent and syntax for Vim. Based on the default htmlcomplete.vim.

This plugin contributes to vim-polyglot language pack.

Feature

Support all new elements and attribute.
Support SVG and MathML
Support microdata.
Support RDFa.
Support WAI-ARIA.
Support Electron webview.

Install

Use Vundle or pathogen.vim is recommended.

For Vundle:

Plugin 'othree/html5.vim'

Configure

Disable event-handler attributes support:

let g:html5_event_handler_attributes_complete = 0

Disable RDFa attributes support:

let g:html5_rdfa_attributes_complete = 0

Disable microdata attributes support:

let g:html5_microdata_attributes_complete = 0

Disable WAI-ARIA attribute support:

let g:html5_aria_attributes_complete = 0

Change Log

Version 0.27

Support inline SVG

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

References

html5.vim's People

Contributors

Stargazers

Watchers

html5.vim's Issues

Please upstream this

This should really go in the Vim runtime; no reason why it should support HTML 4 only in a stock installation.

Vim 8.0 is coming, so now would be a really good time to do it.

Code folding support

I have foldmethod=syntax and it seems there is not code-folding support for html files?
Is this correct? perhaps I am missing something

Breaks Neobundle 'mustache/vim-mustache-handlebars' highlighting

It would break handlebars with NeoBundleLazy and NeoBundle. I tried it in various combinations (before, after each other, without NeoBundleLazy and its' options).

I fixed this by using othree/html5-syntax.vim by itself. tony/vim-config-framework@32bca9d

I can't make this work

Do i need to put something in ftdetect or in my vimrc ?

Activate html5.vim

Please help, I have a solarized theme and the html5.vim but I am not sure if they work well together or I just need to verify html5.vim is activated on my rc.

Is anyone else using solarized dark theme, could you verify if that breaks html5 color scheme somehow?

Please advice.

directions

Hi, how do I use this? I've installed with vundle and added the following line to my ~/.vimrc file: set omnifunc=syntaxcomplete#Complete " omnicompletion then in an html file typed:

se<ctrl+x><ctrl+o> and expected a menu or something. What am I doing wrong?

g:html_indent_tags conflicts with 'vim-ragtag' plugin

As othree requested here, I'm creating this as a separate issue to help track the problem.

It appears that vim-ragtag also uses 'g:html_indent_tags' and that creates a conflict when both plugins are installed - and the ragtag version expects a list.

My workaround was to modify the variable name -- you can see my changes here:

noahlh@44d4e9a

I didn't submit a pull request because I'm not sure this is the best solution - but it works for me.

Forgotten forks

Just found https://github.com/alswl/html5.vim/commit/54b11c07c7d71306d985e1a42f6faefeb845ee12 which seems like no-brainer, and noahlh@44d4e9a which I am not sure what to think about.

When "id" is the first attribute, dont get omnicompletions anymore!

if "id" is the first attribute on any element, we dont get any further omnicompletions on attributes of that element anymore. i.e : <c-x><c-o> in the following cursor position gives pattern not found!.

<div id="foo" |><\div>

<header>, <section> not indented

I can type this into a new x.html file. Note that

and

and their closing tags do not affect the indent level.

<!DOCTYPE html>
<html>
  <body>
    <header>
    <section>
    <div>
      <br>
    </div>
    </section>
    </header>
  </body>
</html>

xml/html5.vim should include proper xmlns values

The HTML5 DOCTYPE applies to XHTML as well now, so the xml/html5.vim file should provide basic support for xmlns. Right now it declares xmlns but gives it no value. It should give it the value 'http://www.w3.org/1999/xhtml'. I'd also like to add the basic namespaces for svg, xlink, and mathml, which are 'http://www.w3.org/2000/svg', 'http://www.w3.org/1999/xlink', and 'http://www.w3.org/1998/Math/MathML' respectively.

Handle lack of optional closing tags

Many common tags in HTML5, such as <p> and <li>, do not require a closing tag, but the current indent file cannot handle this case. For example,

<ul>
  <li>a
  <li>b
  <li>c

gets turned into

<ul>
  <li>a
    <li>b
      <li>c

Indentation of <pre> elements with class

Good work!
However, I noticed that the <pre> element was commented out, which stopped indentation from working in my demo pages.

All good. However, if I have a class attribute on the <pre> element it still breaks the functionality.

Ideas?

Best regards,
Robert

How to install with Vundle?

Readme says

Use Vundle or pathogen.vim is recommended.

But what do I put in my .vimrc?

I tried this:

Bundle "html5.vim"

But it doesn't seem to be working.

Tags not appearing in omnicomplete

I hate to be so vague in my title, but here's what I'm doing:

I'm running Vim with this command:

vim -Nu <(echo 'set rtp+=~/.vim/bundle/html5.vim/')

Then I'm doing :syntax on, :filetype plugin on, :set ft=html

Then I insert <artic, then type <C-x><C-o>, and I get "Pattern not found."

Same result for <asid, <heade, etc.

Am I doing something wrong?

Indent Global Variable Documentation

In the indent file there is a reference to 2 global variables:

" let g:html_indent_tags = 'html\|p\|time'
" let g:html_exclude_tags = ['html', 'style', 'script', 'body']

It's not documented anywhere what exactly they are used for, and looking through the source it wasn't clear either.

If you have a moment, could you provide some insight please?

"role" attribute

Am I missing something or this plugin doesn't cover the ARIA role attribute? I can't get any completion on this attribute...

completion of input type : coloe => color

Hi,

Completion of suggest "coloe" instead of "color" (autoload/xml/html5.vim)
Can you fix this ?

Thanks.

Breaks reindenting with Ctrl-F

In the file indent/html.vim the indentkeys setting is overwritten, which breaks the default Ctrl-F shortcut to reindent the current line, as well as plugins that expect this functionality such as ragtag (see tpope/vim-ragtag#32).

This can probably be changed to use += instead of =?

<source> doesn't indent properly

<source> elements force the element on the line below them to indent one tab further instead of maintaining the same level as the <source>.

Errors when opening SCSS (SASS) files.

I use this plugin alongside Tim Pope's HAML plugin (https://github.com/tpope/vim-haml) which also provides support for SASS & SCSS. Whenever I open SASS or SCSS files I get the following error:

"project/_base.scss" 17L, 582C
Error detected while processing /Users/rosstimson/code/dotfiles/.vim/bundle/haml/syntax/sass.vim:
line   16:
E409: Unknown group name: cssValue.*,cssColor,cssURL,sassDefault,cssImportant,cssError,cssStringQ,cssStringQQ,cs
sFunction,cssUnicodeEscape,cssRenderProp
E475: Invalid argument: cssValue.*,cssColor,cssURL,sassDefault,cssImportant,cssError,cssStringQ,cssStringQQ,cssF
unction,cssUnicodeEscape,cssRenderProp
E400: No cluster specified
E475: Invalid argument: sassCssAttributes contains=css.*Attr,scssComment,cssValue.*,cssColor,cssURL,sassDefault,
cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape,cssRenderProp

I at first thought it was a problem with haml.vim plugin but it works fine when this plugin is removed so it looks like the two conflict with each other. I'm guessing haml.vim expects to see certain group names that are present in the standard css.vim and this plugin is somehow interfering / overriding them.

Any ideas or anyone using the two together successfully?

Syntax for JavaScript file

<audio>, <video> , done
drag and drop , done
history , skip
storage
<form>
interactive elements
window object
<time>
<keygen>
WebStorage http://dev.w3.org/html5/webstorage/
WebWorkers http://dev.w3.org/html5/workers/
WebSockets http://dev.w3.org/html5/websockets/
TBC: XHR http://dev.w3.org/2006/webapi/XMLHttpRequest-2/

variables in html5.vim does not have 'html5_' prefix.

I (probably: and others) prefer to add 'html5_' to all global variables in html5.vim
For example,

let g:html5_event_handler_attributes_complete = 0
let g:html5_rdfa_attributes_complete = 0
let g:html5_microdata_attributes_complete = 0
let g:html5_aria_attributes_complete = 0

indentation incorrect for multiline `var`

The following is what is indented in vim. The lines after var is indented incorrectly. Is there an easy fix for this problem?

<!DOCTYPE html>
<html lang="en">
  <body>

    <script>

      var x,
      y;

f();

</script>
  </body>
</html>

Invalid path in installation instructions

curl http://github.com/othree/html5.vim/raw/master/syntax/html.vim > ~/.vim/syntax/html.vim
should be

curl http://github.com/othree/html5.vim/raw/master/syntax/html/html5.vim > ~/.vim/syntax/html.vim

Html indent doesn't work inside <script> tag

Hi.
Html indent doesn't work inside <script> tag. I use script tag for html template. I found that indent from this repo causes this issue. When I turned off html indent from this repo, indenting stated working as excepted.

Add <data> element

This is a new tag proposed by WhatWG, see http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-data-element

I'm using it for Microdata markup, to specify machine-readable representations of human-formatted values.

vimball only includes one file

The make vimball command only includes the first file from the file list. This can be fixed by changing :MkVimball in the Makefile to :%MkVimball.

Minimize breakage when iskeyword does not contain hyphen

HTML highlighting is used as the basis of a plethora of templating languages, for example PHP, eRuby, Haml, and Mustache, just to name a few off the top of my head. In many (most?) of these languages, - is not a valid identifier character, and putting it in 'iskeyword' significantly impairs the highlighting and functionality of the template file type. The problems it causes are difficult to work around, whereas the opposite problem (no - in 'iskeyword' in HTML) is straightforward to mitigate: just change lines like

syn keyword htmlArg contained aria-atomic aria-busy aria-controls aria-describedby

to be like

syn match htmlArg contained "\<aria-\%(atomic\|busy\|controls\|describedby\)\>"

So I'm asking if you're willing to make such changes, or accept a pull request that does so.

Note you can still put - in 'iskeyword' yourself; these other file types can remove it if they don't want it.

Asking specifically on behalf of tpope/vim-haml#59.

Omnicomplete not working with HTML5 specific tags

Vim has autoload/htmlcomplete.vim wich allows to use omnicomplete for HTML 4 tags, but when using HTML 5 tags like <article> <aside>, etc no omnicompletation available.

The plugin provides autoload/xml/html5.vim so the tags can be completed using just ctrl-p ctrl-n but its cumbersome to use omnicomplete for some tags and normal completation for others. Is it possible to include the HTML 5 specific tags within autoload/htmlcomplete.vim ?

I'm not aware if is there some technical reason for not doing so...
Regards.

Aligning attributes

When there are a little too much attributes in a tag, I always like to put them on a new line and have them aligned, like this:

<div class="container"
     id="mydiv"
     title="foo">

</div>

However, when I use = to reindent with this plugin, this is wat I get:

<div class="container"
    id="mydiv"
    title="foo">

</div>

The attributes don't get aligned with the attribute on the previous line, they just get indented instead.

I saw that the default html indent file already has a solution for this:
https://github.com/vim/vim/blob/master/runtime/indent/html.vim#L922-L942

unknown html tags not indented

Using a custom html tag breaks indentation.

For example:

<html>
    <body>

        <section
            id="some-id"
            class="some-class"></section>

        <custom-tag
            id="another-id"
            class="another-class"></custom-tag>

    </body>
</html>

Now gg=G will unindent the id & class attributes on custom-tag. The indentation is also initially wrong if you "open" custom-tag to edit inside.

I can see custom tag names like this becoming widespread as web components get more usage.

Packaging

The installation instructions do not match the docs or vim best practices.

closed, opened by mistake

Syntax highligting not working for custom single word html5 tags

Unfortunately this fix(#54) only solves the problem partially. It still not working for custom "single word" thml5 tags. Examples (see pagination, tabs, progressbar etc directives)
Could you please fix this issue.

rtc, rb tag support

Please support rtc, rb tag.
They are not highlighting.

vim74 unknow function: htmlcomplete#DetectOmniFlavor

Error Message:

Vim version

:script

Indent issue with last commit

Hello @othree,

Thank you for your plugin that I use for several years.

Since your last commit (6c1ac5d), I have issue with the indent.

With the last commit:

<dom-module id="my-component">
  <template>

    <paper-toolbar>
      </paper-toolbar>
  </template>
  <script src="my-component.js"></script>
  </dom-module>

Without:

<dom-module id="my-component">
  <template>

    <paper-toolbar>
    </paper-toolbar>
  </template>
  <script src="my-component.js"></script>
</dom-module>

It seems, Vim doesn't have a better indent ahah.

Maybe is an issue with my config ?

Vim version: 8.0.52.

Don't add "-" to iskeyword

Not sure about others, but I more often want to jump through dashes when pressing "w". This can be incredibly frustrating if there are long class names.

Won't work in erb file

Won't work in erb file.
Syntax is not work too.
It loads old html setting.

syntax highligting not working for custom html5 tag elements

color highlighting not working for custom tags like

Let vundle install html5.vim

Or if that is already possible, document it in the readme.

Thanks for the awesome plugin!

Indent specific markers

I am using reveal.js and would find it convenient to indent <session> markers automatically in vim. Any hint how to achieve that? Thanks!

Web Components

I saw that you started some Web Components work, so I figured I'd list all that would need to be supported.

Shadow DOM

<content>
- Attributes: select
<shadow>

HTML Imports

<link rel="import">

Custom Elements

<any-element-with-a-dash>
<button is="custom-button">

After the Aug 11 commit a7def46, indentation is wrong.

When I hit and html gets the auto-indent, now the auto-indent is wrong.

For example, in a typical Polymer html, import html at the beginning, the previous correct indentation

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../qs_info/qs-info.html">
<link rel="import" href="../qs_table/qs-table.html">
<link rel="import" href="../dual_table/dual-table.html">
<link rel="import" href="../save_button/save-button.html">

becomes

<link rel="import" href="../polymer/polymer.html">
  <link rel="import" href="../qs_info/qs-info.html">
    <link rel="import" href="../qs_table/qs-table.html">
      <link rel="import" href="../dual_table/dual-table.html">
        <link rel="import" href="../save_button/save-button.html">

Another example is

<br>
<br>

now becomes

<br>
  <br>

Add more flexible custom tag naming

Currently, the regex for htmlTagName requires a custom tag to have a dash - in it. This is not necessary since custom tags can be written without a dash.

A good regex match would allow for removal of all htmlTagName literals and instead allow the regex to do the work.

No indentation or highlighting for Javascript micro templates

html5.vim does currently not support micro templates. Those html based templates are typically inside <script type="text/html" id="my-tpl"> or <script type="text/template" id="my-tpl">. It would be a nice feature.

Conditional comment blocks get indented inconveniently

Example, from the HTML5 boilerplate:

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
<head>

When I re-indent it with gg=G, it ends up looking like this:

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
    <!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
        <!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
            <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
                <head>

This makes logical sense (since technically <html> is declared 4 times), but is not ideal. I propose a flag to ignore indents on lines starting with a comment (or bonus points if it's specific to conditional comments).

Vim has a default html indentation. html5 doesn't load by default

On OSX, vim 7.3 loads with a default HTML indentation. HTML5 checks abort(silently) if there's already an HTML indentation rule.

Should it overrides the old html lindentation by default or at least warn the user the indentation was not loaded?

https://github.com/othree/html5.vim/blob/master/indent/html.vim#L27

Indention breaks with restore_view.vim

For whatever reason, indention doesn't work if I have this plugin and restore_view.vim active at the same time.