Pre

<div>
    <pre><code>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid earum autem magni voluptatem laboriosam, sit velit fugit qui molestiae, cumque, vel labore distinctio ullam nisi tempora harum laborum inventore!
</code></pre>
</div>

<style>
    div {
        padding: 1px;
    }
</style>
<div>
  <pre><code>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid earum autem magni voluptatem laboriosam, sit velit fugit qui molestiae, cumque, vel labore distinctio ullam nisi tempora harum laborum inventore!
</code></pre>
</div>

<style>
  div {
    padding:1px;
  }
</style>
/* No context defined. */
  • Content:
    :root {
        /* spacing y for input, 27 is min, 35 is max */
        --spacing-pre-y: calc(((27 / 16) * 1rem) + (35 - 27) * var(--fluid-bp));
    
        /* spacing x for input,  15 is min, 42 is max */
        --spacing-pre-x: calc(((15 / 16) * 1rem) + (42 - 15) * var(--fluid-bp));
    }
    
    pre {
        background-color: lightgrey;
        background-color: var(--background-dark);
        color: black;
        color: var(--text);
        overflow-x: auto;
        border-radius: var(--radius-sm);
        scrollbar-color: var(--accent) var(--background-dark);
        padding: 27px 15px 54px 15px;
        padding: var(--spacing-pre-y) var(--spacing-pre-x);
        margin: 0;
        line-height: 1;
    }
    
    [theme="light"] pre {
        scrollbar-color: var(--background) var(--accent);
    }
    
    pre code {
        font-size: 0.85em;
    }
    
  • URL: /components/raw/pre/pre.demo.css
  • Filesystem Path: src/components/inline-elements/pre/pre.demo.css
  • Size: 759 Bytes

No notes defined.