@ cannot be the first character of a line inside a code snippet

[itscesarvillar]

Description

The character '@' cannot be the first character of a line inside a code snippet.

example:

```css
‌@media (max-width: 768px) {
  .hiddenOnSmallScreen {
    display: none !important;
  }
}
`` `

Expected outcome

the following text: ‌@media (max-width: 768px) { .hiddenOnSmallScreen { display: none !important; } } coloured accordingly to the language.

Actual outcome

```css

Steps to reproduce

1. Putting a '@' as the first character inside a snippet code in your component documentation.
2. Enter in your web documentation.
3. See that your code snippet is not there.

   Browsers Affected

all browsers are affected

Workaround

You can skip this behaviour by putting the 'Zero-width non-joiner', (which is the following, embraced in brackets [ ]) before '@'.

[caranicas]

This isn't only an issue when it is the first line of a code block. I have a comment displaying how to use a custom style with the an @apply and @ breaks it.

My snippet

    <style is="custom-style">
      foo-component {
        @apply  --one-comp-basic-mixin;
      }
    </style>
    <foo-component></foo-component>

and all you see are the three backticks.

I was unfamiliar with the "Zero-width non-joiner" so I will look into it, but I had just added a tilda

~@apply  --one-comp-basic-mixin;

with a note, and then it displays properly.