Below will let the font of the matching tag turn to white:

set showmatch
hi MatchParen ctermfg=white guifg=white

How to change the colors of the matching tags of HTML?

It'd be nice to know the default config values. Plus I was surprised to find out that there seem to be more config values available than are listed in the README. I discovered this with intellisense suggesting values.

How do I enable this? Thank you

I have an issue with the completion of some closing tags and file paths. For example, if I try to complete </em> or </center>, an extra </ at the end; also, hitting tab to complete does not work, I need to move the cursor down and use Enter. The same thing happens with </center> and other tags. When I try to complete file paths, the new path component is often added on top of the / separator.

I have recorded a quick screencast to show the issue. I have several other plugins installed, but I have tried leaving CoC only, and the behavior is the same. I can't find anything else in my config files that could interfere either.

Hi,
I’m trying to register custom elements tags. My naive approach was to create coc-settings.json in projects root folder with this content

{
    "html.experimental.custom.tags": [
        "build/source/core/docs/globalComponents.json"
    ]
}

…so my root folder looks like:

build/
coc-settings.json
…

I have also tried to add this in ~/.vim/coc-settings.json and different path formats (full path, …). But, nothing seems to work.

tech. specs.:

• os: ubuntu
• nodejs: v17.0.1
• globalComponents.json.txt: .txt is just because of github upload limitations. It is created by web-component-analyzer - npm

Hi, how configure cic-html options ? There is documentation about that ?

Hi. I've succesfully installed coc-snippets, which I use for my freemarker templates:

After that, I've installed coc-html and configured it to use in my templates:

let g:coc_filetype_map = {
\ 'freemarker': 'html',
\ }

But that has overridden my snippets, only html autocompletion is now active:

Am I missing some other configuration to have both autocomplete suggestions?
Thank you.

for example index.html.twig.

I don't kown how to set html config in coc-settings.json

I notice jquery ts.d is included, I CocInstall coc-install and put the below to coc-settings:

    "html.format.enable": true,
    "html.validate.scripts": true,
    "html.validate.styles": true,
    "html.autoClosingTags": true,

However when I edit a html or js file I don't see jquery autocomplete, e.g. $("li"). will have nothing shown on dropdown list after pressing TAB. I did not see any jQuery autocomplete(i.e. jQuery keywords) either.

Setting the filetype to blade removes all syntax highlighting.

I get the following message for every single line I type in a HTML file when coc-html is installed:

[coc.nvim]: UnhandledRejection: TypeError: Cannot destructure property 'start' of 'range' as it is undefined.

Doing CocDisable doesn't help, but if I uninstall coc-html the error goes away.

• package manager: Lazy
• coc.nvim branch: release
• coc.nvim commit: bbaa1d5
• coc-html version: 1.8.0
• coc-html commit: 70299db

init.vim:
Same configuration for CoC as suggested here:
https://github.com/neoclide/coc.nvim#example-lua-configuration

coc-settings:

{
  "diagnostic.errorSign": "✗",
  "diagnostic.warningSign": "⚠",
  "diagnostic.hintSign": "‼",
  "python.linting.pylintEnabled": true,
  "python.linting.pycodestyleEnabled": true,
  "colors.filetypes": [
    "*"
  ],
  "clangd.path": "~/.local/share/nvim/coc-clangd-data/install/15.0.1/clangd_15.0.1/bin/clangd"
}

neovim version:

