1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографика typographyhighlightneon

Neon Highlight

Яркий маркерный акцент на тексте с неоновым свечением ключевых слов.

Neon Highlight

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { NeonHighlight } from 'astro-component-kit';
---

<NeonTextHighlight>Content</NeonTextHighlight>
--- import { NeonHighlight } from 'astro-component-kit'; --- <NeonTextHighlight>Content</NeonTextHighlight>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/NeonHighlight.astro:

astro 
---
---
<span class="neon-hi"><slot /></span>
<style>
  .neon-hi { color: #fff; background: rgba(99,102,241,0.2); padding: 0.1em 0.3em; border-radius: 4px; box-shadow: 0 0 10px rgba(99,102,241,0.3); border: 1px solid rgba(99,102,241,0.4); }
</style>
--- --- <span class="neon-hi"><slot /></span> <style> .neon-hi { color: #fff; background: rgba(99,102,241,0.2); padding: 0.1em 0.3em; border-radius: 4px; box-shadow: 0 0 10px rgba(99,102,241,0.3); border: 1px solid rgba(99,102,241,0.4); } </style>

Краткая информация

Категория
Типографика
Имя файла
NeonHighlight.astro
Зависимости
Нет — чистый Astro + CSS
Теги
typographyhighlightneon