chrome/browser/resources/md_extensions/code_section.html

<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<dom-module id="extensions-code-section">
  <template>
    <style>
      [hidden] {
        display: none !important;
      }

      #main {
        border: 1px solid var(--paper-grey-500);
        color: var(--paper-grey-800);
        display: flex;
        font-family: monospace;
        white-space: pre;
      }

      #line-numbers {
        background: var(--paper-grey-300);
        border-right: 1px solid var(--paper-grey-500);
        display: flex;
        padding: 0 8px;
        text-align: right;
      }

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

      .highlight {
        background: var(--paper-red-100);
      }

      #no-code {
        color: var(--paper-grey-800);
        text-align: center;
      }
    </style>
    <div id="main" hidden$="[[isMainHidden_(code)]]">
      <div id="line-numbers">
        <span>[[computeLineNumbersContent_(code.*)]]</span>
      </div>
      <div id="source">
        <span>[[code.beforeHighlight]]<!-- No whitespace allowed
       --><span class="highlight" title="[[code.message]]"><!--
         -->[[code.highlight]]<!--
     --></span>[[code.afterHighlight]]</span>
      </div>
    </div>
    <div id="no-code" hidden$="[[!isMainHidden_(code)]]">[[noCodeError]]</div>
  </template>
  <script src="chrome://extensions/code_section.js"></script>
</dom-module>