This project provides a streamlined setup for deploying the Monaco Editor locally. It includes custom themes, language support, and configuration options for a seamless code editing experience similar to Visual Studio Code.
simple-monaco-editor/
├── LICENSE # License file (BSD 3-Clause)
├── README.md # Project documentation
├── editor.js # JavaScript to initialize and configure the editor
├── index.html # Main HTML file to load the editor
├── languages.js # Defines available languages for the editor
├── monaco-editor/ # Core files for Monaco Editor
├── styles.css # Styling for the editor and controls
└── themes/ # Custom themes for the editor
├── index.js # Aggregates all custom themes
├── one-dark-pro.js # One Dark Pro theme
└── one-dark-pro-transparent.js # Transparent version of One Dark Pro theme
-
Clone the Repository
git clone https://github.com/yourusername/simple-monaco-editor.git cd simple-monaco-editor
-
Open the Editor in a Browser
Open
index.html
in your web browser to start using the Monaco Editor with the provided themes and language options.
- Themes: Choose between several built-in and custom themes, including One Dark Pro and its transparent variant. You can select themes directly in the editor interface.
- Languages: Supports multiple programming languages defined in
languages.js
.
To add additional themes:
-
Create a New Theme File
Add a.js
file in thethemes/
directory and define your theme data. For example:// themes/your-theme.js export const yourThemeData = { base: 'vs-dark', inherit: true, rules: [ /* theme syntax rules */ ], colors: { /* theme color settings */ }, };
-
Import and Register the Theme
Openthemes/index.js
and import your new theme, then add it to thecustomThemes
array:import { yourThemeData } from './your-theme.js'; export const customThemes = [ { name: 'One-Dark-Pro', data: oneDarkProThemeData }, { name: 'One-Dark-Pro-Transparent', data: oneDarkProTransparentThemeData }, { name: 'Your-Theme', data: yourThemeData }, // Add your theme here ];
Contributions are welcome! You can submit issues or pull requests for additional themes, language support, or new features.
This project is licensed under the BSD 3-Clause License.