$ nvim --version
NVIM v0.8.3
Build type: RelWithDebInfo
LuaJIT 2.1.0-beta3
Compilation: /usr/bin/gcc -O2 -flto=auto -ffat-lto-objects -fexceptions -g -grecord-gcc-switches -pipe -Wall -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -Wp,-D_GLIBCXX_ASSERTIONS -specs=/usr/lib/rpm/redhat/redhat-hardened-cc1 -fstack-protector-strong -specs=/usr/lib/rpm/redhat/redhat-annobin-cc1 -m64 -mtune=generic -fasynchronous-unwind-tables -fstack-clash-protection -fcf-protection -DNVIM_TS_HAS_SET_MATCH_LIMIT -DNVIM_TS_HAS_SET_ALLOCATOR -O2 -g -Og -g -Wall -Wextra -pedantic -Wno-unused-parameter -Wstrict-prototypes -std=gnu99 -Wshadow -Wconversion -Wdouble-promotion -Wmissing-noreturn -Wmissing-format-attribute -Wmissing-prototypes -Wimplicit-fallthrough -Wvla -fstack-protector-strong -fno-common -fdiagnostics-color=auto -DINCLUDE_GENERATED_DECLARATIONS -D_GNU_SOURCE -DNVIM_MSGPACK_HAS_FLOAT32 -DNVIM_UNIBI_HAS_VAR_FROM -DMIN_LOG_LEVEL=3 -I/builddir/build/BUILD/neovim-0.8.3/redhat-linux-build/cmake.config -I/builddir/build/BUILD/neovim-0.8.3/src -I/usr/include -I/usr/include/luajit-2.1 -I/builddir/build/BUILD/neovim-0.8.3/redhat-linux-build/src/nvim/auto -I/builddir/build/BUILD/neovim-0.8.3/redhat-linux-build/include
Compiled by mockbuild@koji

Features: +acl +iconv +tui
See ":help feature-compile"

   system vimrc file: "$VIM/sysinit.vim"
  fall-back for $VIM: "/usr/share/nvim"

Run :checkhealth for more info

Disable to render fully when there are too many numbers in a line.

I couldn't find an option to configure the indent (to 2 spaces), am I missing something or is that not supported? If not supported yet, I think that would be a great addition:)

Same as VSCode, you may want to disable them.

I'm not getting any syntax highlighting for HTML files.

I don't know if this is how it should be and haven't found any information about it, but I was expecting it to be like tsserver does for React files - is there any to make the syntax highlighting look more like that?

HTML:

React:

I have tried to install coc-html. in each attempt it failed and nvim stopped suddenly
OS : termux / aarch 64 / Ram 4

mac really high temperature when use this plugin

_{Sent from PPHub}

Using latest ccls(from brew), latest Nvim/ latest coc.

I want to treat .xm files as objc. (sorry the syntax is a little weird)
Here is my CocConfig : { "languageserver": { "ccls": { "command": "ccls", "filetypes": ["c", "cc", "cpp", "c++", "objc", "objcpp"], "rootPatterns": [".ccls", "compile_commands.json", ".git/", ".hg/"], "initializationOptions": { "cache": { "directory": "/tmp/ccls" } } } } }

this is what I have done In my init.vim

autocmd BufNewFile,BufRead *.xm set filetype=objc

let g:coc_filetype_map = { \ 'xm': 'objc', \ }

what happens if I edit .xm file, Nvim detects that the file is objc and gives me color highlighting and stuff but on the bottom it says source languageserver.ccls timeout after 5000ms

ccls works fine for regular c family extensions such as .cpp

Related: #4, #5

I would like the coc-html ipc to be started on .html files with filetype=htmldjango.

Expected:

  "html.filetypes": [
    "htmldjango",
    "html"
  ],

would start coc-html on files with filetype = html or htmldjango

Currently:
Only files with filetype=html are started.

let g:coc_filetype_map = {
  \ 'htmldjango': 'html',
  \ }

is not a proper fix, because formatting an htmldjango file will ignore django template tags and format as if it was a regular html file.

Other plugins, like coc-tailwindcss, behave nicely.
I couldn't figure out how coc plugins are getting started based on the filetype, so do not know a proper fix for this issue.

I added the Vim-Jinja2-Syntax plugin which dynamically sets ft to jinja.html for templated HTML files.

I also added "html.filetypes": ["html", "jinja.html"] to my coc-settings.json, but the coc-html plugin is not enabled when opening a foo.html file with ft=jinja.html.

Hi bro
How can I format the html document !!?
Are there any formatting settings when saving?

Completion marks are too difficult to use in php.

我安装它希望能在html文件里编辑javascript的canvas，于是我安装了coc-html，但没有显示相应的语法补全，是我少配置的什么还是本身不支持？

I was trying to use the coc-html plugin with an xhtml file and it didn't work for me, I tried to add "xhtml" to the html.filetype variable in cocConfig, but nothing at all.

