rehype-pretty-code/packages/core/test/results/showLineNumbersAfterHighlight.html at 58b027a1518117d41731fbede87670efb4e1f9dd · pablofdezr/rehype-pretty-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

<style>
  html {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  body {
    margin: 30px auto;
    max-width: 800px;
  }
  pre {
    padding: 16px;
  }
  span > code {
    background: black;
    padding: 4px;
  }
  [data-highlighted-line], [data-highlighted-chars] {
    background-color: rgba(255, 255, 255, 0.25);
  }
  code[data-line-numbers] {
    counter-reset: line;
  }
  code[data-line-numbers]>[data-line]::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 1rem;
    margin-right: 2rem;
    text-align: right;
    color: gray;
  }

  [data-rehype-pretty-code-figure] code[data-theme*=' '],
  [data-rehype-pretty-code-figure] code[data-theme*=' '] span {
    color: var(--shiki-light) !important;
    background-color: var(--shiki-light-bg) !important;
  }

  @media (prefers-color-scheme: dark) {
    [data-rehype-pretty-code-figure] code[data-theme*=' '],
    [data-rehype-pretty-code-figure] code[data-theme*=' '] span {
      color: var(--shiki-dark) !important;
      background-color: var(--shiki-dark-bg) !important;
    }
  }

  .diff.add {
    background-color: rgba(0, 255, 100, 0.25);
  }
  .diff.remove {
    background-color: rgba(255, 100, 200, 0.35);
  }
</style>
<h1>showLineNumbers after highlight tokens (#204)</h1>
<p>showLineNumbers at the start (already worked):</p>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-line-numbers="" data-language="js" data-theme="github-dark" style="display: grid;" data-line-numbers-max-digits="1"><span data-line=""><mark data-highlighted-chars="" class="word"><span style="color:#F97583">const</span></mark><span style="color:#79B8FF"> answer</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 42</span><span style="color:#E1E4E8">;</span></span></code></pre>
</figure>
<p>showLineNumbers at the end, after highlight tokens (#204):</p>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-line-numbers="" data-language="js" data-theme="github-dark" style="display: grid;" data-line-numbers-max-digits="1"><span data-line=""><mark data-highlighted-chars="" class="word"><span style="color:#F97583">const</span></mark><span style="color:#79B8FF"> answer</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 42</span><span style="color:#E1E4E8">;</span></span></code></pre>
</figure>
<p>showLineNumbers{5} at the end, after highlight tokens (#204):</p>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-line-numbers="" style="counter-set: line 4;display: grid;" data-language="js" data-theme="github-dark" data-line-numbers-max-digits="1"><span data-line=""><mark data-highlighted-chars="" class="word"><span style="color:#F97583">const</span></mark><span style="color:#79B8FF"> answer</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 42</span><span style="color:#E1E4E8">;</span></span></code></pre>
</figure>
<p>
  showLineNumbers inside a multi-word highlight is highlight text, not an
  option, so no line numbers here:
</p>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-language="js" data-theme="github-dark" style="display: grid;"><span data-line=""><span style="color:#F97583">const</span><span style="color:#79B8FF"> value</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> '</span><mark data-highlighted-chars="" class="word"><span style="color:#9ECBFF">foo showLineNumbers bar</span></mark><span style="color:#9ECBFF">'</span><span style="color:#E1E4E8">;</span></span></code></pre>
</figure>
<p>
  The same word as a real option alongside a multi-word highlight that also
  contains it — line numbers, and both occurrences highlighted:
</p>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-line-numbers="" data-language="js" data-theme="github-dark" style="display: grid;" data-line-numbers-max-digits="1"><span data-line=""><span style="color:#F97583">const</span><span style="color:#79B8FF"> value</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> '</span><mark data-highlighted-chars="" class="word"><span style="color:#9ECBFF">foo showLineNumbers bar</span></mark><span style="color:#9ECBFF">'</span><span style="color:#E1E4E8">;</span></span></code></pre>
</figure>