Codeblocks
Using codeblocks in MDX
Code Blocks
Basic usage is the same as in markdown files.
const foo = 'bar';Examples
Terminal/shell
Authenticate with client credentials
curl --location 'https://id.trimble.com/oauth/token' \--header 'Content-Type: application/x-www-form-urlencoded' \--header 'Authorization: Basic OWNlM2Mz...jNkMjU5MTEx' \--data-urlencode 'grant_type=client_credentials' \--data-urlencode 'scope=8047e2cb-0000-0000-0000-bed4638a0dd5-your-application'CSS
:root[data-theme="light"] { color-scheme: light; --color-base: var(--color-base-light); --color-base-alt: var(--color-base-alt-light); --color-text-base: var(--color-text-base-light); --color-heading: var(--color-heading-light); --color-text-heading: var(--color-text-heading-light); --color-list-highlight: var(--color-list-highlight-light); --color-warning: var(--color-warning-light); --color-danger: var(--color-danger-light); --color-success: var(--color-success-light); --color-message-primary-text: var(--color-message-primary-text-light); --color-message-primary-base: var(--color-message-primary-base-light); --color-message-secondary-text: var(--color-message-secondary-text-light); --color-message-secondary-base: var(--color-message-secondary-base-light); /* Code blocks theme */ --color-code-background: var(--color-code-background-light); --color-code-border: var(--color-code-border-light); --color-code-tab-bar-background: var(--color-code-background-light); --color-code-tab-border: var(--color-code-tab-border-light); --color-code-active-tab-border: var(--color-code-active-tab-border-light);
}Astro
<button data-confetti-button>Celebrate!</button>
<script> // Import npm modules. import confetti from 'canvas-confetti';
// Find our component DOM on the page. const buttons = document.querySelectorAll('[data-confetti-button]');
// Add event listeners to fire confetti when a button is clicked. buttons.forEach((button) => { button.addEventListener('click', () => confetti()); });</script>