mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-22 02:58:32 +00:00
83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
import { EditorView } from '@codemirror/view';
|
|
import { tags } from '@lezer/highlight';
|
|
import { HighlightStyle } from '@codemirror/language';
|
|
import { syntaxHighlighting } from '@codemirror/language';
|
|
|
|
let colors = {
|
|
teal600: '#c084fc', // text
|
|
teal400: '#2dd4bf',
|
|
amber: '#d97706',
|
|
violet400: '#a78bfa',
|
|
violet300: '#c4b5fd',
|
|
indigo300: '#a5b4fc',
|
|
indigo400: '#818cf8',
|
|
fuchsia400: '#e879f9',
|
|
fuchsia300: '#78716c', // brackets
|
|
fuchsia200: '#f5d0fe',
|
|
whitish: '#d9f99d', // text
|
|
stone400: '#a8a29e',
|
|
stone500: '#78716c',
|
|
};
|
|
|
|
let theme = EditorView.theme(
|
|
{
|
|
'&': {
|
|
color: colors.teal600,
|
|
overflow: 'hidden',
|
|
backgroundColor: 'transparent',
|
|
fontSize: '16px',
|
|
height: '100%',
|
|
},
|
|
'.cm-gutters': {
|
|
'background-color': 'transparent',
|
|
color: colors.stone500,
|
|
},
|
|
'.cm-cursor': {
|
|
'border-left-color': 'transparent',
|
|
// the regular cursor is hidden, because we're showing a nametag..
|
|
// the cursor is part of https://github.com/felixroos/y-codemirror.next
|
|
// i had to fork again because the scrollIntoView was messing with the global scroll
|
|
},
|
|
/* '.cm-activeLine, .cm-activeLineGutter, .cm-line': {
|
|
'background-color': 'rgba(0,0,0,.7) !important',
|
|
}, */
|
|
/* '.cm-line': {
|
|
'background-color': 'transparent',
|
|
}, */
|
|
'.cm-selectionBackground': {
|
|
'background-color': 'rgba(255,255,255,.7) !important',
|
|
},
|
|
'.cm-cursorLayer': {
|
|
'animation-name': 'inherit !important;', // disables blinking
|
|
},
|
|
'.cm-matchingBracket': {
|
|
'text-decoration': 'underline 0.12rem',
|
|
'text-underline-offset': '0.24rem',
|
|
'text-decoration-color': colors.fuchsia300,
|
|
},
|
|
'.cm-ySelectionInfo': {
|
|
opacity: '1',
|
|
fontFamily: 'monospace',
|
|
color: 'black',
|
|
padding: '2px 2px',
|
|
fontSize: '0.8rem',
|
|
//"font-weight": "bold",
|
|
top: '1.45em',
|
|
'z-index': '1000',
|
|
},
|
|
},
|
|
{ dark: true },
|
|
);
|
|
|
|
const highlightStyle = HighlightStyle.define([
|
|
{ tag: tags.labelName, color: '#7dd3fc' },
|
|
{ tag: tags.keyword, color: colors.teal600 },
|
|
{ tag: tags.literal, color: colors.whitish },
|
|
{ tag: tags.squareBracket, color: colors.amber },
|
|
{ tag: tags.punctuation, color: colors.fuchsia300 },
|
|
{ tag: tags.operator, color: colors.fuchsia300 },
|
|
{ tag: tags.comment, color: colors.stone500, fontStyle: 'italic' },
|
|
]);
|
|
|
|
export default [theme, syntaxHighlighting(highlightStyle)];
|