[Guida] Steemit formattare il testo con Markdown e HTML

in #ita4 years ago (edited)

Spesso si pone il problema di come formattare il testo su Steemit, il suo editor non è intuitivo, non ci sono opzioni per formattare il testo (speriamo che ne aggiungano la possibilità.

Se vogliamo rendere un articolo bello esteticamente, che colpisca l'occhio dobbiamo per forza ricorre al Markdown o al HTML.



Titoli

Per regolare la grandezza di un titolo o sottotitolo si usa il # (cancelletto) va anteposto al titolo da 1 a 6 volte, più se ne mettono e più piccolo sarà il testo.

CodiceRisultato
# H1

Titolo

## H2

Titolo

### H3

Titolo

#### H4

Titolo

#####H5
Titolo

Dare enfasi al testo

Per dare enfasi al testo si usa il grassetto il corsivo e altri, sotto trovate degli esempi.

CodiceRisultato
**grassetto**grassetto
*corsivo*corsivo
**grassetto e _corsivo insieme_**grassetto e corsivo insieme
~~cancellato~~cancellato

Il testo quotato

Utile per citazioni o documenti in doppia lingua, si antepone il simbolo > (maggiore) prima del testo, esempio:

Codice:
> Citazione

Risultato:

Citazione

Liste

Per fare delle liste possiamo procedere anteponendo o il carattere - (meno) o * (asterisco), esempio:

Codice:

* Oggetto 1
* Oggetto 2
* ...

Risultato:

  • Oggetto 1
  • Oggetto 2
  • ...

Oppure con i numeri puntati:

Codice:

1. Oggetto 1
2. Oggetto 2
3. ...

Risultato:

  1. Oggetto 1
  2. Oggetto 2
  3. ...

Si possono anche annidare.

Codice:

`* Elemento 1
1. sub elemento 1
a. sub sub elemento a

  • Elemento 2`

Risultato:

  • Elemento 1
    1. sub elemento 1
      a. sub sub elemento a
  • Elemento 2

Elenchi delle attività


Codice:

- [x] Pagare la bolletta
- [ ] Andare dal fruttivendolo
- [ ] ...

Risultato:

  • [x] Pagare la bolletta
  • [ ] Andare dal fruttivendolo
  • [ ] ...

I link

Per linkare un testo ad esempio per i crediti di foto o come riferimento a fonti o altri articoli.
Tra le parentesi quadre mettete il testo da visualizzare e tra quelle tonte il link.

Codice:

[Google](https://www.google.it/?gws_rd=ssl)

Risultato:

Google

Tabelle

Utili in articoli in doppia lingua o anche per incasellare foto.

È possibile creare tabelle assemblando un elenco di parole e dividendole con i trattini - (per la prima riga) e separando ciascuna colonna con il simbolo | (pipe).

Se in una cella mettete il link ad una immagine si vedrà e potete affiancarne due o più mettendo i collegamenti in caselle adiacenti.

Codice:

Colonna 1| Colonna 2
------------ | -------------
contenuto 1| contenuto 2
immagine 1| immagine 2

Risultato:

Colonna 1Colonna 2
contenuto 1contenuto 2
immagine 1immagine 2

HTML

Se il markdown non funziona come dovrebbe o non troviamo la funzione che ci interessa possiamo provare ad utilizzare l'HTML.

Grassetto
Si usa il tag <b> si apre prima del testo e si chiude con </b>

Esempio:
<b>grassetto</b>

Risultato:
grassetto

Altri tag sono:

Per i titoli si usa il tag <h1>testo</h1> i livelli sono come quelli spiegati per il markdown quindi H2 sarà più piccolo di H1 ...

Altri esempi:

TagEffetto
<b>...</b>grassetto
<i>...</i>italico
<sup>...</sup>2potenza
<del>...</del>cancellato

Per dividere il testo in due colonne si può usare:

Codice:
<div class=pull-left>
<b>English text</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis mattis neque. Aenean sollicitudin neque ipsum, eu feugiat nunc porta non. Nulla ut molestie ligula, vitae vehicula tortor. Duis non porta dolor, ac condimentum massa. Ut vulputate sem a ipsum cursus tempus. Etiam volutpat et justo at vulputate. Donec facilisis nisi ac viverra vulputate. Ut fermentum massa eleifend tortor ornare, quis scelerisque felis fermentum. Nulla tristique neque euismod nulla tristique pharetra eget vitae ante. Praesent mattis tempor dolor maximus hendrerit. Nunc non dui at lectus bibendum aliquam vitae ac justo.
</div>

<div class=pull-left>
<b>Testo in italiano</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis mattis neque. Aenean sollicitudin neque ipsum, eu feugiat nunc porta non. Nulla ut molestie ligula, vitae vehicula tortor. Duis non porta dolor, ac condimentum massa. Ut vulputate sem a ipsum cursus tempus. Etiam volutpat et justo at vulputate. Donec facilisis nisi ac viverra vulputate. Ut fermentum massa eleifend tortor ornare, quis scelerisque felis fermentum. Nulla tristique neque euismod nulla tristique pharetra eget vitae ante. Praesent mattis tempor dolor maximus hendrerit. Nunc non dui at lectus bibendum aliquam vitae ac justo.
</div>

Risultato:

English text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis mattis neque. Aenean sollicitudin neque ipsum, eu feugiat nunc porta non. Nulla ut molestie ligula, vitae vehicula tortor. Duis non porta dolor, ac condimentum massa. Ut vulputate sem a ipsum cursus tempus. Etiam volutpat et justo at vulputate. Donec facilisis nisi ac viverra vulputate. Ut fermentum massa eleifend tortor ornare, quis scelerisque felis fermentum. Nulla tristique neque euismod nulla tristique pharetra eget vitae ante. Praesent mattis tempor dolor maximus hendrerit. Nunc non dui at lectus bibendum aliquam vitae ac justo.
Testo in italiano Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis mattis neque. Aenean sollicitudin neque ipsum, eu feugiat nunc porta non. Nulla ut molestie ligula, vitae vehicula tortor. Duis non porta dolor, ac condimentum massa. Ut vulputate sem a ipsum cursus tempus. Etiam volutpat et justo at vulputate. Donec facilisis nisi ac viverra vulputate. Ut fermentum massa eleifend tortor ornare, quis scelerisque felis fermentum. Nulla tristique neque euismod nulla tristique pharetra eget vitae ante. Praesent mattis tempor dolor maximus hendrerit. Nunc non dui at lectus bibendum aliquam vitae ac justo.

Spero si essere di aiuto con questo post, sicuramente c'è molto altro da dire.

Steemit sembra non essere compatibile al 100% con le istruzioni per il markdown che si trovano e non tutto il codice html da il risultato sperato. Bisogna fare dell prove prima combinando vari comandi.

Attenzione agli spazi uno in più, un in meno o nel posto sbagliato possono sconvolgere buona parte dell'impaginazione.

Buoni post a tutti!


@AlexZicky - Upvote - Follow - Comment - Restreem


Sort:  

Ottima guida in Italiano.

Grazie! 😊

Markdown spiegato molto bene...e in Italiano!! A+++

Ecco, mi mancava il cancellato: grazie Alex!

@remind.bot 8 hour

Mentioning and replying to you here on Thu, 03 May 2018 15:03:11 GMT to remind you of this post.
Please consider upvoting this comment to keep this service running.

Reminding @amico of this post as requested!
Please consider upvoting this comment to keep this service running.

Molto utile grazie!

Grazie mille! Utilissimo!

...molto utile per tutti 👍

Ottima guida grazie! Metterò in pratica i tuoi consigli già dal post di domani

Grazie mille del post, spero possa essermi utile nei futuri post, tu come hai imparato le varie tecniche di formattazione?

Grazie @alreadytaken,

Ho cercato su google e provato sul editor di steemit per vedere quello che funzionava, putroppo molti comandi che si trovano non funzionano qui.

This post recieved an upvote from minnowpond. If you would like to recieve upvotes from minnowpond on all your posts, simply FOLLOW @minnowpond Please consider upvoting this comment as this project is supported only by your upvotes!

Utilissimo grazie :)

Simile a Latex come formattazione. Bella guida, grazie

Veramente molto utile, grazie mille!

Cercavo una guida markdown in italiano. Grazie @alexzicky!!

Grazie per la guida, davvero molto utile!

Fai sempre post molto utili!!! Resteem e upvotato!!

Come rimpicciolire la grandezza di un testo?
Ad esempio sotto l'immagine vorrei che apparissero di una dimensione minore rispetto all'articolo, le info riguardo l'immagine (C00 e link)
Grazie per questa guida 🤗