Created: 2017-09-25 15:23:40 -0700 Modified: 2018-04-30 16:38:52 -0700
BasicsSection titled Basics
Install from the main site here
Setting initial cursor positionSection titled 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 themeSection titled 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)