Fylgja - Code
The Code component is a extension component on the base component.
This includes more styling to the <code>
, <pre>
and <kbd>
elements.
Installation
npm install @fylgja/code
Then include the component in to your code via;
@use "@fylgja/code";
// Or via PostCSS import
@import "@fylgja/code";
How to use
Out of the box all the styling is done directly, no extra steps are needed.
For a more complete code syntax highlighting in <pre>
element,
use a frameworks like
Prims,
highlight
or shiki instead,
or combine it with @fylgja/code
.
Config
As with almost all of our components, CSS variables can be configured to add your own look/style.
Want direct control on the base styles,
Here are the following SCSS variables can you modify.
$family-code: (
SFMono-Regular,
Consolas,
"Liberation Mono",
Menlo,
monospace
) !default;
$code-padding: 0 0.15em !default;
$code-radius: 0.2rem !default;
$code-border: 1px solid rgba(0, 0, 0, 0.05) !default;
$code-bg: #eee !default;
$code-color: #111 !default;
$pre-margin: 1em 0 !default;
$pre-padding: 1rem !default;
$pre-radius: 0.2rem !default;
$pre-border: 1px solid rgba(0, 0, 0, 0.05) !default;
$pre-bg: #f2f2f2 !default;
$pre-color: #111 !default;
$pre-font-size: 0.875em !default;
$pre-tab-index: 4 !default;
$key-radius: 0.3em !default;
$key-border: 1px solid currentcolor !default;
$key-shadow: inset 0 -1px 0 currentcolor !default;
$key-padding: 0.1em 0.25em !default;
$key-bg: null !default;
$key-fg: null !default;
$key-font-size: 0.875em !default;