代码预览并语法高亮、增加行号

代码查看

一般是左侧目录树加上右侧代码类容，选择文件展示文件的文本类容，并根据文本格式对内容进行格式化显示。

使用的技术

1. highlight.js 版本：11.8.0
2. highlightjs-line-numbers.js 版本： 2.8.0

highlight.js 会自动将文章中的

代码进行分割识别语言并且高亮。
highlightjs-line-numbers.js 可以为代码添加行号

高亮代码

Highlight.js 核心库中支持 180 多种语言。还有第三方语言定义可用于支持更多语言，在我们日常使用时足够了，如果为了能更轻量化可以去官网进行包含语言类型定制化。

highlight.js 使用的常用方式一般有三种：

1、自动检测，这将查找并格式化显示标签中的代码 <pre><code>，它将试图自动检测语言类型并格式化。

const hljs = require("highlight.js");
hljs.highlightAll();

2、手动指定语言，highlight.js 自动识别模式不能 100%识别出代码所属的开发语言，识别错误会导致高亮样式是别的语言的，这种情况下可以手动设置一个 class 来精准控制：

<pre>
  <code class="language-javascript">...</code>
</pre>

3、自定义格式化，如果需要对 Highlight.js 的初始化进行更多控制，则可以使用 highlightElement 并配置函数。这可以更好地控制要格式化显示的内容和时机。这里大致相当于调用 highlightAll，但手动执行工作：

document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelectorAll("pre code").forEach((el) => {
    hljs.highlightElement(el);
  });
});

官方强烈建议对代码块用<pre><code>标签包装。它具有鲜明的语义性，并且无需任何修改即可开箱即用。但是也提供了使用其他 HTML 元素(或组合)的能力，但可能需要特别注意保留换行符。

如使用的代码元素：

<div class="code">...</div>

格式化：

// first, find all the div.code blocks
document.querySelectorAll("div.code").forEach((el) => {
  // then highlight each
  hljs.highlightElement(el);
});

添加行号

官网提供了详尽的使用文档，有更多代码高亮的控制，但不足的就是 highlight.js 没有显示行号的支持，需要通过再引入一个库 (highlightjs-line-numbers.js) 或者自行实现。

1、自定义添加行号

原理：highlight.js 将代码格式化以后，可以通过样式设定代码行高，然后计算代码总高度，再用总高度/行高 = 行数，最后生成行号。为什么不把每一行代码放入一个元素呢，因为 highlight.js 格式化后的代码是 span 标签字符组合，也不是使用一个元素包裹一行的，是通过类控制换行。如果需要将一行代码装入一个元素中，需要去了解 highlight.js 中的规则。

代码实现：

import { useEffect, useState, useRef } from "react";
import { FileDoneOutlined } from "@ant-design/icons";
import styles from "./index.module.scss";
const hljs = require("highlight.js");

const CodeView = ({ fileContent, fileName, fileSize }) => {
  const [lineNumbersLenth, setLineNumbersLenth] = useState(0);
  const codeRef = useRef(null);
  useEffect(() => {
    codeRef.current.innerHTML = `<code>${fileContent}</code>`;
    document.querySelectorAll("pre code").forEach((el) => {
      hljs.highlightElement(el);
    });

    setLineNumbersLenth(codeRef.current.offsetHeight / 20);
  }, [codeRef, fileContent]);
  return (
    <div className={styles["code-view"]}>
      <div className={styles["file-header"]}>
        <FileDoneOutlined className={styles["icon-file"]} />
        <span className={styles["file-name"]}>{fileName}</span>
        <span className={styles["file-size"]}>{fileSize}</span>
      </div>
      <div className={styles["code-content"]}>
        <div className={styles["line-numbers"]}>
          {Array.from({ length: lineNumbersLenth }).map((item, index) => {
            return (
              <span key={index + 1} id="L{index+1}">
                {index + 1}
              </span>
            );
          })}
        </div>
        <div className={styles["codes"]}>
          <pre ref={codeRef}>
            <code>{fileContent}</code>
          </pre>
        </div>
      </div>
    </div>
  );
};

export default CodeView;

缺点：

1. 由于是计算的高度会存在误差，由于行数需要向上取整，经常会行数比实际多一行
2. 不同类型的代码语言在行高上会存在问题，导致行号和代码行可能没有严格对齐（比如 vue 代码）

2、使用 highlightjs-line-numbers.js 添加行号

