.ct-block-code-editor { --color-fg-default: #24292f; --color-canvas-subtle: #f9f9f9; --color-prettylights-syntax-comment: #6e7781; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-entity: #8250df; --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-markup-bold: #24292f; display: grid; grid-template-columns: auto 1fr; gap: 10px; min-height: 70vh; color: var(--color-fg-default); background-color: var(--color-canvas-subtle); font-family: ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace; font-size: 13px; } .w-tc-editor-numbers { display: flex; flex-direction: column; box-sizing: border-box; padding: 10px 20px; opacity: 0.5; text-align: end; background-color: #e5e7e9; user-select: none; } .w-tc-editor-text { &:focus { outline: none; box-shadow: none; } } .w-tc-editor-text, .w-tc-editor-preview { min-height: 16px; } .w-tc-editor-preview pre { margin: 0; padding: 0; white-space: inherit; font-family: inherit !important; font-size: inherit !important; } .w-tc-editor-preview code { margin: 0; padding: 0; white-space: inherit; font-family: inherit !important; font-size: inherit !important; } .w-tc-editor-preview pre code { font-family: inherit; } .w-tc-editor code[class*='language-'] .token.cdata, .w-tc-editor pre[class*='language-'] .token.cdata, .w-tc-editor code[class*='language-'] .token.comment, .w-tc-editor pre[class*='language-'] .token.comment, .w-tc-editor code[class*='language-'] .token.doctype, .w-tc-editor pre[class*='language-'] .token.doctype, .w-tc-editor code[class*='language-'] .token.prolog, .w-tc-editor pre[class*='language-'] .token.prolog { color: var(--color-prettylights-syntax-comment); } .w-tc-editor code[class*='language-'] .token.punctuation, .w-tc-editor pre[class*='language-'] .token.punctuation { color: var(--color-prettylights-syntax-sublimelinter-gutter-mark); } .w-tc-editor code[class*='language-'] .namespace, .w-tc-editor pre[class*='language-'] .namespace { opacity: 0.7; } .w-tc-editor code[class*='language-'] .token.boolean, .w-tc-editor pre[class*='language-'] .token.boolean, .w-tc-editor code[class*='language-'] .token.constant, .w-tc-editor pre[class*='language-'] .token.constant, .w-tc-editor code[class*='language-'] .token.deleted, .w-tc-editor pre[class*='language-'] .token.deleted, .w-tc-editor code[class*='language-'] .token.number, .w-tc-editor pre[class*='language-'] .token.number, .w-tc-editor code[class*='language-'] .token.symbol, .w-tc-editor pre[class*='language-'] .token.symbol { color: var(--color-prettylights-syntax-entity-tag); } .w-tc-editor code[class*='language-'] .token.builtin, .w-tc-editor pre[class*='language-'] .token.builtin, .w-tc-editor code[class*='language-'] .token.char, .w-tc-editor pre[class*='language-'] .token.char, .w-tc-editor code[class*='language-'] .token.inserted, .w-tc-editor pre[class*='language-'] .token.inserted, .w-tc-editor code[class*='language-'] .token.selector, .w-tc-editor pre[class*='language-'] .token.selector, .w-tc-editor code[class*='language-'] .token.string, .w-tc-editor pre[class*='language-'] .token.string { color: var(--color-prettylights-syntax-constant); } .w-tc-editor code[class*='language-'] .style .token.string, .w-tc-editor pre[class*='language-'] .style .token.string, .w-tc-editor code[class*='language-'] .token.entity, .w-tc-editor pre[class*='language-'] .token.entity, .w-tc-editor code[class*='language-'] .token.property, .w-tc-editor pre[class*='language-'] .token.property, .w-tc-editor code[class*='language-'] .token.operator, .w-tc-editor pre[class*='language-'] .token.operator, .w-tc-editor code[class*='language-'] .token.url, .w-tc-editor pre[class*='language-'] .token.url { color: var(--color-prettylights-syntax-constant); } .w-tc-editor code[class*='language-'] .token.atrule, .w-tc-editor pre[class*='language-'] .token.atrule, .w-tc-editor code[class*='language-'] .token.property-access .token.method, .w-tc-editor pre[class*='language-'] .token.property-access .token.method, .w-tc-editor code[class*='language-'] .token.keyword, .w-tc-editor pre[class*='language-'] .token.keyword { color: var(--color-prettylights-syntax-keyword); } .w-tc-editor code[class*='language-'] .token.function, .w-tc-editor pre[class*='language-'] .token.function { color: var(--color-prettylights-syntax-string); } .w-tc-editor code[class*='language-'] .token.important, .w-tc-editor pre[class*='language-'] .token.important, .w-tc-editor code[class*='language-'] .token.regex, .w-tc-editor pre[class*='language-'] .token.regex, .w-tc-editor code[class*='language-'] .token.variable, .w-tc-editor pre[class*='language-'] .token.variable { color: var(--color-prettylights-syntax-string-regexp); } .w-tc-editor code[class*='language-'] .token.bold, .w-tc-editor pre[class*='language-'] .token.bold, .w-tc-editor code[class*='language-'] .token.important, .w-tc-editor pre[class*='language-'] .token.important { color: var(--color-prettylights-syntax-markup-bold); } .w-tc-editor code[class*='language-'] .token.tag, .w-tc-editor pre[class*='language-'] .token.tag { color: var(--color-prettylights-syntax-entity-tag); } .w-tc-editor code[class*='language-'] .token.attr-value, .w-tc-editor pre[class*='language-'] .token.attr-value, .w-tc-editor code[class*='language-'] .token.attr-name, .w-tc-editor pre[class*='language-'] .token.attr-name { color: var(--color-prettylights-syntax-constant); } .w-tc-editor code[class*='language-'] .token.selector .class, .w-tc-editor pre[class*='language-'] .token.selector .class, .w-tc-editor code[class*='language-'] .token.class-name, .w-tc-editor pre[class*='language-'] .token.class-name { color: var(--color-prettylights-syntax-entity); }