Typography typographyhighlightneon

Neon Highlight

Custom text highlight with a glowing neon border effect.

Neon Highlight

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/NeonHighlight.astro and paste the following code:

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>

Quick Info

Category
Typography
Filename
NeonHighlight.astro
Dependencies
None — pure Astro + CSS
Tags
typographyhighlightneon