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

Line error highlight styling

Browse source
This commit is contained in:
Zach Rispoli 2017-07-17 16:13:59 -04:00 committed by Cassie Tarakajian
parent e111d3c020
commit 1bb0efdac8
2 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/modules/IDE/components/Editor.jsx
View file

@ -118,6 +118,8 @@ class Editor extends React.Component {
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
this._cm.setOption('indentWithTabs', this.props.isTabIndent); this._cm.setOption('indentWithTabs', this.props.isTabIndent);
this._cm.setOption('tabSize', this.props.indentationAmount); this._cm.setOption('tabSize', this.props.indentationAmount);
this._cm.addLineClass(1, null, 'line-runtime-error');
} }
componentWillUpdate(nextProps) { componentWillUpdate(nextProps) {

25
client/styles/components/_editor.scss
View file

@ -27,6 +27,31 @@
padding-left: #{5 / $base-font-size}rem; padding-left: #{5 / $base-font-size}rem;
} }
.CodeMirror-activeline-background {
background-color: rgba(0,0,0,0.025) !important;
}
.CodeMirror-linebackground {
}
.line-runtime-error {
background-color: #ffaaaa !important;
border-radius: 5px;
}
.CodeMirror-guttermarker-subtle {
}
.CodeMirror-foldgutter-folded {
}
.CodeMirror-foldgutter-open {
}
.CodeMirror-gutter-wrapper { .CodeMirror-gutter-wrapper {
right: 100%; right: 100%;
top: 0; top: 0;