MediaWiki:Test.less/acesyntax.less

From RuneRealm Wiki

This is the current revision of this page, as edited by Alex (talk | contribs) at 00:11, 17 October 2024 (Created page with "→‎======================================= syntax highlight in ace editor =======================================: // This is taken from https://ace.c9.io/tool/mode_creator.html //----- Theme monokai -----// // define the following commented vars in the file that is importing /acesyntax.less //@code-bg: ; //@gutter-bg: ; @gutter-active-line-bg: lighten(@gutter-bg, 10%); //@gutter-text: ; @active-line-bg: lighten(@c..."). The present address (URL) is a permanent link to this version.

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

/* =======================================

      syntax highlight in ace editor
  ======================================= */

// This is taken from https://ace.c9.io/tool/mode_creator.html //----- Theme monokai -----//

// define the following commented vars in the file that is importing /acesyntax.less //@code-bg:  ; //@gutter-bg:  ; @gutter-active-line-bg: lighten(@gutter-bg, 10%); //@gutter-text:  ; @active-line-bg: lighten(@code-bg, 5%); @selection-bg: lighten(@code-bg, 10%); @indent-guide: lighten(@code-bg, 10%);

// adding this class for specificity .wikiEditor-ui, .ve-ui-mwAceEditorWidget {

   .ace-tm .ace_print-margin {
       width: 1px;
       background: #555651;
   }
   .ace-tm {
       color: #F8F8F2;
   }
   .ace-tm .ace_cursor {
       color: #F8F8F0;
   }
   .ace-tm .ace_marker-layer .ace_selection {
       background: @selection-bg;
   }
   .ace-tm.ace_multiselect .ace_selection.ace_start {
       box-shadow: 0 0 3px 0px @selection-bg;
   }
   .ace-tm .ace_marker-layer .ace_step {
       background: rgb(102, 82, 0);
   }
   .ace-tm .ace_marker-layer .ace_bracket {
       margin: -1px 0 0 -1px;
       border: 1px solid #49483E;
   }
   .ace-tm .ace_marker-layer .ace_active-line {
       background: @active-line-bg;
   }
   .ace-tm .ace_gutter-active-line {
       background-color: @gutter-active-line-bg;
   }
   .ace-tm .ace_marker-layer .ace_selected-word {
       border: 1px solid #49483E;
       background: #49483E;
   }
   .ace-tm .ace_invisible {
       color: #52524d;
   }
   .ace-tm .ace_entity.ace_name.ace_tag,
   .ace-tm .ace_keyword,
   .ace-tm .ace_meta.ace_tag,
   .ace-tm .ace_storage {
       color: #F92672;
   }
   .ace-tm .ace_punctuation,
   .ace-tm .ace_punctuation.ace_tag {
       color: #fff;
   }
   .ace-tm .ace_constant.ace_character,
   .ace-tm .ace_constant.ace_language,
   .ace-tm .ace_constant.ace_numeric,
   .ace-tm .ace_constant.ace_other {
       color: #AE81FF;
   }
   .ace-tm .ace_invalid {
       color: #F8F8F0;
       background-color: #F92672;
   }
   .ace-tm .ace_invalid.ace_deprecated {
       color: #F8F8F0;
       background-color: #AE81FF;
   }
   .ace-tm .ace_support.ace_constant,
   .ace-tm .ace_support.ace_function {
       color: #66D9EF;
   }
   .ace-tm .ace_fold {
       background-color: #A6E22E;
       border-color: #F8F8F2;
   }
   .ace-tm .ace_storage.ace_type,
   .ace-tm .ace_support.ace_class,
   .ace-tm .ace_support.ace_type {
       color: #66D9EF;
   }
   .ace-tm .ace_entity.ace_name.ace_function,
   .ace-tm .ace_entity.ace_other,
   .ace-tm .ace_entity.ace_other.ace_attribute-name,
   .ace-tm .ace_variable {
       color: #A6E22E;
   }
   .ace-tm .ace_variable.ace_parameter {
       color: #FD971F;
   }
   .ace-tm .ace_string {
       color: #E6DB74;
   }
   .ace-tm .ace_keyword.ace_operator {
       color: #949eaa;
   }
   .ace-tm .ace_comment {
       color: #949eaa;
   }
   .ace-tm .ace_indent-guide {
       background: none;
       border-right: solid 1px @indent-guide;
       margin-left: -1px;
   }

}