@fylgja/code

    1.0.1 • Public • Published

    Fylgja - Code

    NPM version license

    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 and other options as plain CSS
    @import "@fylgja/code/code.css";

    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;

    Install

    npm i @fylgja/code

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    5.24 kB

    Total Files

    6

    Last publish

    Collaborators

    • grimlink