Code Mirror

Created: 2017-09-25 15:23:40 -0700 Modified: 2018-04-30 16:38:52 -0700

Basics

Install from the main site here

React-codemirror2 (reference)

Setting initial cursor position

Update: apparently there’s a prop for this called “cursor” (reference). I was having issues using this originally because setting the cursor position is called on componentDidMount and also from componentWillReceiveProps, and I didn’t expect a CWRP to even be hit.

Not that it matters much, but the underlying CodeMirror functions are setCursor and scrollIntoView (which you’d call on the editor).

Making a custom theme

I didn’t get very far with this. I got basic colors working by copying in the gist, but then I couldn’t override something like .CodeMirror-gutters due to import order (I didn’t want to use “!important”). I could have gotten around this by just using a CSS file and importing it after CodeMirror imported theirs, but I didn’t think it was worth it yet.

Using a preprocessor (reference)

Themes are located in node_modules/codemirror/theme

EJ linked to a gist showing the basics: https://gist.github.com/0i0/3095040

HiDeoo gave control for everything that all languages support, the gutter, some plugins like matching brackets and rulers:

HiDeoo: Adam13531 If you ends up needing a custom theme, this is the template I made and use every time which gives you all the css selectors so you just have to define colors https://bpaste.net/show/0c4515ab1d6d (this is styled-components but should be valid LESS except variables ofc)

.cm-s-myawsometheme-dark {
    &.CodeMirror {
      background-color: ${color('editor.background')};
      color: ${color('editor.text')};
      font-family: Hack, monospace;
      font-size: 12px;
      line-height: 18px;
    }

    &.CodeMirror-overlayscroll {
      & > div > textarea {
        will-change: transform;
      }
    }

    .CodeMirror-overlayscroll-horizontal,
    .CodeMirror-overlayscroll-vertical {
      div {
        background-color: ${color('editor.scrollbar')};
      }
    }

    .CodeMirror-scroll {
      will-change: transform;
    }

    .CodeMirror-activeline-background {
      background-color: ${color('editor.currentLine')};
    }

    .CodeMirror-selected {
      background-color: ${color('editor.selection')};
    }

    .CodeMirror-gutters {
      background-color: ${color('editor.background')};
      border: 0;
    }

    .CodeMirror-linenumber {
      color: ${color('editor.lineNumberDisabled')};
    }

    .CodeMirror-activeline-gutter {
      background-color: ${color('editor.currentLine')};

      .CodeMirror-linenumber {
        color: ${color('editor.text')};
      }
    }

    .CodeMirror-cursor {
      border-left: 2px solid ${color('tint')};
    }

    .cm-variable {
      color: ${color('editor.blue')};
    }

    .cm-variable-2 {
      color: ${color('editor.text')};
    }

    .cm-variable-3 {
      color: ${color('editor.pink')};
    }

    .cm-keyword {
      color: ${color('editor.pink')};
    }

    .cm-property {
      color: ${color('editor.red')};
    }

    .cm-operator {
      color: ${color('editor.cyan')};
    }

    .cm-string {
      color: ${color('editor.green')};

      &.cm-property {
        color: ${color('editor.red')};
      }
    }

    .cm-quote {
      color: ${color('editor.green')};
    }

    .cm-def {
      color: ${color('editor.orange')};
    }

    .cm-comment {
      color: ${color('editor.comment')};
    }

    .cm-atom {
      color: ${color('editor.lightOrange')};
    }

    .cm-number {
      color: ${color('editor.lightOrange')};
    }

    .cm-attribute {
      color: ${color('editor.orange')};
    }

    .cm-builtin {
      color: ${color('editor.blue')};
    }

    .cm-bracket {
      color: ${color('editor.text')};
    }

    .cm-tag {
      color: ${color('editor.red')};

      &.cm-bracket {
        color: ${color('editor.text')};
      }
    }

    .cm-header {
      color: ${color('editor.red')};
    }

    .cm-link {
      color: ${color('editor.pink')};
    }

    .cm-error {
      color: ${color('editor.text')};
    }

    .cm-positive {
      color: ${color('editor.brightGreen')};
    }

    .cm-negative {
      color: ${color('editor.brightRed')};
    }

    .cm-meta {
      color: ${color('editor.lightOrange')};
    }

    span {
      .CodeMirror-matchingbracket {
        border-bottom: 1px solid ${color('tint')};
        color: inherit;
      }

      .CodeMirror-nonmatchingbracket {
        color: inherit;
      }
    }

    .CodeMirror-matchingtag {
      background-color: inherit;
      border-bottom: 1px solid ${color('tint')};
    }

    .CodeMirror-ruler {
      border-left: 1px solid ${color('editor.ruler')};
      z-index: 10;
    }

    .cm-matchhighlight {
      background-color: ${color('editor.selection')};
      border-bottom: 1px solid ${color('tint')};
      border-top: 1px solid ${color('tint')};
    }
  }