src/astro/styles/_code.scss - master - githubmirror/30-seconds-of-code

src/astro/styles/_code.scss
289 строк9 KB
Angelos Chalaris
Hide folded section label when expanded
10 май 2025, 09:59
10 май 2025, 09:591f91cb3
:is(pre, code, kbd) {
  // Setup Roboto Mono as the default font.
  font-family: 'Roboto Mono', Menlo, Consolas, monospace;

  // Set a default font size (customized to code elements).
  font-size: var(--font-sm);

  * {
    // Inherit the font family for nested elements.
    font-family: inherit;
  }

  // Give code elements a background color.
  background: var(--color-code-background);
  // Squeeze the code blocks a bit to fit neatly inside the layout.
  // Note: This value is a little odd, but it makse sure that the code blocks
  // fit just right.
  letter-spacing: -0.205px;
}

code,
kbd {
  // Render box fragments independently.
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-small);
}

// Do not apply inside of headings, in order to preserve regular styling.
:not(:is(h1, h2, h3, h4)) > a > code {
  // Remove bottom border radius and padding when code inside a link.
  padding-block-end: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

:is(h1, h2, h3, h4) code {
  // Dynamically size code elements inside headings.
  // The ratio roughly corresponds to the 18px/16px ratio inside regular text.
  font-size: 0.875em;
  // Apply the correct bold font weight.
  font-weight: var(--font-weight-medium);
  // Increase inline padding to make code elements more visible.
  padding-inline: var(--spacing-4);
  // Reduce block padding to make code elements align perfectly with outlines.
  padding-block: 0;
}

pre {
  // Relative position pre elements to allow for absolute positioning of the
  // language label.
  position: relative;
  // The layout bleed is not applied to the inline padding, as individual lines
  // need to apply it themselves to work correctly with highlighting.
  padding: var(--spacing-12) 0;
  // Ensure long lines that can't wrap are responsive on mobile.
  overflow: auto;
  // Make sure long lines wrap, if opporrunities exist.
  white-space: pre-wrap;
  // Make sure no hypens are added to the code blocks.
  -webkit-hyphens: none;
  hyphens: none;
  // Set the tab-size to 2 spaces.
  tab-size: 2;
  // Set a tighter line height for code blocks.
  line-height: var(--line-height-normal);

  // Hide the horizontal scrollbar for code blocks. Note: This is not the best
  // or most accessible solution, but is the only one that looks right. Besides,
  // users can usually figure out that there is more content to the side.
  &::-webkit-scrollbar {
    display: none;
  }

  code {
    // Reset inherited styles.
    padding: 0;
    border-radius: 0;
    line-height: inherit;
    // Display as a flex element to fill the parent element and create a column
    // layout, so that children (lines) can span the entire width.
    display: flex;
    flex-direction: column;
  }

  &:has(> code) {
    // Apply the white color for code blocks.
    color: var(--color-code-highlight-white);
  }

  .line {
    // Fill the entire width of the parent element.
    display: block;
    // Make sure empty lines are displayed correctly.
    min-height: calc(var(--line-height-normal) * 1em);
    // Apply the layout bleed for the inline padding.
    padding-inline: var(--layout-bleed-width);
  }

  mark {
    // Reset inherited browser styles.
    color: inherit;
    --code-highlight_background-color: hsl(225, 46%, 22%);
    --code-highlight_label-background-color: hsl(225, 43%, 31%);
  }

  ins {
    // Reset inherited browser styles.
    text-decoration: none;
    // Set color palette and label text if none is provided.
    --code-highlight_background-color: hsl(163, 16%, 19%);
    --code-highlight_label-background-color: hsl(141, 19%, 25%);
    --code-highlight_label-text-color: hsl(140, 48%, 44%);
    --code-highlight_label-text-content: '+';
  }

  del {
    // Reset inherited browser styles.
    text-decoration: none;
    // Set color palette and label text if none is provided.
    --code-highlight_background-color: hsl(337, 13%, 19%);
    --code-highlight_label-background-color: hsl(348, 22%, 28%);
    --code-highlight_label-text-color: hsl(351, 53%, 61%);
    --code-highlight_label-text-content: '-';
  }

  mark,
  ins,
  del {
    // Highlighted lines are displayed with a different background color.
    background-color: var(--code-highlight_background-color);

    // Give the line a position to allow for absolute positioning of the label.
    position: relative;

    &::before {
      // Place the label in the top left corner and account for the padding.
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      padding-inline: var(--spacing-2);
    }

    &:not([data-highlight-label]) {
      &::before {
        // Display the label as a plus or minus sign, depending on the type.
        // `mark` elements lack the relevant variable, therefore they will not
        // render anything in this case.
        color: var(--code-highlight_label-text-color);
        font-weight: var(--font-weight-medium);
        content: var(--code-highlight_label-text-content);
      }
    }

    &[data-highlight-label] {
      &::before {
        // Add background to the label, depending on its type.
        background-color: var(--code-highlight_label-background-color);

        // Use the content font for the label, and reset letter spacing.
        font-family: 'Inter', Helvetica, sans-serif;
        font-size: var(--font-sm);
        letter-spacing: normal;

        // Display the label from the `data-highlight-label` attribute.
        content: attr(data-highlight-label);
      }
    }
  }

  details {
    summary {
      // Collapsed line lables are displayed with a different background color.
      background-color: hsl(225, 43%, 26%);
      // Make the content of the summary unselectable.
      user-select: none;
      // Restore default font styles.
      font: inherit;
      // Add padding to match the rest of the code block.
      padding-block: var(--spacing-2);
      padding-inline: var(--layout-bleed-width);
      // Add some space between the icon and the text.
      gap: var(--spacing-6);

      &::before {
        // Hide the default icon for the summary element.
        display: none;
      }

      &:is(:hover, :focus) {
        // Change the color on hover and focus.
        color: hsl(210, 17%, 95%);
      }
    }

    code {
      // Add a tiny bit of padding.
      padding-block: var(--spacing-2);
      // Collapsed lines are displayed with a different background color.
      background-color: hsl(225, 44%, 20%);
      // Counteract the default margin applied by the `details` element.
      margin-inline: 0;
    }

    &[open] summary {
      // Counteract the default margin applied by the `details` element.
      margin-block-end: 0;

      [data-path-id='arrow-up'] {
        // Rotate the arrow to point down.
        transform: rotate(180deg) translateY(-44%);
        transform-origin: 50% 0%;
      }

      [data-path-id='arrow-down'] {
        // Rotate the arrow to point up.
        transform: rotate(180deg) translateY(44%);
        transform-origin: 50% 100%;
      }

      span {
        // Hide the label when the details are open.
        opacity: 0;
      }
    }
  }
}

pre[data-code-language],
pre[data-code-title] {
  // Add some space above the code to fit the language label.
  padding-block-start: var(--spacing-24);

  &::before {
    // Place the label in the top left corner and account for the bleed width.
    position: absolute;
    display: block;
    top: var(--spacing-8);
    left: var(--layout-bleed-width);

    // Use the content font for the label, and make it bold.
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: var(--font-sm);
    font-weight: var(--font-weight-strong);

    // Display the label as serialized in the `data-code-language` attribute.
    content: attr(data-code-language);
  }
}

pre[data-code-language][data-code-title] {
  // If a title is present, and the language label is already present,
  // we can replace it.
  &::before {
    // Display both the language and the title.
    content: attr(data-code-title) ' (' attr(data-code-language) ')';
  }
}

pre:not(data-code-language)[data-code-title] {
  // If a title is present, but no language label is present, we can just
  // display the title.
  &::before {
    // Display the title.
    content: attr(data-code-title);
  }
}

// This selector is needed to override specificity of `main > article > pre`,
// which manipulates the `border-radius`.
main > article > pre {
  // Style consencutive code blocks by removing space and radius between them.
  &:has(+ pre) {
    // Remove bottom border radius from the first code block.
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  + pre {
    // Remove block-margin-start to counteract parent's `--layout-row-spacing`.
    margin-block-start: calc(-1 * var(--layout-row-spacing, 0));
    // Remove top border radius from the second code block.
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}