highlightjs-line-numbers 会将 highlight.js 分割后的代码进行格式化，再根据分类装入 table 中，每一行代码放入一个 tr 中，前面的行号对应一个 td，这就避免了上述第一种计算不准确的问题。

两种使用方式：

1. 增加行号官网提供了全局使用的方式，直接全局引入 highlight.js 和 highlightjs-line-numbers.js
   注意：引入的先后顺序，需要先引入 highlight.js 在引入 highlightjs-line-numbers.js，然后初始化 highlight.js 再调用 highlightjs-line-numbers，代码如下：

<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
  <pre>
        <code class="language-c">...
        </code>
    </pre>
</div>
<div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
  <script type="text/javascript">
    document.querySelectorAll("pre code").forEach((el) => {
      hljs.highlightElement(el);
    });

    hljs.initLineNumbersOnLoad();
  </script>
</div>

2. 我们现在用 spa 构建页面时在很多页面根本用不着这两个文件，但是也加载了这两个文件，我们会觉得冗余，于是我们想通过 es6 的方式，在需要的地方引入即可

import hljs from 'highlight.js'
import * from 'highlightjs-line-numbers.min.js'

document.querySelectorAll("pre code").forEach((el) => {
  hljs.highlightElement(el);
});

hljs.initLineNumbersOnLoad();

遇到的问题：上述的代码会报错

highlightjs-line-numbers.js:21 highlight.js not detected!
index.jsx:23 Uncaught TypeError: highlight_js__WEBPACK_IMPORTED_MODULE_2__.default.initLineNumbersOnLoad is not a function

原因：highlightjs-line-number 里面使用 window 作为全局变量，在全局引入的时候 highlight.js 会挂载全局变量到 window 上供 highlightjs-line-number 使用，但是我们上述引用方式导致拿不到 window 对象。

解决方法：将 highlightjs-line-number 下载下来，修改里面的源码，将文件中的 w.hljs 替换为 hljs。

使用的时候发现另一个问题，当代码只有一行的时候，行号没有显示，需要将源码中的 addLineNumbersBlockFor 方法的 lines.length > 1 改为 >= 1，内容为空的时候使用组件也会报错，虽然可以在源码中判断，但是最好还是在调用 initLineNumbersOnLoad 之前就进行判空处理。

在 react 中封装使用

highlightjs-line-number 改造代码

