Code

Usage #

You can show the pre-formatted code in the pre tag without the class.

Function.prototype.inherits = function(parent) {
    for (var key in parent.prototype) {
        this.prototype[key] = parent.prototype[key];
    }
};

Function.prototype.inherits = function(parent) {
    for (var key in parent.prototype) {
        this.prototype[key] = parent.prototype[key];
    }
};

<pre>...</pre>
<pre><code>...</code></pre>

But it is better to specify the code class for pre, this will allow you to use the module modifiers if necessary.

Function.prototype.inherits = function(parent) {
    for (var key in parent.prototype) {
        this.prototype[key] = parent.prototype[key];
    }
};

<pre class="code">...</pre>

Use the code-light modifier on the dark backgrounds.

Function.prototype.inherits = function(parent) {
    for (var key in parent.prototype) {
        this.prototype[key] = parent.prototype[key];
    }
};

<pre class="code code-light">...</pre>

Extend #

You can override the code module variables in your CSS/SCSS:

.code {
    --code-background-color: transparent;
    --code-padding: 0;
}

The code now has no background and padding.

Function.prototype.inherits = function(parent) {
    for (var key in parent.prototype) {
        this.prototype[key] = parent.prototype[key];
    }
};

<pre class="code">...</pre>

You can create your own variants of the code by simply creating modifiers and manipulating variables in CSS/SCSS:

.code-small {
    --code-font-size: 12px;
}

Use a new code-small modifier in HTML:

Function.prototype.inherits = function(parent) {
    for (var key in parent.prototype) {
        this.prototype[key] = parent.prototype[key];
    }
};

<pre class="code code-small">...</pre>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.

// colors
--code-background-color: var(--palette-neutral-lightest);
--code-color: var(--text-default);
--code-border-color: transparent;

// params
--code-font-size: 14px;
--code-font-family: var(--font-mono);
--code-line-height: 1.5;
--code-padding: 4rem;
--code-border-radius: var(--radius-base);
--code-border-width: 1px;
--code-border-style: solid;