apply syntax highlighting to a piece of text which may contain codeblocks

I have a string of text, this string is multiline and it may contain a code block enclosed within triple backticks. It may also have an inline code string. The location of these code blocks is not known (it may be at the end of string or in the middle of string), the language of these code blocks is known. For example:

This is normal text
``
if __name__ == __main__:
    print('hello')
``

(I used double backticks instead of triple, couldn’t figure out how to render triple backticks inside triple backticks on stackoverflow, but in my string it is always triple backticks)

How can I apply syntax highlighting to the code block while keeping the normal text outside of syntax highlighting. Essentially I want it to look like, how this question looks like on the stackoverflow, with code block in a separate block. I would also like to add a copy button to the code block and show the language of code block.

(I am using svelte and tailwindcss for the front end)

What I have already tried:

1. I have tried markdown-it package with highlight.js. This does most of the part, somehow the code comes out without syntax highlighting (my guess is there is some clash between highligh.js css classes and tailwiind css classes). Also this generates the whole thing in single component, which makes it difficult to separate out the code block to further customise it.
2. I also looked into CodeBlocks from skeletonui but it expects the only the code string and not the normal text. And I couldn’t figure how to separate normal text from code text without knowing the location of latter in advance.