chrome/browser/resources/extensions/code_section.html

    <style include="cr-hidden-style">
      :host {
        --container-bg: white;
        --line-bg: var(--paper-grey-300);
        --main-color: var(--paper-grey-800);
        display: block;
      }

      @media (prefers-color-scheme: dark) {
        :host {
          --container-bg: rgba(0, 0, 0, .4);
          --line-bg: var(--google-grey-800);
          --main-color: var(--cr-primary-text-color);
        }
      }

      #scroll-container {
        background: var(--container-bg);
        height: 100%;
        overflow: auto;
        position: relative;
      }

      @media (prefers-color-scheme: light) {
        #scroll-container {
          border: 1px solid var(--paper-grey-500);
        }
      }

      #main {
        color: var(--main-color);
        display: flex;
        font-family: monospace;
        min-height: 100%;
      }

      #line-numbers {
        background: var(--line-bg);
        display: flex;
        flex-direction: column;
        padding: 0 8px;
        text-align: end;
      }

      @media (prefers-color-scheme: light) {
        #line-numbers {
          border-inline-end: 1px solid var(--paper-grey-500);
        }
      }

      #source {
        display: flex;
        flex-direction: column;
        margin-inline-start: 4px;
      }

      #line-numbers span,
      #source span {
        white-space: pre;
      }

      #no-code {
        text-align: center;
      }

      @media (prefers-color-scheme: light) {
        #no-code {
          color: var(--paper-grey-800);
        }

        .more-code {
          color: var(--paper-grey-500);
        }
      }

      #highlight-description {
        height: 0;
        overflow: hidden;
      }

      @media (prefers-color-scheme: dark) {
        mark {
          background-color: var(--google-yellow-refresh-300);
          color: var(--google-grey-900);
        }
      }
    </style>
    <div id="scroll-container" hidden="[[!highlighted_]]" dir="ltr">
      <div id="main">
        <!-- Line numbers are not useful to a screenreader -->
        <div id="line-numbers" aria-hidden="true">
          <div class="more-code before" hidden="[[!truncatedBefore_]]">
            ...
          </div>
          <span>[[lineNumbers_]]</span>
          <div class="more-code after" hidden="[[!truncatedAfter_]]">
            ...
          </div>
        </div>
        <div id="source">
          <div class="more-code before" hidden="[[!truncatedBefore_]]">
            [[getLinesNotShownLabel_(
                truncatedBefore_,
                '$i18nPolymer{errorLinesNotShownSingular}',
                '$i18nPolymer{errorLinesNotShownPlural}')]]
          </div>
          <span><!-- Whitespace is preserved in this span. Ignore new lines.
            --><span>[[before_]]</span><!--
            --><mark aria-label$="[[highlighted_]]"
                aria-describedby="highlight-description"><!--
              --><span aria-hidden="true">[[highlighted_]]</span><!--
            --></mark><!--
            --><span>[[after_]]</span><!--
          --></span>
          <div class="more-code after" hidden="[[!truncatedAfter_]]">
            [[getLinesNotShownLabel_(
                truncatedAfter_,
                '$i18nPolymer{errorLinesNotShownSingular}',
                '$i18nPolymer{errorLinesNotShownPlural}')]]
          </div>
        </div>
      </div>
    </div>
    <div id="no-code" hidden="[[!showNoCode_]]">[[couldNotDisplayCode]]</div>
    <div id="highlight-description" aria-hidden="true">
      [[highlightDescription_]]
    </div>