/* eslint-disable  */
// jshint multistr:true
import hljs from "highlight.js";
import "./hignlight-light-dark.scss";
(function (w, d) {
  var TABLE_NAME = "hljs-ln",
    LINE_NAME = "hljs-ln-line",
    CODE_BLOCK_NAME = "hljs-ln-code",
    NUMBERS_BLOCK_NAME = "hljs-ln-numbers",
    NUMBER_LINE_NAME = "hljs-ln-n",
    DATA_ATTR_NAME = "data-line-number",
    BREAK_LINE_REGEXP = /\r\n|\r|\n/g;

  if (hljs) {
    hljs.initLineNumbersOnLoad = initLineNumbersOnLoad;
    hljs.lineNumbersBlock = lineNumbersBlock;
    hljs.lineNumbersValue = lineNumbersValue;

    addStyles();
  } else {
    w.console.error("highlight.js not detected!");
  }

  function isHljsLnCodeDescendant(domElt) {
    var curElt = domElt;
    while (curElt) {
      if (curElt.className && curElt.className.indexOf("hljs-ln-code") !== -1) {
        return true;
      }
      curElt = curElt.parentNode;
    }
    return false;
  }

  function getHljsLnTable(hljsLnDomElt) {
    var curElt = hljsLnDomElt;
    while (curElt.nodeName !== "TABLE") {
      curElt = curElt.parentNode;
    }
    return curElt;
  }

  // Function to workaround a copy issue with Microsoft Edge.
  // Due to hljs-ln wrapping the lines of code inside a <table> element,
  // itself wrapped inside a <pre> element, window.getSelection().toString()
  // does not contain any line breaks. So we need to get them back using the
  // rendered code in the DOM as reference.
  function edgeGetSelectedCodeLines(selection) {
    // current selected text without line breaks
    var selectionText = selection.toString();

    // get the <td> element wrapping the first line of selected code
    var tdAnchor = selection.anchorNode;
    while (tdAnchor.nodeName !== "TD") {
      tdAnchor = tdAnchor.parentNode;
    }

    // get the <td> element wrapping the last line of selected code
    var tdFocus = selection.focusNode;
    while (tdFocus.nodeName !== "TD") {
      tdFocus = tdFocus.parentNode;
    }

    // extract line numbers
    var firstLineNumber = parseInt(tdAnchor.dataset.lineNumber);
    var lastLineNumber = parseInt(tdFocus.dataset.lineNumber);

    // multi-lines copied case
    if (firstLineNumber != lastLineNumber) {
      var firstLineText = tdAnchor.textContent;
      var lastLineText = tdFocus.textContent;

      // if the selection was made backward, swap values
      if (firstLineNumber > lastLineNumber) {
        var tmp = firstLineNumber;
        firstLineNumber = lastLineNumber;
        lastLineNumber = tmp;
        tmp = firstLineText;
        firstLineText = lastLineText;
        lastLineText = tmp;
      }

      // discard not copied characters in first line
      while (selectionText.indexOf(firstLineText) !== 0) {
        firstLineText = firstLineText.slice(1);
      }

      // discard not copied characters in last line
      while (selectionText.lastIndexOf(lastLineText) === -1) {
        lastLineText = lastLineText.slice(0, -1);
      }

      // reconstruct and return the real copied text
      var selectedText = firstLineText;
      var hljsLnTable = getHljsLnTable(tdAnchor);
      for (var i = firstLineNumber + 1; i < lastLineNumber; ++i) {
        var codeLineSel = format('.{0}[{1}="{2}"]', [
          CODE_BLOCK_NAME,
          DATA_ATTR_NAME,
          i,
        ]);
        var codeLineElt = hljsLnTable.querySelector(codeLineSel);
        selectedText += "\n" + codeLineElt.textContent;
      }
      selectedText += "\n" + lastLineText;
      return selectedText;
      // single copied line case
    } else {
      return selectionText;
    }
  }

  // ensure consistent code copy/paste behavior across all browsers
  // (see https://github.com/wcoder/highlightjs-line-numbers.js/issues/51)
  document.addEventListener("copy", function (e) {
    // get current selection
    var selection = window.getSelection();
    // override behavior when one wants to copy line of codes
    if (isHljsLnCodeDescendant(selection.anchorNode)) {
      var selectionText;
      // workaround an issue with Microsoft Edge as copied line breaks
      // are removed otherwise from the selection string
      if (window.navigator.userAgent.indexOf("Edge") !== -1) {
        selectionText = edgeGetSelectedCodeLines(selection);
      } else {
        // other browsers can directly use the selection string
        selectionText = selection.toString();
      }
      e.clipboardData.setData("text/plain", selectionText);
      e.preventDefault();
    }
  });

  function addStyles() {
    var css = d.createElement("style");
    css.type = "text/css";
    css.innerHTML = format(
      ".{0}{border-collapse:collapse}" +
        ".{0} td{padding:0}" +
        ".{1}:before{content:attr({2})}",
      [TABLE_NAME, NUMBER_LINE_NAME, DATA_ATTR_NAME]
    );
    d.getElementsByTagName("head")[0].appendChild(css);
  }

  function initLineNumbersOnLoad(options) {
    if (d.readyState === "interactive" || d.readyState === "complete") {
      documentReady(options);
    } else {
      w.addEventListener("DOMContentLoaded", function () {
        documentReady(options);
      });
    }
  }

  function documentReady(options) {
    try {
      var blocks = d.querySelectorAll("code.hljs,code.nohighlight");

      for (var i in blocks) {
        if (blocks.hasOwnProperty(i)) {
          if (!isPluginDisabledForBlock(blocks[i])) {
            lineNumbersBlock(blocks[i], options);
          }
        }
      }
    } catch (e) {
      w.console.error("LineNumbers error: ", e);
    }
  }

  function isPluginDisabledForBlock(element) {
    return element.classList.contains("nohljsln");
  }

  function lineNumbersBlock(element, options) {
    if (typeof element !== "object") return;

    async(function () {
      element.innerHTML = lineNumbersInternal(element, options);
    });
  }

  function lineNumbersValue(value, options) {
    if (typeof value !== "string") return;

    var element = document.createElement("code");
    element.innerHTML = value;

    return lineNumbersInternal(element, options);
  }

  function lineNumbersInternal(element, options) {
    var internalOptions = mapOptions(element, options);

    duplicateMultilineNodes(element);

    return addLineNumbersBlockFor(element.innerHTML, internalOptions);
  }

  function addLineNumbersBlockFor(inputHtml, options) {
    var lines = getLines(inputHtml);
    // if last line contains only carriage return remove it
    if (lines.length > 0 && lines[lines.length - 1].trim() === "") {
      lines.pop();
    }

    if (lines.length >= 1 || options.singleLine) {
      var html = "";

      for (var i = 0, l = lines.length; i < l; i++) {
        html += format(
          "<tr>" +
            '<td class="{0} {1}" {3}="{5}">' +
            '<div class="{2}" {3}="{5}"></div>' +
            "</td>" +
            '<td class="{0} {4}" {3}="{5}">' +
            "{6}" +
            "</td>" +
            "</tr>",
          [
            LINE_NAME,
            NUMBERS_BLOCK_NAME,
            NUMBER_LINE_NAME,
            DATA_ATTR_NAME,
            CODE_BLOCK_NAME,
            i + options.startFrom,
            lines[i].length > 0 ? lines[i] : " ",
          ]
        );
      }

      return format('<table class="{0}">{1}</table>', [TABLE_NAME, html]);
    }

    return inputHtml;
  }

  /**
   * @param {HTMLElement} element Code block.
   * @param {Object} options External API options.
   * @returns {Object} Internal API options.
   */
  function mapOptions(element, options) {
    options = options || {};
    return {
      singleLine: getSingleLineOption(options),
      startFrom: getStartFromOption(element, options),
    };
  }

  function getSingleLineOption(options) {
    var defaultValue = false;
    if (!!options.singleLine) {
      return options.singleLine;
    }
    return defaultValue;
  }

  function getStartFromOption(element, options) {
    var defaultValue = 1;
    var startFrom = defaultValue;

    if (isFinite(options.startFrom)) {
      startFrom = options.startFrom;
    }

    // can be overridden because local option is priority
    var value = getAttribute(element, "data-ln-start-from");
    if (value !== null) {
      startFrom = toNumber(value, defaultValue);
    }

    return startFrom;
  }

  /**
   * Recursive method for fix multi-line elements implementation in highlight.js
   * Doing deep passage on child nodes.
   * @param {HTMLElement} element
   */
  function duplicateMultilineNodes(element) {
    var nodes = element.childNodes;
    for (var node in nodes) {
      if (nodes.hasOwnProperty(node)) {
        var child = nodes[node];
        if (getLinesCount(child.textContent) > 0) {
          if (child.childNodes.length > 0) {
            duplicateMultilineNodes(child);
          } else {
            duplicateMultilineNode(child.parentNode);
          }
        }
      }
    }
  }

  /**
   * Method for fix multi-line elements implementation in highlight.js
   * @param {HTMLElement} element
   */
  function duplicateMultilineNode(element) {
    var className = element.className;

    if (!/hljs-/.test(className)) return;

    var lines = getLines(element.innerHTML);

    for (var i = 0, result = ""; i < lines.length; i++) {
      var lineText = lines[i].length > 0 ? lines[i] : " ";
      result += format('<span class="{0}">{1}</span>\n', [className, lineText]);
    }

    element.innerHTML = result.trim();
  }

  function getLines(text) {
    if (text.length === 0) return [];
    return text.split(BREAK_LINE_REGEXP);
  }

  function getLinesCount(text) {
    return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
  }

  ///
  /// HELPERS
  ///

  function async(func) {
    w.setTimeout(func, 0);
  }

  /**
   * {@link https://wcoder.github.io/notes/string-format-for-string-formating-in-javascript}
   * @param {string} format
   * @param {array} args
   */
  function format(format, args) {
    return format.replace(/\{(\d+)\}/g, function (m, n) {
      return args[n] !== undefined ? args[n] : m;
    });
  }

  /**
   * @param {HTMLElement} element Code block.
   * @param {String} attrName Attribute name.
   * @returns {String} Attribute value or empty.
   */
  function getAttribute(element, attrName) {
    return element.hasAttribute(attrName)
      ? element.getAttribute(attrName)
      : null;
  }

  /**
   * @param {String} str Source string.
   * @param {Number} fallback Fallback value.
   * @returns Parsed number or fallback value.
   */
  function toNumber(str, fallback) {
    if (!str) return fallback;
    var number = Number(str);
    return isFinite(number) ? number : fallback;
  }
})(window, document);

