about javascript syntax highlighting

[ghost]

colorscheme: onedark

spacevim

oni

oni is missing a lot of highlighting, including jsdoc.

[bryphe]

Hi @Dcryfm ,

Thanks for the issue and screenshots! We're actually working on integrating TextMate grammars.

This is what it looks like (master build with experimental.editor.textMateHighlighting.enabled on):

Which actually enables even more detailed syntax highlighting - note that the variable/identifiers are highlighted, too!

It's available in master via the experimental.editor.textMateHighlighting.enabled flag - you can read more about it here: https://github.com/onivim/oni/wiki/Configuration#textmate-highlighting

And we're tracking that in #379

[bryphe]

I'll close this out of a duplicate of #379 , but please feel free to try it out and post your feedback!

[bfulop]

Hello,

First, great project, I'm really grateful for the fantastic work you've done! I'm setting up Oni to be my main editor, even though I never used Vim before! I also started a contribution on Patreon, I think for now, that's the only way I can help the project (not enough skills for the rest...).

I just installed ONI v.0.3.2 and noticed that the syntax highlighting is mostly missing. The editor.textMateHighlighting.enabled is of course enabled, and I added a jsconfig.json (empty) file to the root.

Auto-Completion works great but not the syntax highlighting.

[parkerault]

@bfulop I think that's just the default nord theme; it's very minimal. Try using ctrl-shift-p (command-shift-p on mac) and run "Configuration: Edit User Config" and change "ui.colorscheme" to "onedark". In my experience Oni needs to be restarted after changing color themes or they get a little bit wonky. I personally don't think nord is a very good color scheme, but onedark is very good.

[CrossR]

Yeah.... that is odd! I've stuck to onedark since its well...darker, but hadn't realised the syntax highlighting was that different. Perhaps we are missing some tokens in nord that onedark has.

Object = => ${ } const are all missing bits.

[bfulop]

Thanks @parkerault, that did it! One glitch: after restarting, I first had to reopen config.tsx to start up the extra highlighting (with one dark)

In the end, I would love to have the Monokai Pro scheme on Oni. Do you think I can somehow install/convert it for Oni, maybe via vim-monokai-pro?

Sorry if it's off topic...

[parkerault]

@bfulop I would also like to have Monokai in Oni; I have been wanting to try making a theme, maybe I'll try that this week. It should be relatively straightforward to copy the onedark oni theme and swap it out with Monokai colors.

[bryphe]

@parkerault - that would be great to have Monokai as a first-class theme in Oni! 💯

[CrossR]

1122 is a great example of adding a new theme.

Broadly its get a vim theme to base it off, and then define the correct colours for the extended syntax we have due to the TextMate grammar etc in a json file.

[parkerault]

Sounds good, I will take a crack at it unless @bfulop beats me to it! 😄

[bfulop]

Yeah I guess the time (zone) is definitely on my side now! (being in France)

I'll check this week-end if I can cook something up, I have few other issues I need to sort out first (e.g. adding tmbundles - #2030). Mind you, I only installed Oni two days ago and first time using Vim, so I have a lot of learning to do.

[bfulop]

I managed to merge Monokai Vim with the colors from Monokai Pro. I just basically swapped the color values. I also tried to base off from atom dark but it always messed up the UI definitions.

Can put it on GitHub if interested.

Q: Is there a way to turn off the drop shadows, and the overlay when I open the quick panel?

[parkerault]

@bfulop please do share, I would love to try it out!

[bryphe]

@bfulop - that looks amazing! I like the new mode color for Normal, it goes very well with the colorscheme 👍

Would be great to have it on GitHub - I think it would make sense to include with Oni as well if you'd be open to that. I'd like to have more "first class" themes to choose from out of the box.

Q: Is there a way to turn off the drop shadows, and the overlay when I open the quick panel?

Unfortunately we don't expose those via theming today, but we could!

Perhaps something like: effect.boxShadow and effect.boxShadowInset (those are the two main ones we use). Today they are hard-coded here: https://github.com/onivim/oni/blob/master/browser/src/UI/components/common.ts

But no reason we couldn't expose them as something that is themable.

Same for the overlay - the menu's background overlay is hard-coded here: https://github.com/onivim/oni/blob/master/browser/src/Services/Menu/MenuComponent.tsx

That one is just a little more work - some of the styling lives in less/css, and thus isn't themable (it's defined by the menu-background CSS class) - but we're in the process of refactoring our less/css to styled-components (which do have access to our theme properties).

And just for context - another sort of extensibility I'd like to provide eventually is for completing overriding components: #412 . This would be an advanced extensibility option that would allow developers to override our default react components with totally custom ones - something like:

Oni.UI.overrideComponent("Cursor", (cursorProps: CursorProps) => <MyCustomCursor {...cursorProps} />)

Hope that at least gave you some ideas - keep me posted if you have any questions! 👍

[bfulop]

Thanks @bryphe, for your detailed answer! I think no one will complain if you cannot remove the slight drop-shadows. ☺️

So I put up the code here: https://github.com/bfulop/onivim-theme-monokaipro

Will also add the readme.md and probably tweak it a bit as I use it more (suggestions welcome!). For example the file browser should have a darker background but somehow it doesn't. I don't mind this after all, even if it's not what I intended.

One thing to keep in mind (I will mention this in the readme in some form) is that the colors are based on monokai pro which is a commercial theme for Sublime Text and VSCode. I think I should contact the author to avoid any complications.

[parkerault]

@bfulop I would suggest just changing some of the colors slightly to avoid issues with Monokai Pro, and you should probably not call it monokai pro.

[parkerault]

Looks great! The italic tags hit have the issue with the canvas renderer cutting off characters but other than that it looks lovely. Maybe it would be a good idea to turn off the italics until #1252 is resolved, and change the name to monokai-oni or something?

[parkerault]

@bfulop I can't make an issue on your repo, so I'll leave it here: I think you need to move the package.json and colors directory to the root of the project; if git clone it as-is, oni doesn't pick up the theme; I need to move the monokaipro directory to plugins for it to work.

[bfulop]

@parkerault, yes, we can call it monikai ! 😅

I will update the repo, just put it up quickly before leaving from work.

I think the best would be to contact the original author. In his commercial theme, there's lots more stuff: 5 color variations, UI customisations and file icons. So I don't think just grabbing the colors would go against his license. It would be better to get his approval/support, so that later he may get on board and further improve the Oni Vim theme.

Strange, I don't have cut off italics issue with my font. I'm using (and in fact totally in love with) the mononoki font.

[bfulop]

So I did contact the author of Monokai Pro, just to make sure we're not burning any bridges (if that's the right expression here).

[bryphe]

Wonderful! Thank you for doing that, @bfulop 💯

[parkerault]

@bfulop did you take down the repository? Any plans on bringing your theme into oni?

[bfulop]

Ah sorry, @parkerault, I contacted the original author of the theme, and was (and still is) waiting for his reply.

I will put it back up as Monokai Hobby to differentiate it from the Pro version–the hobby version only has a few colors, only one color scheme (instead of 5 in the Pro) and no file icons. Hopefully this will be enough of a distinction.