r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add active line color in Codemirror editor

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
shared/components/Editor/Editor.jsx
View file

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

1
styles/abstracts/_variables.scss
View file

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

5
styles/components/_editor.scss
View file

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

2
styles/components/_p5-widget-codemirror-theme.scss
View file

@ -26,7 +26,7 @@
.cm-s-p5-widget span.cm-error { color: #f00; } .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; } .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. */ /* These styles don't seem to be set by CodeMirror's javascript mode. */