hugo-geekblog/src/sass/_chroma_base.scss

@mixin chroma_base {
  .chroma {
    color: var(--code-font-color);
  }
  .chroma .lntable td:nth-child(2) code .hl {
    width: auto;
    margin-left: -0.5em;
    padding: 0 0.5em;
  }

  .highlight {
    pre.chroma {
      width: 100%;
      overflow: auto;
      max-height: var(--code-max-height);
    }
  }

  /* LineTable */
  .chroma .lntable {
    border: $border-1 solid var(--code-accent-color);
    border-radius: $border-radius;
    border-spacing: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    display: block;
    max-height: var(--code-max-height);
    overflow: auto;

    pre.chroma {
      max-height: none;
      border-radius: 0;
      margin: 0;
    }
  }
  .chroma .lntable td:first-child {
    code {
      background-color: var(--code-accent-color-lite);
      border-right: $border-1 solid var(--code-accent-color);
      padding-left: 0;
      padding-right: 0;
      border-radius: 0;
    }
  }
  .chroma .lntable td:nth-child(2) {
    width: 100%;
    margin-left: $padding-32;
  }
}