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

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

Inline Code (Glass)

Строчный фрагмент кода с полупрозрачным фоном, рамкой и моноширинным шрифтом.

Inline Code (Glass)

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

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

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

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

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

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

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>

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

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