When I press tab wrong text comes out like below.

Reproduce steps:

1. run nvim
2. open index.html
3. split window and open css file (:vsp)
4. input any css tag and tab like this:
   background-col[TAB] to complete property name than wrong text comes out.

It's hard to say why but it does not occurs if I didn't slipt the window.

:version
NVIM v0.4.3
Build type: Release
LuaJIT 2.0.5
Compilation: /usr/local/Homebrew/Library/Homebrew/shims/mac/super/clang -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=1 -DNDEBUG -DMIN_LOG_LEVEL=3 -Wall -Wextra -pedantic -Wno-unused-param
eter -Wstrict-prototypes -std=gnu99 -Wshadow -Wconversion -Wmissing-prototypes -Wimplicit-fallthrough -Wvla -fstack-protector-strong -fdiagnostics-color=auto -DINCLUDE_GENERATED_
DECLARATIONS -D_GNU_SOURCE -DNVIM_MSGPACK_HAS_FLOAT32 -DNVIM_UNIBI_HAS_VAR_FROM -I/tmp/neovim-20191107-85913-1wbgqz6/neovim-0.4.3/build/config -I/tmp/neovim-20191107-85913-1wbgqz
6/neovim-0.4.3/src -I/usr/local/include -I/tmp/neovim-20191107-85913-1wbgqz6/neovim-0.4.3/deps-build/include -I/usr/local/opt/gettext/include -I/Applications/Xcode.app/Contents/D
eveloper/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.15.sdk/usr/include -I/tmp/neovim-20191107-85913-1wbgqz6/neovim-0.4.3/build/src/nvim/auto -I/tmp/neovim-20191107-85913-1
wbgqz6/neovim-0.4.3/build/include
Compiled by [email protected]

Features: +acl +iconv +tui
See ":help feature-compile"

system vimrc file: "$VIM/sysinit.vim"
fall-back for $VIM: "/usr/local/Cellar/neovim/0.4.3/share/nvim"

Run :checkhealth for more info

Good work! If I'm not wrong, coc-html implicitly runs Tidy on the buffer, giving error and warning hints for the current buffer content.

I often use Tidy to auto-format my HTML code with

tidy -m /path/to/my.html

Is there a way to pass -m to Tidy so that my buffer gets auto-formatted on every buffer write? Thanks.

Update

Achieved this with neomake by adding:

let g:neomake_html_enabled_makers = ['tidy']
let g:neomake_html_tidy_maker = { 'args': ['-modify'] }

to my neovim configuration. But this, together with coc-html, will run Tidy twice, right? Doesn't sound optimal to me.

As follows (| being the cursor):

Before:
<div>|</div>

After pressing CR:
<div>
|</div>

But expected:
<div>
    |
</div>

Description

I'm using coc-html + coc-prettier.

There is a blade template in the Laravel (PHP Web Framework).

The blade template is similar to the "Django HTML" template.

Currently, I use coc-html by mapping to html with g:coc_filetype_map as follows.

let g:coc_filetype_map = {
  \ 'blade': 'html',
  \ }

However, I don't want to use coc-prettier in the blade template, but the prettier works in this setting.

So I created a "PR" to officially support the blade file type in coc-html.

Since htmldjango has already been added, we would like to add blade as well.

PR

#20

Misc

I use vim-blade for file type support in the blade template.

https://github.com/jwalton512/vim-blade

Notes

If everything is OK, please update the version of package.json and "publish to npm" after the merge.

Often when writing html files with templates I'd like to complete snippets starting with {% or {{. Is it possible to enable this in CoC?

