Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Codeimage theme #174

Open
arstnei0 opened this issue Dec 18, 2022 · 11 comments
Open

Codeimage theme #174

arstnei0 opened this issue Dec 18, 2022 · 11 comments
Assignees
Labels

Comments

@arstnei0
Copy link

How about we build a theme for Codeimage?

@daltonmenezes daltonmenezes added enhancement New feature or request help wanted Extra attention is needed port-request codeimage labels Dec 18, 2022
@daltonmenezes
Copy link
Owner

Hi @zihan-ch , it would be really cool. Are you interested in doing this?

@arstnei0
Copy link
Author

Of course! I can't wait for it! I'm working on it now.

@arstnei0
Copy link
Author

It's here!

@arstnei0
Copy link
Author

I'm not quite familiar with code highlighting stuff. The actual effect isn't really as well as Aura Dark in VS Code.

@riccardoperra
Copy link

riccardoperra commented Dec 18, 2022

Hey 😄 I noticed now that issue. I would recommend to do the porting first for CodeMirror 6 highlighting (which codeimage uses under the hood)

This allows to use the theme also outside CodeImage 😄 then the integration should be easier

@daltonmenezes
Copy link
Owner

Hi @zihan-ch , it looks good to me. We ended up having to deal with the styling limitations of the target, which in this case is CodeMirror.

Two important points:

  1. In addition to direct PR in the CodeImage repository, it is important to keep the port here in our repository also using the Aura generator, you can easily convert using the CLI with the tokenize command to transform hexadecimal values into tokens.

  2. The point mentioned by @riccardoperra is very valid, and we can take benefit from two ports (CodeImage and CodeMirror) easily.

What do you think?

@riccardoperra
Copy link

riccardoperra commented Dec 18, 2022

In case of the CodeMirror integration, we have to deal with the dependency @lezer/language and @codemirror/language ...should we have to install them? or we have to provide only the file so anyone can copy the content through this repo? What about publishing a package on npm?

@daltonmenezes
Copy link
Owner

@riccardoperra the npm package solution looks great for me!

@daltonmenezes
Copy link
Owner

@riccardoperra it will be good to make like vscode port, where we have the npm package published and the theme files here where the Aura generator can apply the token conversion and generate the final theme files ready to publish

@riccardoperra
Copy link

riccardoperra commented Dec 18, 2022

Ok, I'll look at it. What's the best solution in order to publish the built file in your repo?

Looking at the index.ts i was thinking to use rollup to build the package then save the output files to the "extra" folders with copyExtraFiles. Is it ok or you prefer another approach?

@daltonmenezes
Copy link
Owner

@riccardoperra the copyExtraFiles is to copy files don't need any transformation to be copied as it is, the best approach to make an Aura port is using the createPort function to make the proper transformations like tokens to final values. We need that because if any color value changes in Aura color scheme, all ports will be updated easily.

You also can take a look at docs section

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants