Blocchi di Avviso, Successo e Informazioni

[2TapPrince]

Ciao,

Sto cercando un plugin o un’estensione markdown per blocchi di notifica. Bootstrap ha qualcosa di simile

Apprezzerei se ci fosse un plugin disponibile.

[simonk (Simon King)]

Puoi usare il supporto generico per wrapper bbcode, qualcosa del genere:

[wrap=success]
**Successo!** Il tuo messaggio è stato inviato con successo
[/wrap]

…che diventerà questo HTML:

<div class="d-wrap" data-wrap="success" dir="ltr">
  <p><strong>Successo!</strong> Il tuo messaggio è stato inviato con successo</p>
</div>

Puoi aggiungere CSS che seleziona .d-wrap[data-wrap="success"] per stilizzarlo.

Io uso questo:

@mixin admonition($color, $bgcolor, $bordercolor, $iconurl) {
    padding: 8px;
    padding-left: 4em;
    padding-right: 2em;
    color: $color;
    border-left: 5px solid $bordercolor;
    background-color: $bgcolor;
    background-image: url($iconurl);
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: 1em 1.25em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 1em;
}

.d-wrap[data-wrap="info"] {
    @include admonition(#084298, #cfe2ff, #b6d4fe, "/images/emoji/google/information_source.png");
}

.d-wrap[data-wrap="warning"] {
    @include admonition(#664d03, #fff3cd, #ffecb5, "/images/emoji/google/warning.png");
}

.d-wrap[data-wrap="danger"] {
    @include admonition(#842029, #f8d7da, #f5c2c7, "/images/emoji/google/stop_sign.png");
}

…il che mi permette di creare cose come questa:

[2TapPrince]

Geniale, grazie mille!

[2TapPrince]

Quindi ho provato ad aggiungere questo, mi manca qualcosa?

[simonk (Simon King)]

Il mio CSS ha aggiunto stili solo per info, warning e danger. Prova a cambiare [wrap=success] in [wrap=warning].

Dovrai definire il tuo stile per success.

[2TapPrince]

Sì, pensavo l’avessi programmato per essere plug and play.

Funziona perfettamente.