mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Bartek
6f3529f948
Adds .code-block: a dark surface around a pre with an optional header (title and language), a copy button that uses the Clipboard plugin, line numbers, highlighted lines and a max height variant. Ships with the CodeBlock shared component, a demo page, a docs page with the class reference, menu entries and a screenshot page.
18 lines
586 B
Plaintext
18 lines
586 B
Plaintext
---
|
|
// Code block on its own, no card: a header with a copy button, line numbers and highlighted lines.
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import CodeBlock from '@ui/CodeBlock.astro'
|
|
|
|
const code = `import { Clipboard } from '@tabler/core'
|
|
|
|
const button = document.querySelector('#share')
|
|
|
|
Clipboard.getOrCreateInstance(button, {
|
|
text: window.location.href,
|
|
}).copy()`
|
|
---
|
|
|
|
<ScreenshotLayout title="Code block" columns={2}>
|
|
<CodeBlock code={code} title="share.js" language="JavaScript" numbered highlight={[5, 6, 7]} class="mb-0" />
|
|
</ScreenshotLayout>
|