Added kindof monokai to monaco

This commit is contained in:
Olivier Gagnon 2021-10-09 19:00:27 -04:00
parent f9afff57b2
commit 01d15176ac
6 changed files with 72 additions and 18 deletions

28
dist/vendor.bundle.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -44,6 +44,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
<Select onChange={(event) => setTheme(event.target.value)} defaultValue={props.options.theme}>
<MenuItem value="vs-dark">dark</MenuItem>
<MenuItem value="light">light</MenuItem>
<MenuItem value="monokai">monokai</MenuItem>
</Select>
</Box>

@ -29,6 +29,7 @@ import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import IconButton from "@mui/material/IconButton";
import SettingsIcon from "@mui/icons-material/Settings";
import { loadThemes } from "./themes";
let symbols: string[] = [];
export function SetupTextEditor(): void {
@ -291,6 +292,7 @@ export function Root(props: IProps): React.ReactElement {
});
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, "netscript.d.ts");
monaco.languages.typescript.typescriptDefaults.addExtraLib(libSource, "netscript.d.ts");
loadThemes(monaco);
}
return (
@ -315,7 +317,7 @@ export function Root(props: IProps): React.ReactElement {
onMount={onMount}
loading={<Typography>Loading script editor!</Typography>}
height="90%"
defaultLanguage="javascript"
language="javascript"
defaultValue={code}
onChange={updateCode}
theme={options.theme}

@ -0,0 +1,51 @@
export async function loadThemes(monaco: any): Promise<void> {
monaco.editor.defineTheme("monokai", {
base: "vs-dark",
inherit: true,
rules: [
{
background: "272822",
token: "",
},
{
foreground: "75715e",
token: "comment",
},
{
foreground: "e6db74",
token: "string",
},
{
token: "number",
foreground: "ae81ff",
},
{
foreground: "ae81ff",
token: "function",
},
{
foreground: "f92672",
token: "keyword",
},
{
token: "storage.type.function.js",
foreground: "ae81ff",
},
// {
// foreground: "ae81ff",
// token: "entity.name.function",
// },
],
colors: {
"editor.foreground": "#F8F8F2",
"editor.background": "#272822",
"editor.selectionBackground": "#49483E",
"editor.lineHighlightBackground": "#3E3D32",
"editorCursor.foreground": "#F8F8F0",
"editorWhitespace.foreground": "#3B3A32",
"editorIndentGuide.activeBackground": "#9D550FB0",
"editor.selectionHighlightBorder": "#222218",
},
});
}