-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcodeblock.styl
More file actions
115 lines (107 loc) · 3.17 KB
/
Copy pathcodeblock.styl
File metadata and controls
115 lines (107 loc) · 3.17 KB
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
106
107
108
109
110
111
112
113
114
115
@import "../variables"
code
font-family: 'Fira Code', monospace
// Code block
&.code-block.code-container
// Content
color: var(--foreground-1)
// Font and text
white-space: pre
word-spacing: normal
word-break: normal
word-wrap: normal
font-size: 0.8rem
text-align: left
// Spacing
padding: spacing-2 0
line-height: 1.5
// Make tab same as 4 spaces
-moz-tab-size: 4
-o-tab-size: 4
tab-size: 4
// Misc
display: block
overflow-x: auto
-webkit-hyphens: none
-moz-hyphens: none
-ms-hyphens: none
hyphens: none
.code-block
// Each line in code block
&.line
display: block
padding-right: spacing-2
// Add index before each line
&:not(.deleted)
counter-increment: linenum
&::before
content: counter(linenum)
color: var(--foreground-4)
// Make sure additional digit doesn't push the text to the side a little
width: 1rem
text-align: right
display: inline-block
margin-right: spacing-3
padding-left: spacing-2 + 2px
// Change colours based on highlight
&.highlighted
background-color: rgba(highlighted, 0.1)
border-left: 2px solid highlighted
&::before
color: highlighted
// Add a line to the left side
padding-left: spacing-2
&.inserted
background-color: rgba(inserted, 0.1)
&::before
content: '+'
color: inserted
&.deleted
background-color: rgba(deleted, 0.1)
&::before
content: '-'
color: deleted
// Shell stuff
&.code-container.language-bash > &.line::before
content: '$'
// Code block wrapper
&.container
// Add rounding to all of the content, including header/caption
display: block
overflow: hidden
border-radius: small-radius
background-color: var(--background-0)
border: solid 1px var(--background-5)
margin: spacing-2 0
// Language name label at the top of the codeblock
&.lang
// Fix content
display: block
width: fit-content
// Display
background-color: var(--background-4)
border-radius: small-radius
font-weight: bolder
font-size: 0.8em
text-transform: uppercase
color: var(--foreground-0)
// Misc
user-select: none
padding: spacing-0 spacing-1 - 1px spacing-0 - 1px spacing-1 - 1px
// There is more
&:not(:last-child)
margin-bottom: spacing-1
&.header
background-color: var(--background-0)
padding: spacing-2 - 2px spacing-3
// Add default text styling
color: var(--foreground-2)
font-size: 0.9em
// Data in the header
.code-block-meta-prop
&.key
color: var(--foreground-4)
user-select: none
&.value
color: var(--foreground-2)
font-weight: bolder