Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/farias-hecdin/CSSVarHighlight
📌 A plugin that will help you easily identify the colors defined in CSS variables
https://github.com/farias-hecdin/CSSVarHighlight
lua nvim-plugin
Last synced: about 1 month ago
JSON representation
📌 A plugin that will help you easily identify the colors defined in CSS variables
- Host: GitHub
- URL: https://github.com/farias-hecdin/CSSVarHighlight
- Owner: farias-hecdin
- License: mit
- Created: 2024-04-21T01:47:00.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-07T19:44:03.000Z (5 months ago)
- Last Synced: 2024-09-07T20:51:22.209Z (5 months ago)
- Topics: lua, nvim-plugin
- Language: Lua
- Homepage:
- Size: 24.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-neovim - farias-hecdin/CSSVarHighlight - Quickly highlight the color you defined in your CSS variables with the help of `mini.hipatterns`. (Programming Languages Support / Web Development)
README
> Translate this file into your native language using `Google Translate` or a [similar service](https://immersivetranslate.com).
# CSSVarHighlight
Este plugin para **Neovim** es una herramienta que te ayudará a identificar los colores definidos en las variables CSS de tus archivos de estilo. El plugin analizará una hoja de estilo específica, como `main.css` o `style.css`, que debe contener todas las variables CSS necesarias. Cuando el plugin detecta un color en una variable CSS, resalta su aparición, lo que facilita su visualización desde otros archivos.
## 🗒️ Requerimientos
* [`Neovim`](https://github.com/neovim/neovim): Versión 0.7 o superior.
* [`Mini.hipatterns`](https://github.com/echasnovski/mini.hipatterns): El resaltador de colores.
### Instalación
Usando [`folke/lazy.nvim`](https://github.com/folke/lazy.nvim):
```lua
{
'farias-hecdin/CSSVarHighlight',
ft = "css",
dependencies = {"echasnovski/mini.hipatterns"},
config = true,
-- If you want to configure some options, replace the previous line with:
-- config = function()
-- end,
}
```
Posteriormente, en la configuración del plugin `mini.hipatterns`:
```lua
local hipatterns = require("mini.hipatterns")
hipatterns.setup({
-- Your other settings...
highlighters = {
-- Your other settings...
css_variables = require("CSSVarHighlight").get_settings()
}
})
```
## 🗒️ Configuración
Estas son las opciones de configuración predeterminadas:
```lua
require('CSSVarHighlight').setup({
parent_search_limit = 5, -- Parent search limit (number of levels to search upwards).
filename_to_track = "main", -- Name of the file to track (e.g. "main" for main.css).
variable_pattern = "%-%-[-_%w]*color[-_%w]*", -- Pattern to search for variables containing "color".
initial_variable_color = "#000000", -- Initial color for variables (in hex format, e.g. "#000000" for black).
disable_keymaps = false, -- Indicates whether keymaps are disabled.
})
```
### Comandos y atajos de teclado
| Comandos | Atajos de teclado | Descripción |
| -------------------|------------------ | ----------------------------------- |
| `CSSVarHighlight` | `ch` | Activa el plugin y/o actualiza el resaltado de colores |
>[!NOTE]
> * Para actualizar los datos, debes guardar el archivo que contiene tus variables CSS.
> * Si deseas desactivar los atajos de teclado predeterminados, puedes establecer la opción `disable_keymaps` en `true`.
Puedes ampliar la búsqueda de archivos hacia un directorio específico o analizar otro archivo utilizando el comando `:CSSVarHighlight`.
Más información:
* Para buscar hacia arriba, utiliza la sintaxis `:CSSVarHighlight `, donde `` es el número de niveles que deseas buscar hacia arriba, comenzando desde el directorio actual, y `` es el nombre del archivo (sin incluir la extensión `*.css`). El plugin analizará cada nivel hasta encontrar el archivo deseado. Por ejemplo:
```sh
#-- Good
:CSSVarHighlight my_stylesheet 9
#-- Bad
:CSSVarHighlight my_stylesheet.css 9
:CSSVarHighlight "my_stylesheet.css" 9
```
* Para buscar en un directorio específico, utiliza la sintaxis `:CSSVarHighlight `, donde `` es la ruta del directorio en el que deseas realizar la búsqueda. Por ejemplo:
```sh
#-- Good
:CSSVarHighlight my_Stylesheet file/path/to/search
:CSSVarHighlight my_Stylesheet ../../file/path/to/search
#-- Bad
:CSSVarHighlight "my_Stylesheet" "file/path/to/search"
:CSSVarHighlight "my_Stylesheet" "file/path/to/search.css"
```
## 🛡️ Licencia
CSSVarHighlight está bajo la licencia MIT. Consulta el archivo `LICENSE` para obtener más información.