search

swashata / vscode-beautiful-ui

A set of beautiful color themes for VSCode, inspired by Sublime DA UI.
https://vscbui.rocks/
MIT License
60 stars 7 forks source link

Using Monaco Editor for the website preview #1

Closed swashata closed 4 years ago

swashata commented 6 years ago

As discussed in ihodev/sublime-da-ui#47

Currently I am using ace editor for previewing the color themes in browser. While it works great, there are several limitations especially with the tokens.

Instead we can use the monaco editor which powers VSCode itself. But there are a few issues.

  1. Lack of documentation and a proper way to create theme Microsoft/monaco-editor#207
  2. I believe the code that converts VSCode theme into monaco theme, is placed inside vscode repo and it is freakishly hard to extract it in a meaningful way.

If anybody would want to conduct some experiment, feel free to do so. Here are a few tips which I believe would come in handy.

  1. Use the react wrapper for monaco https://github.com/superRaytin/react-monaco-editor
  2. Eject the create-react-app inside site/ with yarn eject and place the custom webpack plugin needed for monaco.
  3. Check this. I am not sure how other tmTheme token would play with the ruleset. I am not even sure how vscode does it.
  4. What would be really awesome is, if we can somehow feed the rules from the generated *-color-theme.json files to monaco. The tokens and foreground/fontStyle etc are already there. If only monaco could support it directly the conversion would be pain free. But I don't think this is the case.

All this being said, personally I am not able to spend my time on this. But if you want to conduct some insane experiment and in return receive a superb round of applause please do so.

/cc @acheronfail

brownbl1 commented 6 years ago

A good start would be to understand exactly how the tmTheme format is converted to json for consumption by vscode/monaco currently within VSCode.

I would currently be happy with an offline process for converting tmTheme to monaco format json if it is not possible to do it in-browser. Could anyone point us in the right direction?

EDIT https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_create-a-new-color-theme

The above looks promising, if anyone wants to explore this further.

swashata commented 6 years ago

Hi,

tmTheme is vscode specific and I don't think it is monaco editor specific. VSCode internally converts tmTheme into monaco token style.

If you are confused between a standard .tmTheme file and a VSCode -color-theme.json file, then just try to think of them as different ways of declaring/defining scope styles. With .tmTheme we use XML like structure and with .json we put the scope definition under tokenColors hash.

All of the above are vscode specific. VSCode can use both json and tmTheme without any problem. Internally it will do something to style up the monaco editor (which has its own rule and doesn't understand .tmTheme or -color-theme.json format). We just need to find out what it does.

PS: May I ask what you are trying to achieve here? Maybe I can help.

orta commented 4 years ago

You could use shiki: http://shiki.matsu.io - if you're ok with it being read only, we use it on the typescript website v2

swashata commented 4 years ago

This is great. Thank you very much 😄

swashata commented 4 years ago

The site is now using shiki.