Recently, I've noticed that there are two scenarios in which my VSCode doesn't properly style the content within my template strings. One is when I'm writing CSS in a JavaScript file, and the other is when I'm fetching data from GraphQL. Let me elaborate!
Below, you'll find my code along with the current output:
const SyleHero = styled.header`
min-height: 60vh;
background: url("./images/defaultBcg.jpeg") center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
`;Inside the backticks, I can see the text appearing in green as shown here:
https://i.sstatic.net/zXldW.png
However, the desired result should look like this:
https://i.sstatic.net/7QCVe.png
Although my code works correctly as it is, I feel it would be more convenient to have it displayed as in the image above. Does anyone know how I can achieve the same visual effect?
Thank you all for your help!