feat: monaco editor styling
This commit is contained in:
parent
c1c223fe50
commit
11bd7b77ec
1 changed files with 120 additions and 1 deletions
121
src/_monaco.scss
121
src/_monaco.scss
|
@ -14,6 +14,125 @@
|
||||||
// current / cursor line
|
// current / cursor line
|
||||||
.view-overlays .current-line,
|
.view-overlays .current-line,
|
||||||
.margin-view-overlays .current-line-margin {
|
.margin-view-overlays .current-line-margin {
|
||||||
background-color: #{if($isDark, color.mix($surface0, $base, 64%), color.mix($mantle, $base, 70%))} !important;
|
background-color: #{if(
|
||||||
|
$isDark,
|
||||||
|
color.mix($surface0, $base, 64%),
|
||||||
|
color.mix($mantle, $base, 70%)
|
||||||
|
)} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
|
||||||
|
|
||||||
|
// plaintext
|
||||||
|
.mtk1 {
|
||||||
|
color: $text !important;
|
||||||
|
}
|
||||||
|
.mtk2 {
|
||||||
|
color: #ff69b4 !important;
|
||||||
|
}
|
||||||
|
// decorators
|
||||||
|
.mtk3 {
|
||||||
|
color: $peach !important;
|
||||||
|
}
|
||||||
|
// shell arguments
|
||||||
|
.mtk4 {
|
||||||
|
color: $teal !important;
|
||||||
|
}
|
||||||
|
// css constants & pre-defineds
|
||||||
|
.mtk5 {
|
||||||
|
color: $text !important;
|
||||||
|
}
|
||||||
|
// keywords
|
||||||
|
.mtk6 {
|
||||||
|
color: $mauve !important;
|
||||||
|
}
|
||||||
|
// numbers
|
||||||
|
.mtk7 {
|
||||||
|
color: $peach !important;
|
||||||
|
}
|
||||||
|
// comments
|
||||||
|
.mtk8 {
|
||||||
|
color: $overlay2 !important;
|
||||||
|
}
|
||||||
|
// sometimes a keyword, apparently
|
||||||
|
.mtk9 {
|
||||||
|
color: $mauve !important;
|
||||||
|
}
|
||||||
|
// braces, brackets, parentheses
|
||||||
|
.mtk10 {
|
||||||
|
color: $subtext0 !important;
|
||||||
|
}
|
||||||
|
// arrow brackets & equal signs in HTML
|
||||||
|
.mtk11 {
|
||||||
|
color: $teal !important;
|
||||||
|
}
|
||||||
|
// @ sign in javascript ¯\_(ツ)_/¯
|
||||||
|
.mtk12 {
|
||||||
|
color: $teal !important;
|
||||||
|
}
|
||||||
|
.mtk13 {
|
||||||
|
color: #ff69b4 !important;
|
||||||
|
}
|
||||||
|
.mtk14 {
|
||||||
|
color: #ff69b4 !important;
|
||||||
|
}
|
||||||
|
// regex, css classnames, and HTML keywords (huh)
|
||||||
|
.mtk15 {
|
||||||
|
color: $mauve !important;
|
||||||
|
}
|
||||||
|
// shebangs
|
||||||
|
.mtk16 {
|
||||||
|
color: $overlay2 !important;
|
||||||
|
}
|
||||||
|
.mtk17 {
|
||||||
|
color: #ff69b4 !important;
|
||||||
|
}
|
||||||
|
.mtk18 {
|
||||||
|
color: #ff69b4 !important;
|
||||||
|
}
|
||||||
|
// glob operator i guess
|
||||||
|
.mtk19 {
|
||||||
|
color: $teal !important;
|
||||||
|
}
|
||||||
|
.mtk20 {
|
||||||
|
color: #ff69b4 !important;
|
||||||
|
}
|
||||||
|
// strings
|
||||||
|
.mtk21 {
|
||||||
|
color: $green !important;
|
||||||
|
}
|
||||||
|
.mtk22 {
|
||||||
|
color: #ff69b4 !important;
|
||||||
|
}
|
||||||
|
// functions
|
||||||
|
.mtk23 {
|
||||||
|
color: $blue !important;
|
||||||
|
}
|
||||||
|
// shell variables
|
||||||
|
.mtk24 {
|
||||||
|
color: $peach !important;
|
||||||
|
}
|
||||||
|
// weird variables
|
||||||
|
.mtk25 {
|
||||||
|
color: $pink !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bracket-highlighting-0 {
|
||||||
|
color: color.mix($text, $red, 40%) !important;
|
||||||
|
}
|
||||||
|
.bracket-highlighting-1 {
|
||||||
|
color: color.mix($text, $peach, 40%) !important;
|
||||||
|
}
|
||||||
|
.bracket-highlighting-2 {
|
||||||
|
color: color.mix($text, $yellow, 40%) !important;
|
||||||
|
}
|
||||||
|
.bracket-highlighting-3 {
|
||||||
|
color: color.mix($text, $green, 40%) !important;
|
||||||
|
}
|
||||||
|
.bracket-highlighting-4 {
|
||||||
|
color: color.mix($text, $blue, 40%) !important;
|
||||||
|
}
|
||||||
|
.bracket-highlighting-5 {
|
||||||
|
color: color.mix($text, $mauve, 40%) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue