Code highlighting

[Rukki13]

Fixes #211

[jdrueckert]

The screenshot you shared in #211 indeed looks better.
Looking at the code I think this makes sense, but I'm not a front-end person, so I cannot be certain. Also, I'd like to test this out locally before merging. I'll try to find time to do that this weekend, not sure I will though, so apologies as it might take another week before I get to merge this.

[jdrueckert]

Sonar complains about this and I'm not familiar with this syntax. Can you tell me what this does / is supposed to do?

[jdrueckert]

Tests out fine, but I'm still curious about that <style jsx> tag, especially as Sonar and eslint identify it as an issue.
@Rukki13 can you please explain the purpose and necessity of the jsx property to me?

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[Rukki13]

Hi, sorry for the late reply. The style jsx just makes every html element of the class "gatsby-highlight" bigger. I couldn't find another way of doing it from the settings. I think something somewhere is overriding the font size so i had to add the style jsx thing.

[jdrueckert]

Hi, sorry for the late reply. The style jsx just makes every html element of the class "gatsby-highlight" bigger. I couldn't find another way of doing it from the settings. I think something somewhere is overriding the font size so i had to add the style jsx thing.

So we're using styled jsx here, I see.
According to their docs, we should be able to fix the ESLint problem in our .eslintrc.json via "settings": {"import/core-modules": ["styled-jsx/css"] }. Unfortunately for me this didn't do the trick locally... can you try on your end whether this works for you and resolves the error that is currently displayed when running yarn run lint:js?

If this doesn't work on your side either, I think we can make ESLint ignore the line via {/* eslint-disable-next-line react/no-unknown-property */} in a new line above the style tag.