straker/livingcss

Using @ symbol in <pre> code snippets.

Closed this issue · 2 comments

Is there an alternative way to display an @ symbol in documentation text?

In a piece of documentation outside of a typical @example, I'm trying to demonstrate how to use a particular sass mixin, like:

/**
* Here's an example using the `theme()` mixin:
* ```css
* .my-selector {
*   @include theme() {
*     background-color: color('shade');
*   }
* }
* ```
*/

But the use of the @ here breaks the output.

Thanks in advance!

Does it work if you use the HTML entity &#64; instead of @? The problem is all the @ are handled by the tag parser so it's the one that's treating it as a tag. If it doesn't work, I'll have to create a fix that handles it similar to uses in @code by replacing the HTML entity with the actual @.

Actually I got it with (which I got from the apple emoji selector, haha). I believe the html entity would be shown as is in the <pre> tag. I just made a note about not copy/pasting that specific character.