Comments (3)
Would a PR for such an effect be wanted? If so, is .meta.brace.curly.js an appropriate thing to target to reset the style back to normal for JS blocks escaped by { }?
Good question. I checked out the react and language-javascript-jsx packages, but both use different highlighting. So yeah, your PR would be kinda too tied to the language-babel
package.
I'm not too familiar with JSX, is omitting the braces invalid? If so, another option might be to make a PR for language-babel
that changes the highlighting to hint that braces are required. Maybe add .invalid.illegal
https://github.com/atom/one-dark-syntax/blob/master/styles/language.less#L250? Although that might be too strong and annoying.
Or if you just like to change it personally, you could add it to your styles.less
(for now):
// customize language-babel
.theme-one-dark-syntax atom-text-editor::shadow {
.source.jsx {
.markup.raw.jsx {
color: #828997;
.meta.brace.curly.js {
color: #abb2bf;
}
}
}
}
from one-dark-syntax.
It's not actually invalid without the braces, it's just treated as a plaintext string in the rendered HTML output instead of executed as javascript code. It doesn't mean what it looks like in my example without the braces, which is why I'd like the syntax highlighting to make that more obvious.
It looks like language-javascript-jsx
has the best labeling of the embedded section as it's consistent with how language-php
labels PHP sections in HTML, or language-ruby
labeling Ruby in HTML.
I updated my one-dark-syntax
fork to do this instead:
// styles/languages/jsx.less
.source.jsx {
.markup.raw.jsx {
color: @mono-2;
}
}
// styles/language.less
.source {
color: @mono-1;
}
And I've made a pull request to language-babel
to fix the embedded section labeling here: gandm/language-babel#29
from one-dark-syntax.
Or just
// styles/languages/jsx.less
.source.jsx {
color: @mono-1;
.markup.raw.jsx {
color: @mono-2;
}
}
so it's scoped to JSX only? Although that still only affects language-babel
.
Ok, this might be a stupid question, but isn't it a bit strange that language-babel
also includes JSX highlighting? Wouldn't it better if there is a separate language-jsx
package that becomes the "official" one? Currently there are a few packages that all do JSX highlighting but in a different way. Maybe it's still a bit early and one will emerge over time.
Hmm.. https://atom.io/packages/language-jsx seems to be taken by another language with the same name. 😣
Anyways, are you ok to keep it in your personal fork or styles.less
for now? Although if you don't mind making a PR with the JSX spec only, that would be great to have.
from one-dark-syntax.
Related Issues (20)
- PHP highlighting messed up in Atom Beta (1.21.0) HOT 8
- Wrong curly bracket color HOT 5
- Make background pure black, and/or add config option for background color HOT 1
- Code background color is not same with background color HOT 2
- Comments move text below HOT 6
- Syntax highlight issue HOT 4
- "DISTINCT" in SQL is not highlighted HOT 2
- improve json highlighting HOT 4
- and, or, ... keywords not highlighted HOT 1
- 1.6.0 breaks syntax highlighting on one light/dark HOT 4
- Syntax highlight broken after update HOT 10
- Latest Atom Breaks One Dark Syntax HOT 2
- Markdown Syntax coloring (links vs. emphasis) HOT 1
- Question about custom syntax HOT 3
- <unknown> is deprecated. HOT 1
- PHP syntax highlighting issue inside HTML quotes HOT 1
- Improve LESS Highlighting
- Syntax color is mismatch for this PHP source (1.18.0) HOT 1
- How to remove italics from comments HOT 1
- Comment documentation highlighting is incorrect for class properties. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from one-dark-syntax.