This is the 18th day of my participation in the August Challenge.

Hello, everyone! I’m Milo, welcome to my test development pit goods!

review

In the last section, we wrote a JSON comparison method that hasn’t been used in assertions yet, but that doesn’t stop us from moving on to another article.

In fact, there will be some lag when our AceEditor introduces many themes. At present, we do not know whether it is too many themes or too much code completion, so we will reduce the themes first.

However, I was really upset because I didn’t have a favorite theme. But WHEN I saw the Code editor of LeetCode, I was very envious. Its Monaco-Editor supports material, as shown in the figure.

Some research

After doing a lot of research, I found two great sites.

tmtheme-editor.herokuapp.com/#! / editor/t…

  • Generate theme files with one click

    But theme files are in tmTheme format, which is not very useful.

We found two that we wanted most: The Material One Dark and atom Dark

Click Download to Download the corresponding theme file, which is actually used in vscode, but how do we embed WebIDE?

We also have the following website:

Bitwiser. / in Monaco – them…

This site converts theme files into JSON files that can be embedded in the Monaco editor!

Get to the point

However, since we are going to modify the AceEditor, we need to find out how to add custom themes to the AceEditor.

Good Samaritan, days. You can find this document on Ace’s Github website:

Let’s translate his steps:

  1. Pull the code down, go to the Tool folder, and install the dependencies
  2. Put the TMTheme file in the ThThemes directory
  3. Update thTheme.js file to include our new theme
  4. performnode tmtheme.js

Simple and rude!!

test

I’ve omitted the NPM install step and let’s execute ththeme.js directly to Node

Let’s check for file generation:

Combined with the react – ace

Since we are using the React component, we have to import as we did in the previous topic.

But we’re generating JS and CSS, so let’s see how monokai works, for example:

This achieves the purpose of only introducing JS to have style, good guy!!

Without further ado, let’s try this out:

Copy monokai code, it requires when the relative path is changed to absolute path, and finally put cssText in brackets.

CssClass and other field names also need to change oh ~

ace.define("ace/theme/material-one-dark"["require"."exports"."module"."ace/lib/dom"].function(require.exports.module) {

  exports.isDark = false;
  exports.cssClass = "ace-material-one-dark";
  exports.cssText = ` .ace-material-one-dark .ace_gutter { background: #272B33; Color: RGB (103,111,122)}. Ace-material - one-dark. ace_print-margin {// width: 1px; background: #e8e8e8 } .ace-material-one-dark { background-color: #272B33; color: #A6B2C0 } .ace-material-one-dark .ace_cursor { color: #528BFF } .ace-material-one-dark .ace_marker-layer .ace_selection { background: #3D4350 } .ace-material-one-dark.ace_multiselect .ace_selection.ace_start { box-shadow: 0 0 3px 0px #272B33; border-radius: 2px } .ace-material-one-dark .ace_marker-layer .ace_step { background: rgb(198, 219, 174) } .ace-material-one-dark .ace_marker-layer .ace_bracket { margin: -1px 0 0 -1px; border: 1px solid #747369 } .ace-material-one-dark .ace_marker-layer .ace_active-line { background: #2B313A } .ace-material-one-dark .ace_gutter-active-line { background-color: #2B313A } .ace-material-one-dark .ace_marker-layer .ace_selected-word { border: 1px solid #3D4350 } .ace-material-one-dark .ace_fold { background-color: #61AEEF; border-color: #A6B2C0 } .ace-material-one-dark .ace_keyword { color: #C679DD } .ace-material-one-dark .ace_keyword.ace_operator { color: #A6B2C0 } .ace-material-one-dark .ace_keyword.ace_other.ace_unit { color: #D2945D } .ace-material-one-dark .ace_constant { color: #D2945D } .ace-material-one-dark .ace_constant.ace_numeric { color: #D2945D } .ace-material-one-dark .ace_constant.ace_character.ace_escape { color: #57B6C2 } .ace-material-one-dark .ace_support.ace_function { color: #57B6C2 } .ace-material-one-dark .ace_support.ace_class { color: #E5C17C } .ace-material-one-dark .ace_storage { color: #C679DD } .ace-material-one-dark .ace_invalid.ace_illegal { color: #272B33; background-color: #f2777a } .ace-material-one-dark .ace_invalid.ace_deprecated { color: #272B33; background-color: #d27b53 } .ace-material-one-dark .ace_string { color: #90C378 } .ace-material-one-dark .ace_string.ace_regexp { color: #57B6C2 } .ace-material-one-dark .ace_comment { font-style: italic; color: #59626F } .ace-material-one-dark .ace_variable { color: #DF6A73 } .ace-material-one-dark .ace_meta.ace_selector { color: #C679DD } .ace-material-one-dark .ace_entity.ace_other.ace_attribute-name { color: #D2945D } .ace-material-one-dark .ace_entity.ace_name.ace_function { color: #61AEEF } .ace-material-one-dark .ace_entity.ace_name.ace_tag { color: #DF6A73 } .ace-material-one-dark .ace_markup.ace_list { color: #DF6A73 } `;

  var dom = require("ace/lib/dom");
  dom.importCssString(exports.cssText, exports.cssClass);
});                (function() {
  ace.require(["ace/theme/ace-material-one-dark"].function(m) {
    if (typeof module= ="object" && typeof exports= ="object" && module) {
      module.exports = m;
    }
  });
})();

Copy the code

The final file is as above, we call it Materialonedark. js and introduce it in the editor:

Look at the results:

Satisfied, finished work ~!

Experience online: pity. Buzz