pre tag do not show language syntax colors

I am writing a blog and getting the body of it as a html string and I want to inject in to my code like this

const Body = styled.div`
  margin: 1rem 0;

  img {
    margin: 1rem 0;
    max-width: 100%;
  }

  pre {
    width: 100%;
    padding: 1rem;
    margin: 1rem 0;
    line-height: 1.3rem;
    border-radius: 0.5rem;
    background-color: ${({ theme }) => theme.hover};
  }

  p {
    margin: 1rem 0;
    line-height: 2rem;
    font-size: 1.25rem;
  }
`

<Body dangerouslySetInnerHTML={{ __html: post.data.body }} />

in the post.data.body i have some code tags like the code element that stackoverflow uses to show code snippets, but it's not clored, it all the same color

and this is what i have when i inspect the code