@@ -30,7 +30,8 @@ div[class*="language-"]
30
30
user-select none
31
31
padding-top 1.3rem
32
32
position absolute
33
- z-index 0
33
+ top 0
34
+ left 0
34
35
width 100%
35
36
line-height 1.4
36
37
.highlighted
@@ -45,61 +46,106 @@ div[class*="language-"]
45
46
right 1em
46
47
font-size 0.75rem
47
48
color rgba (255 , 255 , 255 , 0.4 )
48
-
49
- div [class = "language-js" ], div [class = "language-javascript" ]
49
+ & :not (.line-numbers-mode )
50
+ .line-numbers-wrapper
51
+ display none
52
+ & .line-numbers-mode
53
+ .highlight-lines .highlighted
54
+ position relative
55
+ & :before
56
+ content ' '
57
+ position absolute
58
+ z-index 3
59
+ left 0
60
+ top 0
61
+ display block
62
+ width $lineNumbersWrapperWidth
63
+ height 100%
64
+ background-color rgba (0 , 0 , 0 , 66% )
65
+ pre
66
+ padding-left $lineNumbersWrapperWidth + 1 rem
67
+ vertical-align middle
68
+ .line-numbers-wrapper
69
+ position absolute
70
+ top 0
71
+ width $lineNumbersWrapperWidth
72
+ text-align center
73
+ color rgba (255 , 255 , 255 , 0.3 )
74
+ padding 1.25rem 0
75
+ line-height 1.4
76
+ br
77
+ user-select none
78
+ .line-number
79
+ position relative
80
+ z-index 4
81
+ user-select none
82
+ font-size 0.85em
83
+ & ::after
84
+ content ''
85
+ position absolute
86
+ z-index 2
87
+ top 0
88
+ left 0
89
+ width $lineNumbersWrapperWidth
90
+ height 100%
91
+ border-radius 6px 0 0 6px
92
+ border-right 1px solid rgba (0 , 0 , 0 , 66% )
93
+ background-color $codeBgColor
94
+
95
+ div [class* = "language-js" ], div [class* = "language-javascript" ]
50
96
& :before
51
97
content "js"
52
98
53
- div [class = "language-ts" ], div [class = "language-typescript" ]
99
+ div [class* = "language-ts" ], div [class* = "language-typescript" ]
54
100
& :before
55
101
content "ts"
56
102
57
- div [class = "language-html" ], div [class = "language-markup" ]
103
+ div [class* = "language-html" ], div [class* = "language-markup" ]
58
104
& :before
59
105
content "html"
60
106
61
- div [class = "language-markdown" ], div [class = "language-md" ]
107
+ div [class* = "language-markdown" ], div [class* = "language-md" ]
62
108
& :before
63
109
content "md"
64
110
65
- div [class = "language-vue" ]:before
111
+ div [class* = "language-vue" ]:before
66
112
content "vue"
67
113
68
- div [class = "language-css" ]:before
114
+ div [class* = "language-css" ]:before
69
115
content "css"
70
116
71
- div [class = "language-sass" ]:before
117
+ div [class* = "language-sass" ]:before
72
118
content "sass"
73
119
74
- div [class = "language-less" ]:before
120
+ div [class* = "language-less" ]:before
75
121
content "less"
76
122
77
- div [class = "language-scss" ]:before
123
+ div [class* = "language-scss" ]:before
78
124
content "scss"
79
125
80
- div [class = "language-stylus" ]:before
126
+ div [class* = "language-stylus" ]:before
81
127
content "stylus"
82
128
83
- div [class = "language-json" ]:before
129
+ div [class* = "language-json" ]:before
84
130
content "json"
85
131
86
- div [class = "language-ruby" ]:before
132
+ div [class* = "language-ruby" ]:before
87
133
content "rb"
88
134
89
- div [class = "language-python" ]:before
135
+ div [class* = "language-python" ]:before
90
136
content "py"
91
137
92
- div [class = "language-go" ]:before
138
+ div [class* = "language-go" ]:before
93
139
content "go"
94
140
95
- div [class = "language-java" ]:before
141
+ div [class* = "language-java" ]:before
96
142
content "java"
97
143
98
- div [class = "language-c" ]:before
144
+ div [class* = "language-c" ]:before
99
145
content "c"
100
146
101
- div [class = "language-bash" ]:before
147
+ div [class* = "language-bash" ]:before
102
148
content "sh"
103
149
104
- div [class = "language-yaml" ]:before
150
+ div [class* = "language-yaml" ]:before
105
151
content "yaml"
0 commit comments