Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Jezda1337/nvim-html-css
CSS Intellisense for HTML
https://github.com/Jezda1337/nvim-html-css
html-css-intellisense neovim neovim-plugin nvim nvim-cmp
Last synced: 14 days ago
JSON representation
CSS Intellisense for HTML
- Host: GitHub
- URL: https://github.com/Jezda1337/nvim-html-css
- Owner: Jezda1337
- Created: 2023-06-08T16:38:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-19T08:37:11.000Z (3 months ago)
- Last Synced: 2024-08-19T10:12:52.260Z (3 months ago)
- Topics: html-css-intellisense, neovim, neovim-plugin, nvim, nvim-cmp
- Language: Lua
- Homepage:
- Size: 78.1 KB
- Stars: 116
- Watchers: 3
- Forks: 13
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ☕ Neovim HTML, CSS Support
## 🚧 plugin is in dev mod 🚧
Neovim CSS Intellisense for HTML
#### HTML `id` and `class` attribute completion for Neovim.
## ✨ Features
- HTML `id` and `class` attribute completion.
- Supports `linked` and `embedded` style sheets.
- Supports additional `style sheets`.
## ⚡ Required dependencies
- [plenary.nvim](https://github.com/nvim-lua/plenary.nvim)
- [sharkdp/fd](https://github.com/sharkdp/fd) (finder)
## 📦 Installation
##### ⚠️ Currently, the plugin only works in projects that contain a .git folder, in case your project is not initialized using git, you can create a .git folder to use the plugin, this is only temporary.
##### ⚠️ In case your tree-sitter is lazy loaded, you must also lazy load the html-css plugin in the same way as the tree-sitter. Another way is to add dependencies as in the example below.
## Lazy
```lua
return require("lazy").setup({
{
"hrsh7th/nvim-cmp",
opts = {
sources = {
-- other sources
{
name = "html-css",
option = {
-- your configuration here
},
},
},
},
},
{ "Jezda1337/nvim-html-css",
dependencies = {
"nvim-treesitter/nvim-treesitter",
"nvim-lua/plenary.nvim"
},
config = function()
require("html-css"):setup()
end
}
})
```
## ⚙ Configuration
```lua
option = {
max_count = {}, -- not ready yet
enable_on = {
"html"
...
}, -- set the file types you want the plugin to work on
file_extensions = { "css", "sass", "less" }, -- set the local filetypes from which you want to derive classes
style_sheets = {
-- example of remote styles, only css no js for now
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css",
}
}
```
#### 🔌 Option spec
explanation and types for options.
| Property | Type | Description |
| :-------------- | :---: | :-------------------------------------------------------------------------------------------------------------- |
| enable_on | table | Table accepts strings, one string one extension in which the plugin will be available |
| file_extensions | table | Table accepts strings, extensions that you enter, classes that will be available to you will be read from them. |
| style_sheets | table | External cdn css styles such as bootstrap or bulma. The link must be valid. Can be minified version or normal. |
## 🤩 Pretty Menu Items
Setting the formatter this way you will get the file name with an extension in
your cmp menu, so you know from which file that class coming.
```lua
require("cmp").setup({
sources = {
{
name = "html-css"
},
},
formatting = {
format = function(entry, vim_item)
if entry.source.name == "html-css" then
vim_item.menu = entry.completion_item.menu
end
return vim_item
end
}
})
```