add active line color in Codemirror editor

This commit is contained in:
catarak 2016-05-12 18:29:38 -04:00
parent 18dd7c6541
commit 172e374312
4 changed files with 8 additions and 2 deletions

View file

@ -1,6 +1,7 @@
import React from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/selection/active-line'
class Editor extends React.Component {
_cm: CodeMirror.Editor
@ -10,6 +11,7 @@ class Editor extends React.Component {
theme: 'p5-widget',
value: this.props.content,
lineNumbers: true,
styleActiveLine: true,
mode: 'javascript'
});
this._cm.on('change', () => {

View file

@ -33,4 +33,5 @@ $dark-button-hover-color: $white;
$dark-button-active-color: $white;
$editor-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3;

View file

@ -14,5 +14,8 @@
.CodeMirror-lines {
padding-top: #{25 / $base-font-size}rem;
}
.CodeMirror-line {
padding-left: #{5 / $base-font-size}rem;
}

View file

@ -26,7 +26,7 @@
.cm-s-p5-widget span.cm-error { color: #f00; }
.cm-s-p5-widget .CodeMirror-activeline-background { background: #e8f2ff; }
.cm-s-p5-widget .CodeMirror-activeline-background { background-color: #e8f2ff; }
.cm-s-p5-widget .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
/* These styles don't seem to be set by CodeMirror's javascript mode. */