zehfernandes / monaco-themes

Themes to be used and generated with monaco-editor in web browser

Home Page:https://editor-a5ea1.web.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

monaco-themes

See extended demo at https://editor.bitwiser.in

A list of theme definitions to be used with monaco-editor in browser. See minimal demo

Usage

npm install monaco-themes

API

Using <script>
<script type="text/javascript" src="https://unpkg.com/monaco-themes/dist/monaco-themes.js"></script>
<script type="text/javascript">
    var tmThemeString = /* read using FileReader */
    var themeData = MonacoThemes.parseTmTheme(tmThemeString);
    monaco.editor.defineTheme('mytheme', themeData);
    monaco.editor.setTheme('mytheme');
</script>
Using webpack/node
const parseTmTheme = require('monaco-themes').parseTmTheme;

Directly using themes

With webpack
const monaco = /* require monaco */

import('monaco-themes/themes/Monokai.json')
  .then(data => {
      monaco.editor.defineTheme('monokai', data);
  })
Independently

Download this repository and extract and save themes directory in your project.

/* load monaco */

fetch('/themes/Monokai.json')
  .then(data => data.json())
  .then(data => {
    monaco.editor.defineTheme('monokai', data);
    monaco.editor.setTheme('monokai');
  })
ezoic increase your site revenue

About

Themes to be used and generated with monaco-editor in web browser

https://editor-a5ea1.web.app/

License:MIT License


Languages

Language:JavaScript 75.1%Language:HTML 24.9%