textarea.editor { opacity: 0; } .CodeMirror { height: auto; padding: 0 1em; margin-top: 1em; border-left: 2px solid var(--color-cm-border); background-color: var(--color-cm-background); font-size: 1em; line-height: normal; } .CodeMirror-cursors, .CodeMirror pre { z-index: 1 !important; } .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { /* a selection within an IDE not just covers the background but also changes the text color, allowing e.g. for inversion. This is not possible via CodeMirror, see https://github.com/codemirror/codemirror5/issues/1212#issuecomment-13047835 */ background-color: var(--color-cm-selection) !important; opacity: 20% !important; } @keyframes text-flash { 0% { background: rgba(0, 0, 0, 0); color: black; } 40% { background: var(--color-cm-evaluated); color: black, } 100% { background: rgba(0, 0, 0, 0); color: black; } } .CodeMirror .text-flash { animation: text-flash .35s ease-in; } /* syntax hightlighting */ /* keyword can be "var" which is like the class color in the IDE */ .cm-s-default .cm-keyword { color: var(--color-cm-class); font-weight: bold; } .cm-s-default .cm-built-in { color: var(--color-cm-built-in); } .cm-s-default .cm-number { color: var(--color-cm-number); } .cm-s-default .cm-symbol { color: var(--color-cm-symbol); } .cm-s-default .cm-class { color: var(--color-cm-class); } .cm-s-default .cm-primitive { color: var(--color-cm-primitive); } .cm-s-default .cm-char { color: var(--color-cm-char); } .cm-s-default .cm-env-var { color: var(--color-cm-env-var); } /* used to be red */ .cm-s-default .cm-comment { color: var(--color-cm-comment); } .cm-s-default .cm-string { color: var(--color-cm-string); } .cm-s-default .cm-text { color: var(--color-cm-text); } @media print { /* legacy colors */ .cm-s-default .cm-keyword { color: #0000e6; font-weight: bold; } .cm-s-default .cm-built-in { color: #3333bf; font-weight: bold; } .cm-s-default .cm-number { color: #980099; } .cm-s-default .cm-symbol { color: #007300; } .cm-s-default .cm-class { color: #0000d2; font-weight: bold; } .cm-s-default .cm-primitive { color: #0000d2; } .cm-s-default .cm-char { color: #007300; } .cm-s-default .cm-env-var { color: #8c4614; } .cm-s-default .cm-comment { color: #bf0000; font-style: italic; } .cm-s-default .cm-string { color: #5f5f5f; } .cm-s-default .cm-text { color: #000000; } }