如何使用 JS/CSS 将数字设置为 PRE

Question

好吧，我想创建一个 HTML 模板来创建这个：

但这是我的结果：

或者这个：

以某种方式需要将其结合到结果中。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pre Test</title>
    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="js/styles/monokai-sublime.min.css" />
    <script src="js/highlight.min.js"></script>
    <script>
        hljs.highlightAll();
    </script>
</head>
<body>

<div>
    <div class="circleR"></div>
    <div class="circleY"></div>
    <div class="circleG"></div>
</div>

<pre><code class="language-python">def solve():
    global grid
    for y in range(9):
        for x in range(9):
            if grid[y][x] == 0:
                for n in range(1,10):
                    if possible(y,x,n):
                        grid[y][x] = n
                        solve()
                        grid[y][x] = 0
                return
    print(np.matrix(grid))
    input("More?")
</code></pre>

<script type="text/javascript">
    function addLineClass (pre) {
        var lines = pre.innerText.split("\n"); // can use innerHTML also
        while(pre.childNodes.length > 0) {
            pre.removeChild(pre.childNodes[0]);
        }
        for(var i = 0; i < lines.length; i++) {
            var span = document.createElement("span");
            span.className = "line";
            span.innerText = lines[i]; // can use innerHTML also
            pre.appendChild(span);
            pre.appendChild(document.createTextNode("\n"));
        }
    }
    window.addEventListener("load", function () {
        var pres = document.getElementsByTagName("pre");
        for (var i = 0; i < pres.length; i++) {
            addLineClass(pres[i]);
        }
    }, false);
</script>
</body>
</html>

style.css 文件（太乱了，对不起，我快疯了）

  pre {
    border-radius: 5px;
    width: 550px;
    border: 2px solid black;
    padding: 20px 0px 0px 10px;
    background-color: #23241f;
    color: aliceblue;
    font-size: large;  
    counter-reset: linecounter;
    /*
    an-old-hope.min.css
    #1c1d21;

    monokai-sublime.min.css
    #23241f
    */
  }
  
  pre :before {
    /*counter-increment: line;*/
    /*content: counter(line);*/
    /*border-right: 1px solid #ddd;*/
    margin-right: .2em;
    color: #888 /*number color*/
  }

  pre span.line {
    counter-increment: linecounter;
    /*line-height: 16px;*/
}

pre span.line::before {
    padding: 0 .5em;
    display: inline-block;
    content: counter(linecounter);
    width: 30px;
    border-right: none;
    text-align: right;
    /*font-size: 16px;*/
    /*line-height: 16px;*/
    /*padding-right: 3px;*/
    /*display: inline-block;*/
    /*color: red;*/
}

  .circleR {
    background: #ff534a;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  
  .circleY {
    background: #ffea14;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 20px;
    left: 35px;
  }
  
  .circleG {
    background: #4bd13d;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 20px;
    left: 50px;
  }

问题与解释：

我使用了 highlight.js 中的代码，简直太棒了。这里

<link rel="stylesheet" href="js/styles/monokai-sublime.min.css" />
<script src="js/highlight.min.js"></script>
<script>
    hljs.highlightAll();
</script>

将此行放入 <head></head> 标签 <pre><code class="language-python">...</code></pre> 中的所有内容都将在您的页面中获得突出显示样式，作为 IDE，没有额外的标签需要它。如果你想检查它，只需删除 body.

末尾的最后一个 script

所以我想将数字放入我的样式中，但是当“运行”时 body 末尾的 script 中的代码删除了 IDE 样式，因为函数是这样的：

js/highlight.min.js 把每一行和每一个词都扔到 <pre><code class="language-python">...</code></pre> 里面，检查需要什么样的样式，然后设置这样的东西 <span class="hljs-keyword">def</span> 来从 js/styles/monokai-sublime.min.css 中获取样式，每个单词的 class 都会改变。（这是第二张图）

但是当 <script type="text/javascript"> 出现时，删除所有内容并设置此 <span class="line">def solve():</span> 因为它在 pre 的同一行中。这很棒，因为，为每一行设置数字（如您在第三张图片中看到的那样），但失去了突出显示。

有一种方法可以获得类似第一张图片、IDE 样式和数字的东西？

Answer 1

方法一：使用after:highlight回调

pre {
  width: 550px;
  font-size: large;
  border-radius: 5px;
  background-color: #23241f;
  counter-reset: linecounter;
}

pre .line-num {
  min-width: 3ch;
  display: inline-block;
}

pre .line-num::before {
  counter-increment: linecounter;
  content: counter(linecounter);
}

.circleR {
  background: #ff534a;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 20px;
  left: 20px;
}

.circleY {
  background: #ffea14;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 20px;
  left: 35px;
}

.circleG {
  background: #4bd13d;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 20px;
  left: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pre Test</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/monokai-sublime.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>

  <script>
    hljs.addPlugin({
      'after:highlight': (result) => {
        result.value = result.value.replace(/^/gm, '<span class="line-num"></span>')
      }
    });

    hljs.highlightAll();
  </script>
</head>

<body>

  <div>
    <div class="circleR"></div>
    <div class="circleY"></div>
    <div class="circleG"></div>
  </div>

  <pre>
  <code class="language-python">def solve():
    global grid
    for y in range(9):
        for x in range(9):
            if grid[y][x] == 0:
                for n in range(1,10):
                    if possible(y,x,n):
                        grid[y][x] = n
                        solve()
                        grid[y][x] = 0
                return
    print(np.matrix(grid))
    input("More?")</code>
</pre>

</body>

</html>

方法二：使用highlightjs-line-numbers.min.js插件

pre {
  border-radius: 5px;
  width: 550px;
  background-color: #23241f;
  color: aliceblue;
  font-size: large;
}

.circleR {
  background: #ff534a;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 20px;
  left: 20px;
}

.circleY {
  background: #ffea14;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 20px;
  left: 35px;
}

.circleG {
  background: #4bd13d;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 20px;
  left: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pre Test</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/monokai-sublime.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.6.0/dist/highlightjs-line-numbers.min.js"></script>

  <script>
    hljs.highlightAll();
    hljs.initLineNumbersOnLoad();
  </script>
</head>

<body>

  <div>
    <div class="circleR"></div>
    <div class="circleY"></div>
    <div class="circleG"></div>
  </div>

  <pre>
  <code class="language-python">def solve():
    global grid
    for y in range(9):
        for x in range(9):
            if grid[y][x] == 0:
                for n in range(1,10):
                    if possible(y,x,n):
                        grid[y][x] = n
                        solve()
                        grid[y][x] = 0
                return
    print(np.matrix(grid))
    input("More?")</code>
</pre>

</body>

</html>

参考资料

https://highlightjs.readthedocs.io/en/latest/line-numbers.html

https://highlightjs.readthedocs.io/en/latest/plugin-api.html#after-highlight-result

https://github.com/wcoder/highlightjs-line-numbers.js

如何使用 JS/CSS 将数字设置为 PRE

How to set numbers to PRE with JS/CSS

html

javascript

css

pre