Code Layout & Highlighting
Content
Code block container layout, copy buttons, and PrismJS syntax highlighting theme.
| Name | Description |
|---|---|
.stnd-code-block |
Styled code block container with copy button and inset shadows. |
.copy-button |
Floating copy action button inside code blocks. |
pre |
Preformatted code block with compact leading and hover transitions. |
.token.keyword |
Keywords and control-flow statements (--color-red). |
.token.string |
Quoted strings and attribute values (--color-green). |
.token.number |
Numeric literals and boolean values (--color-cyan). |
.token.function |
Function declarations and method invocations (--color-yellow). |
.token.property |
Object keys and CSS property names (--color-orange). |
.token.punctuation |
Brackets, parens, delimiters, and operators (--color-muted). |
.token.comment |
Code comments rendered in muted italic typography (--color-subtle). |
.language-* |
Per-language syntax overrides for YAML, Markdown, Shell/Bash, and Nunjucks. |
Standard code block with copy button
<div class="stnd-code-block">
<button class="copy-button">Copy</button>
<pre><code class="language-bash">npm install @stnd/core</code></pre>
</div>
Live
npm install @stnd/coreAll classes
CODE BLOCK CONTAINER
| Class | Declares |
|---|---|
.stnd-code-block |
position: relative |
.copy-button |
position: absolute |
.token.keyword, .token.module, .token.class-name |
color: var(--color-red) |
.token.string, .token.attr-value |
color: var(--color-green) |
.token.number, .token.boolean |
color: var(--color-cyan) |
.token.function, .token.tag, .token.builtin |
color: var(--color-yellow) |
.token.property, .token.attr-name, .token.selector |
color: var(--color-orange) |
.token.punctuation, .token.operator |
color: var(--color-muted) |
.token.comment |
color: var(--color-subtle) |
.token.tag > .token.punctuation |
color: var(--color-muted) |
.token.attr-name |
color: var(--color-orange) |
.token.doctype, .token.namespace |
color: var(--color-magenta) |
.token.generics |
color: var(--color-blue) |
.language-yaml .token.key |
color: var(--color-orange) |
.language-yaml .token.literal |
color: var(--color-cyan) |
.language-markdown .token.italic, .language-md .token.italic, .language-markdown .token.emphasis, .language-md .token.emphasis |
color: var(--color-italic) |
.language-markdown .token.bold, .language-md .token.bold, .language-markdown .token.strong, .language-md .token.strong |
color: var(--color-bold) |
.language-markdown .token.link, .language-md .token.link |
color: var(--color-blue) |
.language-markdown .token.url, .language-md .token.url |
color: var(--color-cyan) |
.language-markdown .token.heading, .language-md .token.heading, .language-markdown .token.title, .language-md .token.title |
color: var(--color-header) |
.language-markdown .token.code, .language-md .token.code, .language-markdown .token.codespan, .language-md .token.codespan |
color: var(--color-green) |
.language-markdown .token.list, .language-md .token.list |
color: var(--color-orange) |
.language-markdown .token.table, .language-md .token.table |
color: var(--color-blue) |
.language-bash .token.function |
color: var(--color-yellow) |
.language-bash .token.variable |
color: var(--color-cyan) |
.language-bash .token.builtin |
color: var(--color-red) |
.language-bash .token.string |
color: var(--color-green) |
.language-bash .token.parameter |
color: var(--color-orange) |
.language-sh .token.function, .language-shell .token.function |
color: var(--color-yellow) |
.language-sh .token.variable, .language-shell .token.variable |
color: var(--color-cyan) |
.language-sh .token.builtin, .language-shell .token.builtin |
color: var(--color-red) |
.language-nunjucks .token.tag, .language-njk .token.tag |
color: var(--color-yellow) |
.language-nunjucks .token.tag > .token.punctuation, .language-njk .token.tag > .token.punctuation |
color: var(--color-muted) |
.language-nunjucks .token.attr-name, .language-njk .token.attr-name |
color: var(--color-orange) |
.language-nunjucks .token.attr-value, .language-njk .token.attr-value |
color: var(--color-green) |
.language-nunjucks .token.variable, .language-njk .token.variable |
color: var(--color-cyan) |
.language-nunjucks .token.expression, .language-njk .token.expression |
color: var(--color-cyan) |
.language-nunjucks .token.filter, .language-njk .token.filter |
color: var(--color-orange) |