Markdown e allineamento dell'immagine
https://stackoverflow.com/questions/255170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto creando un sito che pubblica articoli in numeri ogni mese. È semplice e penso che usare un editor Markdown (come quello WMD qui nello Stack < !> nbsp; Overflow) sarebbe perfetto.
Tuttavia, hanno bisogno della possibilità di avere le immagini allineate a destra in un dato paragrafo .
Non riesco a vedere un modo per farlo con il sistema attuale - è possibile?
Soluzione
Puoi incorporare HTML in Markdown, quindi puoi fare qualcosa del genere:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Altri suggerimenti
Molti Markdown " extra " i processori supportano gli attributi. Quindi puoi includere un nome di classe così (PHP Markdown Extra):
{.callout}
o, in alternativa (Maruku, Kramdown , Python Markdown ):
{: .callout}
Quindi, ovviamente, puoi usare un foglio di stile nel modo corretto:
.callout {
float: right;
}
Se il tuo supporta questa sintassi, ti offre il meglio di entrambi i mondi: nessun markup incorporato e un foglio di stile abbastanza astratto da non dover essere modificato dal tuo editor di contenuti.
Ho trovato una bella soluzione in puro Markdown con un po ' CSS & nbsp; 3 hack :-)
Segui l'immagine float del codice CSS 3 a sinistra o a destra, quando image alt termina con < o >.
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
Incorporare CSS non è valido:
CSS in un altro file:
img[alt=Flowers] { float: right; }
Mi piace essere super pigro usando le tabelle per allineare le immagini con la sintassi del tubo verticale (|). Questo è supportato da alcuni sapori Markdown (ed è anche supportato da Textile se galleggia la tua barca):
| I am text to the left |  |
o
|  | I am text to the right |
Non è la soluzione più flessibile, ma è buona per la maggior parte delle mie semplici esigenze, è facile da leggere in formato markdown e non è necessario ricordare alcun CSS o HTML non elaborato.
Ho un'alternativa ai metodi sopra che hanno usato il tag ALT e un selettore CSS sul tag alt ... Invece, aggiungi un hash URL come questo:
Prima il tuo codice immagine Markdown:
Nota l'URL aggiunto #center.
Ora aggiungi questa regola nei CSS usando CSS & nbsp; 3 selettori di attributi per selezionare le immagini con un certo percorso.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
Dovresti essere in grado di utilizzare un hash URL come questo quasi come definire un nome di classe e non è un uso improprio del tag ALT come alcune persone hanno commentato per quella soluzione. Inoltre non richiede alcuna estensione aggiuntiva. Fallo per float a destra e a sinistra o per qualsiasi altro stile tu possa desiderare.
Ancora più pulito sarebbe semplicemente inserire p#given img { float: right } nel foglio di stile, oppure nei <head> e racchiuso tra style i tag. Quindi, basta usare il markdown .
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
L'attributo markdown possibilità all'interno di Markdown.
Mi è piaciuto la risposta di learnvst sull'uso delle tabelle perché è abbastanza leggibile (che è uno scopo della stesura di Markdown).
Tuttavia, nel caso del parser Markdown di GitBook ho dovuto, oltre a una riga di intestazione vuota, aggiungere una riga di separazione sotto di essa, affinché la tabella fosse riconosciuta e resa correttamente:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Le linee di separazione devono includere almeno tre trattini ---.
Se lo implementi in Python, c'è un'estensione che ti consente di aggiungere Coppie chiave / valore HTML ed etichette class / id. La sintassi è per questo:
{: style="float:right"}
Oppure, se lo stile incorporato non fa galleggiare la tua barca,
{: .floatright}
con un foglio di stile corrispondente, stylish.css:
.floatright {
float: right;
/* etc. */
}
Come ha detto greg puoi incorporare contenuti HTML in Markdown, ma uno dei punti di Markdown è quello di evitare di dover possedere una conoscenza approfondita (o qualsiasi altra) del markup CSS / HTML, giusto? Questo è quello che faccio:
Nel mio file Markdown ho semplicemente dato istruzioni a tutti i miei editor wiki di incorporare le immagini con un aspetto simile al seguente:
'<div> // Put image here </div>`
(ovviamente .. non sanno cosa significa <div>, ma questo non dovrebbe importare)
Quindi il file Markdown è simile al seguente:
<div>
![optional image description][1]
</div>
[1]: /image/path
E nel contenuto CSS che avvolge l'intera pagina posso fare quello che voglio con il tag immagine:
img {
float: right;
}
Ovviamente puoi fare di più con il contenuto CSS ... (in questo caso particolare, il wrapping del tag img con div impedisce ad altri testi di avvolgere l'immagine ... questo è solo un esempio, però), ma IMHO il punto di Markdown è che non vuoi che persone potenzialmente non tecniche entrino nei dettagli di CSS / HTML .. spetta a te come sviluppatore web creare i tuoi contenuti CSS che avvolge la pagina nel modo più generico e pulito possibile, ma poi i tuoi editor non devono saperlo.
Avevo lo stesso compito e ho allineato le mie immagini a destra aggiungendo questo:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
Per allineare l'immagine a sinistra o al centro, sostituisci
<div style="text-align: right">
con
<div style="text-align: center">
<div style="text-align: left">
Il più semplice è avvolgere l'immagine in un tag centrale, in questo modo ...
<center></center>
Qualsiasi cosa abbia a che fare con Markdown può essere testata qui - http://daringfireball.net/projects/markdown/ dingus
Certo, <center> potrebbe essere deprecato, ma è semplice e funziona!
