colorizes brackets, parentheses and braces to help track scope
npm install rainbowbracketsThis is a working attempt at a rainbowBracket extension for CodeMirror6.
Live Implementation:
- rainbowBrackets: a codeMirror Extension
- What are rainbow brackets?
- Demo
- Features
- Usage/Examples
- @uiw/react-codemirror
- codemirror package
- vanilla javascript
- API Reference
- Deployment
- Roadmap
- FAQ
- Does this work for controlled and uncontroleld CodeMirror Components?
- Can I change the colors?
- Contributing
- License
- Related
- Closing
- Depth/Scope detection
- 7 customizable bracket classes
- Default colors: Red Orange Yellow Green Blue Indigo Violet
- Implementation agnostic
- Theme agnostic
Depending on your theme and extensions, the rainbowBrackets may not apply correctly as the span structure looks something like this, where the color of the inner span will override the rainbow-bracket. Investigate with Chrome Dev Tools if you're encountering a bug.
>Nearly Fixed as of 2.0.0. See updated API Reference.
``javascript`
{ //opening bracket displaying theme color
To work around this, we can add the following CSS.
`css
.rainbow-bracket-red > span {
color: red;
}
.rainbow-bracket-orange > span {
color: orange;
}
.rainbow-bracket-yellow > span {
color: yellow;
}
.rainbow-bracket-green > span {
color: green;
}
.rainbow-bracket-blue > span {
color: blue;
}
.rainbow-bracket-indigo > span {
color: indigo;
}
.rainbow-bracket-violet > span {
color: violet;
}
`
This will override the inner span. Future implementations should ensure the rainbowBracket has higher precedence.
`javascript
import rainbowBrackets from 'rainbowbrackets'
const cmExtensions = [/Your Other Extensions /, rainbowBrackets()]
//...
extensions={cmExtensions}
>
`$3
coming soon...handle as you would an existing extension$3
coming soon...handle as you would an existing extensionAPI Reference
#### Class Structure
##### 1.0.1
`javascript`
.rainbow-bracket-red {color: 'red'}
.rainbow-bracket-orange {color: 'orange'}
.rainbow-bracket-yellow {color: 'yellow'}
.rainbow-bracket-green {color: 'green'}
.rainbow-bracket-blue {color: 'blue'}
.rainbow-bracket-indigo {color: 'indigo'}
.rainbow-bracket-violet {color: 'violet'}
##### 2.0.0
`javascript`
.rainbow-bracket-red: { color: 'red' }
.rainbow-bracket-red > span: { color: 'red' }
.rainbow-bracket-orange: { color: 'orange' }
.rainbow-bracket-orange > span: { color: 'orange' }
.rainbow-bracket-yellow: { color: 'yellow' }
.rainbow-bracket-yellow > span: { color: 'yellow' }
.rainbow-bracket-green: { color: 'green' }
.rainbow-bracket-green > span: { color: 'green' }
.rainbow-bracket-blue: { color: 'blue' }
.rainbow-bracket-blue > span: { color: 'blue' }
.rainbow-bracket-indigo: { color: 'indigo' }
.rainbow-bracket-indigo > span: { color: 'indigo' }
.rainbow-bracket-violet: { color: 'violet' }
.rainbow-bracket-violet > span: { color: 'violet' }
git fork, clone, then navigate into this repository.
Install dependencies:
`bash`
npm install
See Contributing. TLDR: Make a branch with your feature name/bug fix, include detailed commit log and PR message.
- More testing across a wide range of functions, scopes, languages, etc
#### Does this work for controlled and uncontroleld CodeMirror Components?
Yes! Although it's likely there are unknown bugs I have yet to encounter.
#### Can I change the colors?
Yes! See the API reference above. If you want to change red to pink, simply use a little CSS:
`css
.rainbow-bracket-red {
color: pink;
}
/ Override may be neccessary as well/
.rainbow-bracket-red > span {
color: pink;
}
`
I'll rename these classes if enough people want color flexibility to something more intuitive.
See contributing.md to get started.
Please adhere to this project's code of conduct`.
CodeMirror Extensions Forum Discussion
This extension is still experimental and it may not perfectly colorize scope. It still may be useful, or at least fun to use. Improvements are welcome. Big thank you to Marijn Haverbeke, the CodeMirror community, and all its contributors.