Code higlight for the response code blocks

[jameszu]

Related #2

The code blocks from chatGPT responses can now be automatically highlighted in the corresponding language.

Thx to @jjroley for the awesome tip : )

Cheers,
James

[wong2]

Hi, is your branch behind the main branch? The project does not use markdown-it anymore

[jameszu]

Ah yes you are right I did not update it. I will see if there are other ways

[wong2]

Does rehype-highlight work for you?

[jameszu]

Almost there, right now it doesn't have that auto detection thing like previous hightlight.js, but it should have one, I will let you know once I got it working : )

[jameszu]

Hi @wong2

It should be all good for now.
A minor issue is that the hightlight.js CSS file has a default padding of 1em, which makes the code blocks look like this.

Hope that is not a big issue. I can look into it if you want the code blocks to have the same padding as before .

Cheers

[wong2]

I'd like to remove the padding, you can overwrite it in styles.css

[wong2]

Does the default theme work in dark mode?

[wong2]

Don't do this, this might affect other elements using this class in the page. Put it inside .chat-gpt-container

[jameszu]

Does this looks better?

[wong2]

that's right

[jameszu]

1. Padding is now working
2. Unfortunately, the default CSS does not work well in dark mode.
   I tried to include the dark theme CSS file through an import in the style.css file at @ media (prefers-color-scheme: dark), but esbuild does not support conditional CSS import as for this issue.

One way would be adding all the dark CSS code into the media query for dark mode, but that would include lots of lines of code. 60 lines after prettier formatting.

Another way might require change of CSS files as the following:

I'm open to more ideas : )

[wong2]

Hi, I solved the theme problem here: cc92f92