Typography typographycodeglass

Inline Code (Glass)

Translucent inline code snippet for technical documentation.

Inline Code (Glass)

Usage

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

astro 
---
import { InlineCode(Glass) } from 'astro-component-kit';
---

<CodeInlineGlass>Content</CodeInlineGlass>
--- import { InlineCode(Glass) } from 'astro-component-kit'; --- <CodeInlineGlass>Content</CodeInlineGlass>

Manual Installation

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

astro 
---
---
<code class="glass-code"><slot /></code>
<style>
  .glass-code { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 0.2rem 0.4rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #e2e8f0; font-size: 0.9em; }
</style>
--- --- <code class="glass-code"><slot /></code> <style> .glass-code { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 0.2rem 0.4rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #e2e8f0; font-size: 0.9em; } </style>

Quick Info

Category
Typography
Filename
InlineCode(Glass).astro
Dependencies
None — pure Astro + CSS
Tags
typographycodeglass