Add syntax highlight with gatsby-remark-highlights

[azdanov]

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

For reference:

• https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/
• https://www.gatsbyjs.org/packages/gatsby-remark-highlights/
• https://github.com/azdanov/azdanov.github.io/blob/master/src/styles/code.ts

[azdanov]

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.

[RobertMyles]

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]

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]

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

[azdanov]

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]

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]

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

[RobertMyles]

Will do, thanks a million.