@example

Categories: css, preprocessor

Status: Partial

Aliases: @markup

For CSS: provides HTML code example which describes how to use correponding CSS selector. The matching element doesn’t need to be root HTML element in example.

Not implemented For preprocessors: provides code snippet demonstrating mixin or function usage.

Can be multiline.

Not implemented Single docblock can have multiple examples.

Handling in documentor

If the first line of example is preceded by whitespace indent, the same indent is wiped off from the beginning of each example line.

For CSS

StyleDoc documentor creates both HTML example and live preview for each showcase item, based on this value (and modifying matching elements by modifiers provided).

Not implemented If multiple examples are provided, they are displayed according the following rules: 1. base showcase item always takes the first example (aka base example) 2. each modifier item takes the first matching example other than base (aka secondary example) 3. if no secondary examples matches, modifier item takes base example

For preprocessors

Not implemented Example code is just displayed in correspondent box

Examples

@base button Normal button
@example <button>Button text</button>

@base       figure      In-text illustration
@modifier   .verbose    Illustation with caption

@example
    <figure>
        <img src="mypic.jpg" alt="">
    </figure>

@example
    <figure class="verbose">
        <img src="anotherpic.jpg" alt="">
        <figcaption>Picture description</figcaption>
    </figure>

@base li.essential List item with important information
@example
    <ul>
        <li>Don't read me</li>
        <li>Miss me</li>
        <li class="essential">But not me!</li>
        <li>Oh, just forget about me</li>
    </ul>

See also

• @markup
• @base