Skip to content

Commit

Permalink
docs: add custom snippets + update title - monaco editor post
Browse files Browse the repository at this point in the history
  • Loading branch information
pheralb committed May 31, 2024
1 parent 1d9e34e commit 66d5207
Showing 1 changed file with 68 additions and 14 deletions.
82 changes: 68 additions & 14 deletions src/posts/monaco-custom-theme.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Add a custom theme to @monaco-editor/react
description: How to add a custom Visual Studio Code theme to Monaco Editor for React.
title: Add a custom theme to Monaco Editor for React
description: How to add a custom Visual Studio Code theme to Monaco Editor for React and custom snippets.
date: '2024-5-31'
category: 'Tutorial'
writing: false
Expand Down Expand Up @@ -78,28 +78,82 @@ In our case, we will add [**One Dark Pro**](https://binaryify.github.io/OneDark-
Create inside the editor component where you have the `<Editor />`, a function to be executed before the editor starts (`beforeMount`):

```tsx
import { Editor, type Monaco } from "@monaco-editor/react";
import OneDarkPro from "./theme/onedarkpro.json";
import { Editor, type Monaco } from '@monaco-editor/react';
import OneDarkPro from './theme/onedarkpro.json';

const MyMonacoEditor = () => {

const handleEditorDidMount = (monaco: Monaco) => {
monaco.editor.defineTheme("OneDarkPro", {
base: "vs-dark",
monaco.editor.defineTheme('OneDarkPro', {
base: 'vs-dark',
inherit: true,
...OneDarkPro,
...OneDarkPro
});
};

return (
<Editor
width="100%"
height="100vh"
theme="OneDarkPro"
beforeMount={handleEditorDidMount}
/>
<Editor width="100%" height="100vh" theme="OneDarkPro" beforeMount={handleEditorDidMount} />
);
};

export default MyMonacoEditor;
```

## Snippets

- Add custom code font, font size, bracket pair colorization, word wrap, activate/disable minimap, cursor blinking, and format on paste:

```tsx
<Editor
options={{
fontSize: 14,
fontFamily: 'Jetbrains-Mono',
fontLigatures: true,
wordWrap: 'on',
minimap: {
enabled: false
},
bracketPairColorization: {
enabled: true
},
cursorBlinking: 'expand',
formatOnPaste: true,
suggest: {
showFields: false,
showFunctions: false
}
}}
/>
```

- Disable TypeScript checking in the editor:

```ts
const handleEditorDidMount = (monaco: Monaco) => {
monaco.editor.defineTheme('OneDarkPro', {
base: 'vs-dark',
inherit: true,
...OneDarkPro
});
// 👇
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: true
});
};
```

- Add **tsx** (React + Typescript) support:

```ts
const handleEditorDidMount = (monaco: Monaco) => {
monaco.editor.defineTheme('OneDarkPro', {
base: 'vs-dark',
inherit: true,
...OneDarkPro
});
// 👇
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
tsx: 'react'
});
};
```

0 comments on commit 66d5207

Please sign in to comment.