42 lines
1.3 KiB
Plaintext
42 lines
1.3 KiB
Plaintext
---
|
|
interface Props {
|
|
code: string;
|
|
language?: string;
|
|
class?: string;
|
|
}
|
|
|
|
const { code, language = 'bash', class: className = '' } = Astro.props;
|
|
|
|
// Simple syntax highlighting classes
|
|
const languageColors: Record<string, string> = {
|
|
bash: 'text-[var(--primary)]',
|
|
javascript: 'text-[#f7df1e]',
|
|
typescript: 'text-[#3178c6]',
|
|
python: 'text-[#3776ab]',
|
|
rust: 'text-[#dea584]',
|
|
go: 'text-[#00add8]',
|
|
html: 'text-[#e34c26]',
|
|
css: 'text-[#264de4]',
|
|
json: 'text-[var(--secondary)]',
|
|
};
|
|
|
|
const langColor = languageColors[language] || 'text-[var(--text)]';
|
|
---
|
|
|
|
<div class={`rounded-lg overflow-hidden bg-[var(--code-bg)] border border-[var(--border-color)] ${className}`}>
|
|
<!-- Code header -->
|
|
<div class="flex items-center justify-between px-3 py-2 border-b border-[var(--border-color)] bg-[var(--header-bg)]">
|
|
<span class="text-xs text-[var(--text-secondary)] font-mono uppercase">{language}</span>
|
|
<button
|
|
class="text-xs text-[var(--text-tertiary)] hover:text-[var(--primary)] transition-colors"
|
|
onclick={`navigator.clipboard.writeText(\`${code.replace(/\\/g, '\\\\').replace(/`/g, '\\`')}\`)`}
|
|
>
|
|
<i class="fas fa-copy mr-1"></i>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Code content -->
|
|
<pre class="p-3 overflow-x-auto"><code class={`font-mono text-sm ${langColor} whitespace-pre`}>{code}</code></pre>
|
|
</div>
|