Code highlighting is not working

[jaydeepw]

Describe the bug A clear and concise description of what the bug is. When I install the dependencies successuflly and run npm run dev, the web app pops up in the browser successfully.

But when I goto http://localhost:3001/posts/markdown-reference I dont see correct highlighting of the code that is present in the mardown.

Check images attached

To Reproduce Steps to reproduce the behavior:

1. Run npm run dev
2. Go to /posts/markdown-reference
3. Scroll down to the header named JSX or HTML
4. The code sample is not highlighted

Expected behavior In step no. 4 above, the code sample should be highlighted.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS Sonoma 14.1
• Browser Brave v1.73.89, Chrome latest

[sandypockets]

Hi @jaydeepw

Thanks for opening this issue. The syntax highlighting should now be fixed!

Closing this issue, but feel free to reopen if there's anything else

[jaydeepw]

Thanks, sounds good.

[jaydeepw]

I think the issue is still not fixed. I did a fresh clone of the repo and installed the deps and gave it a spin.

However, I still dont see the right behavior. Please check the attached .gif

[sandypockets]

Thanks for sending over this gif. I just did a fresh clone myself and it worked without issue (in an incognito tab).

I noticed in your gif that the text, particularly the header navigation, and the headings, is using what looks like OS fallback fonts, and doesn't match the fonts that are used in the project (visible in the demo, here).

Screenshot from your gif

Screenshot of demo

The demo is a live instance of this repo (hosted on Vercel), so if the demo website is working normally, then cloning this repo should work normally too.

With all that in mind, it seems like the issue might be unrelated to the syntax highlighting, and that there might be some other configuration on your machine or browser that's preventing the page from fully loading, causing some font imports or package imports to fail.

Can you tell me a bit more about your set up, like what browser and version you're using, as well as which version of Node you're using? Do you see any errors in the console or failures in the network tab in your browser?

[jaydeepw]

I noticed, after reloading the page I get the results that you are talking about. But on first load, it shows like my GIF image shows.

I am attaching another GIF for more clarity.

Can you tell me a bit more about your set up, like what browser and version you're using, as well as which version of Node you're using? Do you see any errors in the console or failures in the network tab in your browser?

I am using Brave, but same problem with Chrome too. I am using node v20.18.0 I dont see any errors in the console on the first load neither on refresh.

Also, the demo hosted on Vercel behaves the same like in my attached GIF in this comment. Interesting problem.

[sandypockets]

Thanks for including this and testing out the demo! It seems that the issue is indeed still unresolved, as I was able to replicate the error on the demo.

It seems the issue is actually with my machine, and not yours. Must have some cached content or something. I'll continue investigating and circle back once I have a solution in the works.

[jaydeepw]

Sounds good. Please update when ready, I will test out and confirm.