export default hljs;

hignlight-light-dark.scss 代码

上面引用了一个 hignlight-light-dark.scss 文件，该文件对样式进行了优化，并且提供了一个黑色主题，当然如果需要更多主题可以直接像下面一样在 react 组件中引入 highlight.js 中的样式主题文件，highlight.js/styles 目录下有很多主题文件，可根据需要进行选择

在组件中可引入需要的主题色

import "highlight.js/styles/github.css";

hignlight-light-dark.scss

.codeViewContent {
  .hljs .toc ul {
    max-height: 550px;
    overflow-y: auto;
  }

  .hljs {
    display: block;
    overflow-x: auto;
    padding: 0 !important;
    font-size: 14px !important;
    font-family: Source Code Pro, Consolas, Menlo, Monaco, Courier New,
      monospace !important;
  }

  .hljs h1::before {
    content: "H1";
    margin-right: 10px;
  }

  .hljs h2::before {
    content: "H2";
    margin-right: 10px;
  }

  .hljs h3::before {
    content: "H3";
    margin-right: 10px;
  }

  .hljs h4::before {
    content: "h4";
    margin-right: 10px;
  }

  .hljs h5::before {
    content: "h5";
    margin-right: 10px;
  }

  .hljs h6::before {
    content: "h6";
    margin-right: 10px;
  }

  .hljs td.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    // color: #ccc;
    color: rgba(27, 31, 35, 0.3);
    // border-right: 1px solid #ccc;
    vertical-align: top;
    padding: 0 6px;

    /* your custom style here */
    .hljs-ln-n {
      min-width: 30px;
      text-align: right;
    }
  }

  .hljs table td {
    border-collapse: inherit;
    min-width: unset;
    padding: 0 10px;
  }

  &.dark .hljs-built_in,
  &.dark .hljs-keyword,
  &.dark .hljs-name,
  &.dark .hljs-selector-tag,
  &.dark .hljs-tag {
    color: #332870 !important;
  }

  &.dark .hljs-emphasis,
  &.dark .hljs-strong {
    color: #a8a8a2 !important;
  }

  &.dark .hljs-built_in,
  &.dark .hljs-keyword,
  &.dark .hljs-name,
  &.dark .hljs-selector-tag,
  &.dark .hljs-tag {
    color: #bababa !important;
  }

  &.dark .hljs-bullet,
  &.dark .hljs-link,
  &.dark .hljs-literal,
  &.dark .hljs-number,
  &.dark .hljs-quote,
  &.dark .hljs-regexp {
    color: #27c94a !important;
  }

  &.dark .hljs-code,
  &.dark .hljs-selector-class {
    color: #eeff00 !important;
  }

  &.dark .hljs-emphasis {
    font-style: italic !important;
  }

  &.dark .hljs-attribute,
  &.dark .hljs-keyword,
  &.dark .hljs-name,
  &.dark .hljs-section,
  &.dark .hljs-selector-tag,
  &.dark .hljs-variable {
    color: #00c3ff !important;
  }

  &.dark .hljs-attr,
  &.dark .hljs-params {
    color: #b9b9b9 !important;
  }

  &.dark .hljs-string {
    color: #ffbb00 !important;
  }

  &.dark .hljs-addition,
  &.dark .hljs-built_in,
  &.dark .hljs-builtin-name,
  &.dark .hljs-selector-attr,
  &.dark .hljs-selector-id,
  &.dark .hljs-selector-pseudo,
  &.dark .hljs-subst,
  &.dark .hljs-symbol,
  &.dark .hljs-template-tag,
  &.dark .hljs-template-variable,
  &.dark .hljs-title,
  &.dark .hljs-type {
    color: #dfe231 !important;
  }

  &.dark .hljs-comment,
  &.dark .hljs-deletion {
    color: #008839 !important;
  }

  &.dark .hljs-meta {
    color: #00ff0d !important;
  }

  &.dark .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em !important;
    background: #2b2b2b !important;
    font-size: 14px !important;
    color: #bababa !important;
    font-family: Source Code Pro, Consolas, Menlo, Monaco, Courier New,
      monospace !important;
  }

  &.dark .hljs h1::before {
    content: "H1";
    margin-right: 10px;
    color: gainsboro;
  }

  &.dark .hljs h2::before {
    content: "H2";
    margin-right: 10px;
    color: gainsboro;
  }

  &.dark .hljs h3::before {
    content: "H3";
    margin-right: 10px;
    color: gainsboro;
  }

  &.dark .hljs h4::before {
    content: "h4";
    margin-right: 10px;
    color: gainsboro;
  }

  &.dark .hljs h5::before {
    content: "h5";
    margin-right: 10px;
    color: gainsboro;
  }

  &.dark .hljs h6::before {
    content: "h6";
    margin-right: 10px;
    color: gainsboro;
  }
  &.dark .hljs td.hljs-ln-numbers {
    color: #ccc;
    border-right: 1px solid #ccc;
  }
}

