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

Add syntax highlight with gatsby-remark-highlights #1

Closed
azdanov opened this issue Aug 24, 2019 · 8 comments
Closed

Add syntax highlight with gatsby-remark-highlights #1

azdanov opened this issue Aug 24, 2019 · 8 comments

Comments

@azdanov
Copy link

azdanov commented Aug 24, 2019

I'd like to create an issue to have a place for discussing this feature.

For reference:

@azdanov
Copy link
Author

azdanov commented Aug 24, 2019

Could you provide more information about this? As I see right now the plugin is working as expected. Of course, it's been a while since I've worked in React and Gatsby, so I might be misjudging.

Screen Shot 2019-08-24 at 05 36 47

@RobertMyles
Copy link
Owner

RobertMyles commented Aug 26, 2019

Hi Anton,

Thanks for checking this out for me!
Yes, the highlighting seems to work in general, but I would like to change the theme used for the syntax highlighting, by using an Atom theme as described here: https://github.com/amitpatra/gatsby-remark-highlights

I have the CSS from the Atom less file, I'm just not sure how to incorporate it into my Gatsby site. IO see you used styled-components' createGlobalStyle -- is that the best way to do it?

Thanks again,
Robert

@azdanov
Copy link
Author

azdanov commented Aug 28, 2019

Basically, I took an Atom less file, and converted it to scss, changing some things here and there. Don't remember which changes were necessary. And yes, it's injected via global styles.

Which Atom theme you want to use? I can try to play around on my own and see how it works.

@RobertMyles
Copy link
Owner

RobertMyles commented Aug 28, 2019

Hi Anton,
Thanks again for helping with this!
The theme I'd like to use is seti: https://atom.io/themes/seti-syntax

@azdanov
Copy link
Author

azdanov commented Aug 30, 2019

I have some issue when I try to convert less to css for seti-syntax. Didn't have much time to investigate.

Basically I need to compile the less and include the generated classes in global style .css file/function. Tried doing a similar compilation with https://github.com/atom/one-dark-syntax which worked without any issues. I guess something is wrong with seti-syntax.

What I did was: http://lesscss.org/usage/#command-line-usage-command-line-usage. Just install the lessc and convert index.less to index.css.

@RobertMyles
Copy link
Owner

RobertMyles commented Aug 30, 2019

Ok, great, Anton, thanks for the help! I was able to convert it to CSS, and I'll try a global style like you suggested earlier. Thanks again for all your help!

@azdanov
Copy link
Author

azdanov commented Aug 31, 2019

Tell me if you need any more help. I'll be glad to assist.

@RobertMyles
Copy link
Owner

RobertMyles commented Sep 1, 2019

Will do, thanks a million.

@azdanov azdanov closed this as completed Sep 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants