Markdown e allineamento dell'immagine

191

Sto creando un sito che pubblica articoli in numeri ogni mese. È semplice e penso che usare un editor Markdown (come quello WMD qui in Stack 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?

html css markdown

— Jedidja
fonte

2

Perché non porre semplicemente la domanda senza "Sto aiutando un amico con un sito senza fini di lucro che pubblica articoli sui numeri ogni mese"?

— JGallardo

11

@JGallardo Perché volevo chiarire che non avevo il controllo completo sul sistema, né avevo la possibilità di acquistare alcun tipo di soluzione. Sono d'accordo che avrei potuto formulare diversamente la domanda.

— Jedidja,

1

Per quanto riguarda gli editor di markdown , puoi usare il grande stackedit.io/editor# , è fantastico scriverci :)

— AbdelHady,

1

@AbdelHady se solo fosse stato disponibile nel 2008 :)

— Jedidja,

1

@iPython Come può una domanda del 2008 essere un duplicato di una domanda posta 4 anni dopo (2012)?

— Jedidja,

196

Puoi incorporare HTML in Markdown, quindi puoi fare qualcosa del genere:

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

— Greg Hewgill
fonte

43

Puliscilo e standardizza rimuovendo il superfluo dive aggiungendo una barra di chiusura al imgtag, rispettivamente, cioè <<img style = "float: right" src = "whatever.jpg" />

— ma11hew28

Invece di divpreferire usare spanper il rientro in linea. Per il centraggio completo dei paragrafi divè buono o addirittura semplice p.

— Occhio

21

— Funziona

19

@MattDiPasquale Le barre di chiusura non sono necessarie. Questo è XHTML, non HTML.

— CaptSaltyJack il

ho provato questo per incorporare un'immagine in un post sul blog fantasma; usando <div style = "float: right"> <img ...> </div> hai fatto scorrere correttamente il seguente paragrafo attorno all'immagine, mentre <img style = "float: right" ...> inserisci il paragrafo e l'immagine in scatole affiancate.

— Martin DeMello,

58

Ho trovato una bella soluzione in puro Markdown con un piccolo trucco CSS 3 :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Segui l'immagine float del codice CSS 3 a sinistra o a destra, quando image alttermina con <o >.

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

— OzzyCzech
fonte

1

Dove dovrebbe essere collocato il CSS nella directory MkDocs? @YannDuran

— Ivan Huang,

2

@IvanHuang assicurati solo di aggiungere un file extra.css secondo la documentazione di MkDocs e di inserire il CSS in quel file.

— Yann Duran,

54

