61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { EditorView } from '@codemirror/view'
|
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
|
|
import { tags } from '@lezer/highlight'
|
|
|
|
const highlightStyle = HighlightStyle.define([
|
|
{ tag: tags.keyword, color: 'var(--color-keyword)' },
|
|
{ tag: tags.name, color: 'var(--color-function)' },
|
|
{ tag: tags.string, color: 'var(--color-string)' },
|
|
{ tag: tags.number, color: 'var(--color-number)' },
|
|
{ tag: tags.bool, color: 'var(--color-bool)' },
|
|
{ tag: tags.operator, color: 'var(--color-operator)' },
|
|
{ tag: tags.paren, color: 'var(--color-paren)' },
|
|
{ tag: tags.regexp, color: 'var(--color-regex)' },
|
|
{ tag: tags.function(tags.variableName), color: 'var(--color-function-call)' },
|
|
{ tag: tags.function(tags.invalid), color: 'white' },
|
|
{
|
|
tag: tags.definition(tags.variableName),
|
|
color: 'var(--color-variable-def)',
|
|
backgroundColor: 'var(--bg-variable-def)',
|
|
padding: '1px 2px',
|
|
borderRadius: '2px',
|
|
fontWeight: '500',
|
|
},
|
|
])
|
|
|
|
export const shrimpHighlighting = syntaxHighlighting(highlightStyle)
|
|
|
|
export const shrimpTheme = EditorView.theme(
|
|
{
|
|
'&': {
|
|
color: 'var(--text-editor)',
|
|
backgroundColor: 'var(--bg-editor)',
|
|
height: '100%',
|
|
fontSize: '18px',
|
|
},
|
|
'.cm-content': {
|
|
fontFamily: '"Pixeloid Mono", "Courier New", monospace',
|
|
caretColor: 'var(--caret)',
|
|
padding: '0px',
|
|
},
|
|
'&.cm-focused .cm-cursor': {
|
|
borderLeftColor: 'var(--caret)',
|
|
},
|
|
'&.cm-focused .cm-selectionBackground, ::selection': {
|
|
backgroundColor: 'var(--bg-selection)',
|
|
},
|
|
'.cm-editor': {
|
|
border: 'none',
|
|
outline: 'none',
|
|
height: '100%',
|
|
},
|
|
'.cm-matchingBracket': {
|
|
backgroundColor: 'var(--color-bool)',
|
|
},
|
|
'.cm-nonmatchingBracket': {
|
|
backgroundColor: 'var(--color-string)',
|
|
},
|
|
},
|
|
{ dark: true }
|
|
)
|