react 封装的 CodeView 组件代码

import { useEffect, useState, useRef } from "react";
// import { FileDoneOutlined } from '@ant-design/icons'
import styles from "./index.module.scss";
import hljs from "./highlightjs-line-numbers";

const CodeView = ({ fileContent, fileName, fileSize }) => {
  const codeRef = useRef(null);
  let timer = useRef(null);
  const [highLightDone, setHighLightDone] = useState(false);
  useEffect(() => {
    if (!fileContent) {
      setHighLightDone(true);
      return;
    }
    setHighLightDone(false);
    codeRef.current.innerHTML = `<code>${fileContent}</code>`;
    document.querySelectorAll("pre code").forEach((el) => {
      hljs.highlightElement(el);
    });

    hljs.initLineNumbersOnLoad();
    timer.current = setTimeout(() => {
      setHighLightDone(true);
    }, 100);
    return () => {
      clearTimeout(timer.current);
    };
  }, [codeRef, fileContent]);
  return (
    <div className={styles["code-view"]}>
      <div className={styles["file-header"]}>
        {/* <FileDoneOutlined className={styles['icon-file']} /> */}
        <span className={styles["file-name"]}>{fileName}</span>
        <span className={styles["file-size"]}>{fileSize}</span>
      </div>
      {!highLightDone && <div className={styles["mask"]}></div>}

      <div className={styles["code-content"]}>
        <div className={`${styles["codes"]} codeViewContent dark`}>
          <pre ref={codeRef}>
            <code>{fileContent}</code>
          </pre>
        </div>
      </div>
    </div>
  );
};

export default CodeView;

上面在 codeViewContent 类旁的 dark 类就是表明这是 dark 主题，去掉 dark 就是默认的主题。

在上面代码中有个 highLightDone 状态用来控制内容遮罩层的显示，因为 fileContent 渲染后，highlight.js 在 useEffect 中格式化代码用户就已经可以看到结果了，但是之后再做的生成行号，生成行号的过程会将 dom 内容 重新放入 table 中，然后生成最终结果。在这个过程中引发了至少两次重排和重绘操作，会造成界面的一个内容闪动，用户体验不好，所以加一个延时的遮罩增强用户体验。

上面 CodeView 组件中的 样式文件

.code-view {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e9eaec;
  border-radius: 4px;
  position: relative;

  .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 10;
  }

  .file-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #fcfcfc;
    line-height: 28px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom: 1px solid #d4d6d9;

    .icon-file {
      margin-right: 8px;
      font-size: 14px;
    }
    .file-name {
      font-size: 14px;
      font-weight: 500;
      color: #000000;
      line-height: 24px;
      margin-right: 4px;
    }
    .file-size {
      color: #878c96;
      font-weight: 400;
      font-size: 12px;
    }
  }
  .code-content {
    height: calc(100% - 40px);
    overflow: auto;
    display: flex;

    .line-numbers {
      color: #666;
      padding: 10px 6px;
      text-align: right;
      float: left;
      padding-top: 13px;

      span {
        text-decoration: none;
        cursor: pointer;
        display: block;
        font-size: 12px !important;
        height: 20px;
        line-height: 20px !important;
        min-width: 30px;
        white-space: nowrap;
        color: rgba(27, 31, 35, 0.3);
        font-family: consolas, Courier, MS Courier New, monospace;
      }
    }
    .codes {
      flex: 1;
      font-size: 0;
      pre {
        border: none;
        border-radius: 0;
        font-family: consolas, Courier, MS Courier New, monospace;
        margin: 0;
        white-space: pre;
        word-wrap: normal;
        overflow-y: hidden;
        color: #333;
        font-size: 12px;
        line-height: 20px;
        padding: 10px 10px 10px 0;

        span {
          display: inline-block;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
        }
      }
    }
  }
}