Molti processori Markdown "extra" supportano gli attributi. Quindi puoi includere un nome di classe così (PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

o, in alternativa (Maruku, Kramdown , Python Markdown ):

![Flowers](/flowers.jpeg){: .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.

— gerwitz
fonte

Quando scrivi tutto questo:! Fiori {: .callout} potresti anche aver scritto <img src = "/ flowers.jpeg" class = "callout" />

— lfalin

1

Sono d'accordo, ma Markdown è spesso scelto per utenti che non sono * alfabetizzati in ML, quindi non c'è motivo di preferire HTML a qualsiasi altra sintassi arbitraria.

— Gerwitz,

4

("Nessun motivo" ovviamente semplifica eccessivamente. Ci sono molte ragioni per cui UX potrebbe volere che i tuoi editor si avvicinino o allontanino dal rendering HTML finale. Oppure potresti essere contrario a introdurre una dipendenza HTML nei tuoi contenuti, se ho scelto Markdown per astrarre la tecnica di rendering.)

— Gerwitz,

33

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:

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

Nota l'URL aggiunto #center.

Ora aggiungi questa regola nei CSS usando i selettori di attributo CSS 3 per selezionare le immagini con un determinato 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. Fai uno per il float sia a destra che a sinistra o per qualsiasi altro stile tu possa desiderare.

— tremore
fonte

1

Esattamente quello che stavo cercando. Sei un salvatore di vita. Una cosa che vorrei aggiungere è `` h1 h2 {clear: both} `` `` Quindi il prossimo titolo inizia in una nuova riga (non si sovrappone all'immagine)

— bhar1red

sembra quello che sto cercando ma ... come faccio a creare un CSS? e come lo chiamo in Markdown?

— Tony D,

questa è anche un'ottima soluzione come la mia :)

— OzzyCzech

3

@OzzyCzech - no, non proprio, la tua soluzione abusa del tag "alt" dell'immagine che potrebbe essere dannoso per la conformità dell'accessibilità in una pagina, dove questa soluzione utilizza un approccio non invasivo tramite il tag src.

— tremore

24

L'incorporamento di CSS è negativo:

![Flowers](/flowers.jpeg)

CSS in un altro file:

img[alt=Flowers] { float: right; }

67

Che cosa? Ora all'improvviso devi modificare un file esterno ogni volta che cambi il contenuto del markdown? Non mi sembra una buona soluzione.

— Jordan Reiter,

9

@JordanReiter Tutti qui hanno scritto un programma composto da più di un file in cui la logica è diffusa / organizzata in molte posizioni. Lo facciamo apposta per manutenibilità. Perché è così dolorosamente e terribilmente diverso?

— z5h

8

Markdown consente agli utenti non programmatori di creare contenuti e non dovrebbe dipendere dai file a cui è necessario accedere direttamente e modificarli sul server. Un altro esempio: penso che sia del tutto normale codificare i nomi dei campi in un database nel tuo codice, ma un errore nel codificare in base al valore di un campo nel tuo database (cioè if product.name == 'Tulips') perché non puoi dipendere dal stabilità del valore. Tutto ciò che serve è qualcuno che cambia Flowersper Flowere improvvisamente quell'immagine salta fuori di vista. Inoltre, devono chiamarti ogni volta che aggiungono un'immagine!

— Jordan Reiter,

24

@cboettig Questo è un grave uso improprio del tag alt. Dovrebbe essere una descrizione testuale dell'immagine per le persone che non riescono a vedere l'immagine.

— Nathan Grigg,

5

Sono sorpreso che così tante persone piangano per questa soluzione. Questo è un bellissimo trucco, necessario per risolvere un problema per alcuni servizi di hosting. Il poster che ha dato questo bellissimo trucco è sparito ora e invece la comunità è lasciata con i cretini.

— Aaron Robinson,

22

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 è supportato anche da Textile se galleggia sulla tua barca):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

o

| ![Flowers](/flowers.jpeg) | 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.

— learnvst
fonte

2

Mi piace questo stile, molto markdown-y. Peccato che non funzioni su github (non ancora.)

— Eliot

3

Ho appena provato questa sintassi su GitHub e sembra funzionare ora.

— Ege Rubak,

6

Questo è un trucco interessante, ma utilizza in modo improprio tabelle per il layout. Benvenuti nel 1999.

— jxpx777,

3

Per il markdown al gusto di github, aggiungi una riga con |-|-|. Indica al parser che esiste una tabella e la prima riga è un'intestazione. Es: goo.gl/xUCRiK

— Kayla,

10

Anche più pulito sarebbe semplicemente quello di mettere p#given img { float: right }nel foglio di stile, o nel <head>e avvolto in styletag. Quindi, basta usare il markdown ![Alt text](/path/to/img.jpg).

— ma11hew28
fonte

8

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

La markdownpossibilità di attributo all'interno di Markdown.

— Peter Mortensen
fonte

1

Ha funzionato con me. Non sto usando Github. Grazie @raphox.

— Hugo Tavares,

Funziona bene con il parser PHP markdown vaniglia di michelf

— Ronan

2

Questa è la funzionalità Markdown Extra, che è inclusa in alcuni sistemi di gestione dei contenuti (ad esempio Drupal), ma non è inclusa la funzionalità in Markdown di per sé.

— Tim

7

Mi è piaciuta 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  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

Le linee di separazione devono includere almeno tre trattini ---.

— icarito
fonte

7

Se lo implementi in Python, esiste un'estensione che ti consente di aggiungere coppie chiave / valore HTML ed etichette class / id. La sintassi è per questo è:

![A picture of a cat](cat.png){: style="float:right"}

Oppure, se lo stile incorporato non fa galleggiare la tua barca,

![A picture of a cat](cat.png){: .floatright}

con un corrispondente foglio di stile, stylish.css:

.floatright {
    float: right;
    /* etc. */
}

— Jameh
fonte

2

Come ha detto Greg, è possibile incorporare contenuti HTML in Markdown, ma uno dei punti di Markdown è quello di evitare di avere una conoscenza approfondita (o qualsiasi) del markup CSS / HTML, giusto? Questo è ciò che faccio:

Nel mio file Markdown ho semplicemente incaricato tutti i miei editor wiki di incorporare avvolgere tutte le immagini con qualcosa che assomiglia a questo:

'<div> // Put image here  </div>`

(ovviamente .. non sanno cosa <div>significhi, ma 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, avvolgendo il imgtag con div si impedisce ad altro testo di spostarsi sull'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 rendere i tuoi contenuti CSS che avvolgono la pagina nel modo più generico e pulito possibile, ma poi ancora una volta i tuoi redattori non devono saperlo.

— abbood
fonte

1

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, sostituirla

<div style="text-align: right">

con

<div style="text-align: center">
<div style="text-align: left">

— Zuha Karim
fonte

Ho provato questo ma ora funziona .. l'immagine è allineata ma viene visualizzato il testo HTML.

— Fiza Khan,

-1

questo lavoro per me

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

— Andersonfrfilho
fonte

-16

Il più semplice è avvolgere l'immagine in un tag centrale, in questo modo ...

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Tutto ciò che ha a che fare con Markdown può essere testato qui - http://daringfireball.net/projects/markdown/dingus

Certo, <center>può essere deprecato, ma è semplice e funziona!

— yoyo
fonte

1

Ho appena notato che l'OP ha chiesto il giusto allineamento: stavo cercando di centrare un'immagine quando mi sono imbattuto in questa risposta.

— yoyo

14

No, non usare mai center.

— Jordan Reiter,

12

In effetti sto per schierarmi con @ yoyo— <center>ha senso. È deprecato dall'HTML perché l'HTML dovrebbe descrivere solo il contenuto; gli stili dovrebbero essere nei fogli di stile. Tuttavia, Markdown ha un intento diverso: includere abbastanza stile necessario per trasmettere un messaggio testuale e lasciare il resto al renderer / al sito. <center>sembra molto più naturale che pensare ai CSS width, ai float, ai margin... - Mi spingerei persino a chiedere a un parser Markdown di sostituire i <center>tag con elementi adeguati supportati dai CSS, proprio come il modo in cui attualmente capisce in modo intelligente i paragrafi.

— Slipp D. Thompson,