-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcustom-codeblock.css
More file actions
159 lines (141 loc) · 6.56 KB
/
Copy pathcustom-codeblock.css
File metadata and controls
159 lines (141 loc) · 6.56 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/* ============================================================
green-screen-terminal.css
Obsidian CSS Snippet Green-Screen Terminal Code Style
Applies to: Reading Mode + Live Preview (CM6)
Place in: <vault>/.obsidian/snippets/
Activate: Settings > Appearance > CSS Snippets
============================================================ */
/* SHARED VARIABLES */
:root {
--gs-bg: #000000;
--gs-fg: #00FF00;
--gs-font: "Consolas", Courier, monospace;
--gs-font-size: 1em;
--gs-border: 1px solid #00AA00;
--gs-radius: 4px;
--gs-padding-inline: 0.1em 0.5em;
--gs-padding-block: 0.5em 0.5em;
}
/* --------------------------------------------------------------
1. READING MODE
.markdown-reading-view covers the rendered HTML pane
-------------------------------------------------------------- */
/* -- Fenced / indented code blocks --------------------------- */
.markdown-reading-view pre {
background-color: var(--gs-bg) !important;
border: var(--gs-border) !important;
border-radius: var(--gs-radius) !important;
padding: var(--gs-padding-block) !important;
margin-left: 1em !important; /* Use this to "indent" the code block on the left */
margin-right: 1em !important; /* Use this to "indent" the code block on the right */
}
.markdown-reading-view pre code {
background-color: transparent !important;
color: var(--gs-fg) !important;
font-family: var(--gs-font) !important;
font-size: var(--gs-font-size) !important;
text-shadow: 0 0 4px rgba(0, 255, 0, 0.45);
/* Kill any syntax-highlighter token colours */
--code-normal: var(--gs-fg) !important;
}
/* Nuke every Prism / highlight.js token inside reading-mode blocks */
.markdown-reading-view pre code .token,
.markdown-reading-view pre code [class*="hljs-"],
.markdown-reading-view pre code span {
color: var(--gs-fg) !important;
background: transparent !important;
text-shadow: 0 0 4px rgba(0, 255, 0, 0.45);
}
/* -- Inline code --------------------------------------------- */
.markdown-reading-view :not(pre) > code {
background-color: var(--gs-bg) !important;
color: var(--gs-fg) !important;
font-family: var(--gs-font) !important;
font-size: var(--gs-font-size) !important;
border: var(--gs-border) !important;
border-radius: var(--gs-radius) !important;
padding: var(--gs-padding-inline) !important;
text-shadow: 0 0 4px rgba(0, 255, 0, 0.35);
}
/* --------------------------------------------------------------
2. LIVE PREVIEW (Source / CM6 editor)
Uses CodeMirror 6 class names
-------------------------------------------------------------- */
/* -- Code-block lines ---------------------------------------- */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
background-color: var(--gs-bg) !important;
color: var(--gs-fg) !important;
font-family: var(--gs-font) !important;
font-size: var(--gs-font-size) !important;
text-shadow: 0 0 4px rgba(0, 255, 0, 0.45);
}
/* Opening/closing fence lines (``` markers) */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-begin,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-end {
background-color: var(--gs-bg) !important;
color: #008800 !important; /* dimmer green for fence markers */
font-family: var(--gs-font) !important;
}
/* Widen the background across the full editor line width */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
padding-left: 0.6em !important;
padding-right: 0.6em !important;
margin-left: 1em !important;
}
/* Kill CM6 syntax-token colours inside code blocks */
.markdown-source-view.mod-cm6 .HyperMD-codeblock span.cm-keyword,
.markdown-source-view.mod-cm6 .HyperMD-codeblock span.cm-string,
.markdown-source-view.mod-cm6 .HyperMD-codeblock span.cm-number,
.markdown-source-view.mod-cm6 .HyperMD-codeblock span.cm-comment,
.markdown-source-view.mod-cm6 .HyperMD-codeblock span.cm-operator,
.markdown-source-view.mod-cm6 .HyperMD-codeblock span.cm-variableName,
.markdown-source-view.mod-cm6 .HyperMD-codeblock span.cm-typeName,
.markdown-source-view.mod-cm6 .HyperMD-codeblock span.cm-propertyName,
.markdown-source-view.mod-cm6 .HyperMD-codeblock span[class^="cm-"] {
color: var(--gs-fg) !important;
background: transparent !important;
}
/* -- Inline code in Live Preview ----------------------------- */
.markdown-source-view.mod-cm6 .cm-inline-code {
background-color: var(--gs-bg) !important;
color: var(--gs-fg) !important;
font-family: var(--gs-font) !important;
font-size: var(--gs-font-size) !important;
border: var(--gs-border) !important;
border-radius: var(--gs-radius) !important;
padding: var(--gs-padding-inline) !important;
text-shadow: 0 0 4px rgba(0, 255, 0, 0.35);
}
/* Backtick delimiters around inline code */
.markdown-source-view.mod-cm6 .cm-formatting-code {
color: #008800 !important; /* dimmer for backticks */
background-color: var(--gs-bg) !important;
}
/* --------------------------------------------------------------
3. SELECTION / HIGHLIGHT
Brighter selection colour inside code blocks & inline code
-------------------------------------------------------------- */
/* -- Reading Mode: native ::selection on code elements ------- */
.markdown-reading-view pre code::selection,
.markdown-reading-view pre code *::selection,
.markdown-reading-view :not(pre) > code::selection {
background-color: rgba(0, 255, 0, 0.35) !important;
color: #000000 !important;
}
/* -- Live Preview: CodeMirror 6 selection layer -------------- */
/* Unfocused selection (editor pane not active) */
.markdown-source-view.mod-cm6 .cm-selectionBackground {
background-color: rgba(0, 255, 0, 0.25) !important;
}
/* Focused selection (editor pane active — most common case) */
.markdown-source-view.mod-cm6.is-focused .cm-selectionBackground,
.markdown-source-view.mod-cm6 .cm-focused .cm-selectionBackground {
background-color: rgba(0, 255, 0, 0.35) !important;
}
/* Native ::selection fallback inside CM6 for browsers that need it */
.markdown-source-view.mod-cm6 .HyperMD-codeblock::selection,
.markdown-source-view.mod-cm6 .HyperMD-codeblock *::selection,
.markdown-source-view.mod-cm6 .cm-inline-code::selection {
background-color: rgba(0, 255, 0, 0.35) !important;
color: #000000 !important;
}