MovingBlocks / movingblocks.github.com

Terasology's Homepage hosted as a GitHub Page. On the page you can download Terasology, view related videos, go to the forum, etc.
https://terasology.org/
MIT License
7 stars 17 forks source link

Code highlighting #243

Open Rukki13 opened 4 months ago

Rukki13 commented 4 months ago

Fixes #211

jdrueckert commented 4 months ago

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?

sonarcloud[bot] commented 4 months ago

Quality Gate Passed 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 commented 4 months ago

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 commented 3 months ago

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.