For example in Django templates I want to trigger {% to expand into {% url "some-url" %}

Thank for making this extension.

I tried the formatter and it works great but it stopped working after adding htmltidy as a coc-diagnostic linter.

Would it be possible to have both working at the same time? Or maybe coc-html should provide a linter instead of having to set it "manually" using coc-diagnostic.

Is there a way to specify where my stylesheets are located and have coc-html complete the CSS classes from my stylesheets while writing HTML?

Hello, I would like to install this extension but it doesn't work. The report says;

coc-html (via vscode-html-languageservice) supports Handlebars templates, e.g. this formats as expected:

{{ extends "index.html" }}

{{ block body }}
<div>hello world</div>
{{ endblock body }}

But when using Django-like templating by replacing {{ and }} with {% and %}, the formatter can't handle that:

{% extends "index.html" %} {% block body %}
<div>hello world</div>
{% endblock body %}

However, looking at the vscode-html-languageservice source code it appears that Django templating is supported as well.

Is there a way to make this work with coc-html?

In vscode typing div triggers autocomplete(emmet abbrevation) pressing enter will produce <div></div>. I can't seem to reproduce this autocomplete tags. Wondering it would be possible with coc-html ?

Hi, thanks for plugin.
I can't understand, why settings from coc-settings.json don't work.

  "html.format.wrapLineLength": 400,
  "html.completion.attributeDefaultValue": "singlequotes"

Wrap line by default has 120 symbols, but i want more, 400.
But settings don't work.

Thanks.

When closing an HTML tag, selecting the option from the list populates it, but removes the opening "<" character

Running :CocInstall coc-html doesn't do anything. I see no linting, autocompletion, etc. Plugin is enabled in :CocList and :CocInfo shows no errors. This happens for one out of every two plugins I try to install unfortunately.

:CocInstall coc-html fails with the following error:

2020-07-18T21:50:49.159 INFO (pid:134951) [model-download] - Download completed: https://registry.npmjs.org/coc-html/-/coc-html-1.2.4.tgz
2020-07-18T21:50:49.161 INFO (pid:134951) [model-download] - Downloaded https://registry.npmjs.org/coc-html/-/coc-html-1.2.4.tgz => /tmp/coc-html-S5Iu9x
2020-07-18T21:50:49.262 INFO (pid:134951) [model-installer] - Extension download at /tmp/coc-html-S5Iu9x 
2020-07-18T21:50:49.264 INFO (pid:134951) [model-installer] - Installing dependencies by: /usr/bin/yarn install --ignore-scripts --no-lockfile --production. 
2020-07-18T21:50:49.490 INFO (pid:134951) [model-installer] - Usage: yarn [options]

yarn: error: no such option: --ignore-scripts

I tried cloning the repo and checking out tag 1.2.4 and then running yarn (0.32+git) manually with the same result.

Running just yarn in the coc-html directory fails with
00h00m00s 0/0: : ERROR: There are no scenarios; must have at least one.

whenever an attribute suggestion pops up then i select it , the output becomes in the following form attributeName=""[cursor here] instead of attributeName="[cursor here]"

I've use :CocList extensions to see if the coc-html was enable and it looks like that (I use Neovim)

Please help

@chemzqm Thanks merge! #20

I want to install with :CocInstall coc-html.
Please update the version of package.json and "publish to npm"

Hey guys, sorry if this is a dumb question but I can't for the life of me figure out what is causing me to get this error. I get this error as soon as I attempt to close a tag. Here is my :CocInfo output

2021-12-31T14:01:58.324 INFO (pid:5959) [attach] - receive notification: highlight []
2021-12-31T14:02:01.184 INFO (pid:5959) [services] - registered service "html"
2021-12-31T14:02:01.185 INFO (pid:5959) [services] - HTML language server state change: stopped => starting
2021-12-31T14:02:01.485 INFO (pid:5959) [services] - HTML language server state change: starting => running
2021-12-31T14:02:01.492 INFO (pid:5959) [services] - service html started
2021-12-31T14:02:03.305 INFO (pid:5959) [attach] - Request action: doKeymap [ 'iPA==0' ]
2021-12-31T14:02:03.308 WARN (pid:5959) [handler-format] - Format on type provider not found for buffer: file:///Users/claycoffman/Dev/personal/learning/html/test.html
2021-12-31T14:02:03.329 INFO (pid:5959) [completion-complete] - Results from: html
2021-12-31T14:02:04.182 INFO (pid:5959) [attach] - receive notification: stopCompletion []
2021-12-31T14:02:04.183 INFO (pid:5959) [attach] - Request action: doKeymap [ 'iPg==0' ]
2021-12-31T14:02:04.185 WARN (pid:5959) [handler-format] - Format on type provider not found for buffer: file:///Users/claycoffman/Dev/personal/learning/html/test.html
2021-12-31T14:02:04.491 ERROR (pid:5959) [server] - unhandledRejection  Promise {
  <rejected> mg [Error]: Unhandled method html/tag
      at Kl (/Users/claycoffman/.local/share/nvim/plugged/coc.nvim/build/index.js:37:224)
      at tm (/Users/claycoffman/.local/share/nvim/plugged/coc.nvim/build/index.js:36:11261)
      at Immediate.<anonymous> (/Users/claycoffman/.local/share/nvim/plugged/coc.nvim/build/index.js:36:11111)
      at processImmediate (internal/timers.js:464:21) {
    code: -32601,
    data: undefined
  }
} mg [Error]: Unhandled method html/tag
    at Kl (/Users/claycoffman/.local/share/nvim/plugged/coc.nvim/build/index.js:37:224)
    at tm (/Users/claycoffman/.local/share/nvim/plugged/coc.nvim/build/index.js:36:11261)
    at Immediate.<anonymous> (/Users/claycoffman/.local/share/nvim/plugged/coc.nvim/build/index.js:36:11111)
    at processImmediate (internal/timers.js:464:21) {
  code: -32601,
  data: undefined
}```

I am trying to use coc-prettier to prettify html files, when I enable coc-html it pops up this error.

[coc.nvim]: ConnectionError: Connection is disposed.
    at throwIfClosedOrDisposed (/home/tony/.vim/plugged/coc.nvim/build/index.js:17398:19)
    at Object.sendNotification (/home/tony/.vim/plugged/coc.nvim/build/index.js:17445:13)
    at /home/tony/.vim/plugged/coc.nvim/build/index.js:17572:32
    at CallbackList.invoke (/home/tony/.vim/plugged/coc.nvim/build/index.js:18265:39)
    at Emitter.fire (/home/tony/.vim/plugged/coc.nvim/build/index.js:18324:36)
    at MutableToken.cancel (/home/tony/.vim/plugged/coc.nvim/build/index.js:18582:31)
    at CancellationTokenSource.cancel (/home/tony/.vim/plugged/coc.nvim/build/index.js:18623:25)
    at Highlighter.cancel (/home/tony/.vim/plugged/coc.nvim/build/index.js:96071:30)
    at Highlighter.doHighlight (/home/tony/.vim/plugged/coc.nvim/build/index.js:95974:18)
    at Highlighter.<anonymous> (/home/tony/.vim/plugged/coc.nvim/build/index.js:95955:18)
    at Timeout.later [as _onTimeout] (/home/tony/.vim/plugged/coc.nvim/build/index.js:22043:23)
    at listOnTimeout (internal/timers.js:549:17)
    at processTimers (internal/timers.js:492:7) {
  code: 2
}

The language server in the editor doesn't work, :CocNext doesn't find any error,
:CocCommand prettier.formatFile doesn't format anything and no messagges it is shown.

I tried to fix and reload coc-html and coc-prettier.

List of plugins

coc-prettier 1.1.20 ~/.config/coc/extensions/node_modules/coc-prettier                                                                                                                                                               
  * coc-lists 1.3.16 ~/.config/coc/extensions/node_modules/coc-lists
  * coc-html 1.3.1 ~/.config/coc/extensions/node_modules/coc-html
  * coc-git 2.0.5 ~/.config/coc/extensions/node_modules/coc-git
  * coc-eslint 1.3.2 ~/.config/coc/extensions/node_modules/coc-eslint
  + coc-tsserver 1.6.3 ~/.config/coc/extensions/node_modules/coc-tsserver
  + coc-markdownlint 1.9.0 ~/.config/coc/extensions/node_modules/coc-markdownlint
  + coc-json 1.3.2 ~/.config/coc/extensions/node_modules/coc-json
  + coc-clangd 0.6.0 ~/.config/coc/extensions/node_modules/coc-clangd

:CocInfo

## versions

vim version: NVIM v0.4.4
node version: v12.18.1
coc.nvim version: 0.0.79-f2afd214ba
coc.nvim directory: /home/tony/.vim/plugged/coc.nvim
term: xterm-256color
platform: linux

## Log of coc.nvim

2020-12-13T11:14:27.444 INFO (pid:17933) [services] - registered service "eslint"
2020-12-13T11:14:27.511 INFO (pid:17933) [services] - registered service "html"
2020-12-13T11:14:27.512 INFO (pid:17933) [services] - HTML language server state change: stopped => starting
2020-12-13T11:14:27.723 INFO (pid:17933) [language-client-index] - html started with 17950
2020-12-13T11:14:27.781 INFO (pid:17933) [plugin] - coc.nvim 0.0.79-f2afd214ba initialized with node: v12.18.1 after 500ms
2020-12-13T11:14:28.185 INFO (pid:17933) [services] - HTML language server state change: starting => running
2020-12-13T11:14:28.198 INFO (pid:17933) [services] - service html started
2020-12-13T11:17:36.243 INFO (pid:17933) [services] - HTML language server state change: running => stopped
2020-12-13T11:17:44.228 WARN (pid:17933) [events] - Handler of InputChar blocked more than 2s: Error
    at Events.on (/home/tony/.vim/plugged/coc.nvim/build/index.js:16589:25)
    at ListManager.init (/home/tony/.vim/plugged/coc.nvim/build/index.js:83816:26)
    at Plugin.init (/home/tony/.vim/plugged/coc.nvim/build/index.js:23986:31)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async /home/tony/.vim/plugged/coc.nvim/build/index.js:11641:13
2020-12-13T11:17:44.496 INFO (pid:17933) [services] - registered service "html"
2020-12-13T11:17:44.496 INFO (pid:17933) [services] - HTML language server state change: stopped => starting
2020-12-13T11:17:44.503 INFO (pid:17933) [language-client-index] - html started with 18202
2020-12-13T11:17:44.912 INFO (pid:17933) [services] - HTML language server state change: starting => running
2020-12-13T11:17:44.918 INFO (pid:17933) [services] - service html started
2020-12-13T11:22:14.210 WARN (pid:17933) [events] - Handler of InputChar blocked more than 2s: Error
    at Events.on (/home/tony/.vim/plugged/coc.nvim/build/index.js:16589:25)
    at ListManager.init (/home/tony/.vim/plugged/coc.nvim/build/index.js:83816:26)
    at Plugin.init (/home/tony/.vim/plugged/coc.nvim/build/index.js:23986:31)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async /home/tony/.vim/plugged/coc.nvim/build/index.js:11641:13

像vscode的插件HTML CSS Support提示css类。
或者有其他实现这个功能的插件吗？

How can i configure this to work with lit-element?

Code example:

import { LitElement, html, css, svg } from 'lit-element';

class ExampleComponent extends LitElement {
  static get styles() {
    return css`
      p {
        color: green;
      }
    `;
  }
  
  render() {
    return html`
      <p>This is example of html markup and svg</p>
      ${svg`
        <svg height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />  
        </svg> 
      `}
    `;
  }
}
window.customElements.define('example-component', ExampleComponent);

Documentation with more examples:
https://lit-element.polymer-project.org/guide/templates

You have written to configure coc-html..
like this..

Configuration options
html.enable set to false to disable html language server.
html.trace.server set trace level of LSP traffic.
html.execArgv add execArgv to child_process.spawn
html.filetypes default [ "html", "handlebars", "htmldjango" ].
html.format.enable enable format support.
html.validate.scripts validate for embedded scripts.
html.validate.styles validate for embedded styles.
html.autoClosingTags Enable/disable autoClosing of HTML tags.
Trigger completion in coc-settings.json for complete list.

But didn't told how should i open configuration options?

As the title says, coc-html auto tag completion interferes with coc-pairs auto <> completion.
coc-html autocompletes a tag when it is closed with >, as such:
<h1>
coc-html autocompletes
<h1></h1>

When the > is entered, it auto completes.
The problem is, coc-pairs auto completes < to <>. This means that this would happen:
<
coc-pairs autocompletes
<>
<h1>

There is no autocompletion from coc-html since the > was technically never entered. To get the auto completion, you would have to delete the closing > and then add it again, and in that time I could probably just enter the closing </h1> myself. Is there a work around to this?