Feature request: Code highlight

[rogercarrijo]

It would be very good to add code highlighting as it happens in chatGPT.

I changed the code using the same libraries you used and the result was this:

To allow this just import the library import { Prisma } from '@mantine/prism'; and changed the code, as below:

                code: ({ node, inline, className, children, ...props }) =>
                  inline ? (
                    <Code {...props} children={children} />
                  ) : (
                    <Box sx={{ position: "relative" }}>
                      {className ? (
                        <Prism
                          language={
                            className.replace("language-", "") as Language
                          }
                        >
                          {getCode(children)}
                        </Prism>
                      ) : (
                        <Code block {...props} children={children} />
                      )}

[GromNaN]

How can we detect the langage of the code sample?

[thavelick]

highlight.js supports syntax highlighting with language detection

[thavelick]

Made a quick PR for this!: https://github.com/deiucanta/chatpad/pull/54

[thavelick]

Note, poking around in the developer console for ChatGPT, it seems like they're using hljs too. This means, with the above PR we should have the same quality (or lack thereof) of highlighting as they do!

[OctopBP]

Made another implementation before I saw this. Maybe it will be useful too https://github.com/deiucanta/chatpad/pull/68

[OctopBP]

Add support for almost all languages

[OctopBP]

Hey @deiucanta! Can you please check this?