Markdown y alineación de imagen

191

Estoy haciendo un sitio que publica artículos en números cada mes. Es sencillo, y creo que usar un editor Markdown (como el WMD aquí en Stack Overflow) sería perfecto.

Sin embargo, necesitan la capacidad de tener imágenes alineadas a la derecha en un párrafo dado .

No puedo ver una manera de hacerlo con el sistema actual, ¿es posible?

html css markdown

— Jedidja
fuente

2

¿Por qué no simplemente hacer la pregunta sin el "Estoy ayudando a un amigo con un sitio sin fines de lucro que publica artículos en números cada mes"?

— JGallardo

11

@JGallardo Debido a que quería dejar en claro que no tenía control completo sobre el sistema, ni tenía la capacidad de comprar ningún tipo de solución. Estoy de acuerdo en que podría haber formulado la pregunta de manera diferente.

— Jedidja

1

Con respecto a los editores de rebajas, puede usar el gran stackedit.io/editor# , es increíble escribir en él :)

— AbdelHady

1

@AbdelHady si solo hubiera estado disponible en 2008 :)

— Jedidja

1

@iPython ¿Cómo puede una pregunta de 2008 ser un duplicado de una pregunta hecha 4 años después (2012)?

— Jedidja el

196

Puede incrustar HTML en Markdown, por lo que puede hacer algo como esto:

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

Continue markdown text...

— Greg Hewgill
fuente

43

Límpielo y estandarice tirando lo innecesario divy agregando una barra de cierre a la imgetiqueta, respectivamente, es decir, <<img style = "float: right" src = "whatever.jpg" />

— ma11hew28

En lugar de divpreferir usar spanpara sangría en línea. Para centrar el párrafo completo dives bueno, o incluso simple p.

— Ojo el

21

Esto funciona mejor con algunos intérpretes desinfectados como el de GitHub: <img align = "right" src = "whatever.jpg" />

— benweet

19

@MattDiPasquale Las barras diagonales no son necesarias. Eso es XHTML, no HTML.

— CaptSaltyJack

intenté esto para incrustar una imagen en una publicación de blog fantasma; usando <div style = "float: right"> <img ...> </div> fluyó el siguiente párrafo alrededor de la imagen correctamente, mientras que <img style = "float: right" ...> puso el párrafo y la imagen en cajas de lado a lado.

— Martin DeMello

58

Encontré una buena solución en Markdown puro con un pequeño truco CSS 3 :-)

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

Siga la imagen flotante de código CSS 3 a la izquierda o derecha, cuando image alttermine 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
fuente

1

¿Dónde se debe colocar el CSS en el directorio MkDocs? @YannDuran

— Ivan Huang

2

@IvanHuang solo asegúrate de agregar un archivo extra.css según la documentación de MkDocs y coloca el css en ese archivo.

— Yann Duran

54

Muchos procesadores Markdown "extra" admiten atributos. Entonces puede incluir un nombre de clase como este (PHP Markdown Extra):

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

o, alternativamente (Maruku, Kramdown , Python Markdown ):

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

Luego, por supuesto, puede usar una hoja de estilo de la manera correcta:

.callout {
    float: right;
}

Si el suyo admite esta sintaxis, le ofrece lo mejor de ambos mundos: sin marcado incrustado y una hoja de estilo lo suficientemente abstracta como para que su editor de contenido no necesite modificarla.

— gerwitz
fuente

Para cuando escribas todo esto:! Flowers {: .callout} también puede haber escrito <img src = "/ flowers.jpeg" class = "callout" />

— lfalin

1

Estoy de acuerdo, pero Markdown a menudo se elige para usuarios que no están alfabetizados en ML, por lo que no hay razón para preferir HTML sobre cualquier otra sintaxis arbitraria.

— gerwitz

44

("Sin razón" es una simplificación excesiva, por supuesto. Hay muchas razones por las que UX puede querer que sus editores se acerquen o se alejen de la representación HTML final. O puede ser reacio a introducir una dependencia HTML en su contenido, si he elegido Markdown para abstraer la técnica de renderizado.)

— gerwitz

33

Tengo una alternativa a los métodos anteriores que usaban la etiqueta ALT y un selector CSS en la etiqueta alt ... En cambio, agregue un hash de URL como este:

Primero su código de imagen Markdown:

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

Tenga en cuenta el hash de URL agregado #center.

Ahora agregue esta regla en CSS utilizando los selectores de atributos CSS 3 para seleccionar imágenes con una determinada ruta.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

Debería poder usar un hash de URL como este casi como definir un nombre de clase y no es un mal uso de la etiqueta ALT como algunas personas han comentado para esa solución. Tampoco requerirá ninguna extensión adicional. Haga uno para flotar a derecha e izquierda o cualquier otro estilo que desee.

— temblor
fuente

1

Exactamente lo que estaba buscando. Eres un salvador de vida. Una cosa que me gustaría agregar es `` `h1 h2 {clear: both}` `` Para que el próximo encabezado comience en una nueva línea (no se superpone con la imagen)

— bhar1red

se parece a lo que estoy buscando pero ... ¿cómo hago un CSS? ¿Y cómo lo llamo en Markdown?

— Tony D

esta también es una gran solución igual que la mía :)

— OzzyCzech

3

@OzzyCzech: no, en realidad no, su solución hace un mal uso de la etiqueta "alt" de la imagen, lo que podría ser malo para el cumplimiento de la accesibilidad en una página, donde esta solución utiliza un enfoque de no invasión a través de la etiqueta src.

— temblor

24

Incrustar CSS es malo:

![Flowers](/flowers.jpeg)

CSS en otro archivo:

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

67

¿Qué? ¿Ahora de repente tienes que editar un archivo externo cada vez que cambias el contenido de rebajas? No me parece una buena solución.

— Jordan Reiter

9

@JordanReiter Todos aquí hemos escrito un programa que consta de más de un archivo donde la lógica se extiende / organiza en muchas ubicaciones. Lo hacemos a propósito para la mantenibilidad. ¿Por qué es esto tan dolorosa y terriblemente diferente?

— z5h

8

Markdown permite a los usuarios que no son programadores crear contenido y no debe depender de archivos a los que se debe acceder y editar directamente en el servidor. Otro ejemplo: creo que es totalmente normal codificar los nombres de los campos de una base de datos en su código, pero es un error codificar en función del valor de un campo en su base de datos (es decir if product.name == 'Tulips') porque no puede depender de estabilidad del valor. Todo lo que necesita es alguien que cambia Flowersde Flowerrepente esa imagen hace estallar fuera de la vista. Además, ¡tienen que llamarte cada vez que agregan una imagen!

— Jordan Reiter

24

@cboettig Este es un mal uso severo de la etiqueta alt. Se supone que es una descripción textual de la imagen para las personas que no pueden ver la imagen.

— Nathan Grigg

55

Estoy sorprendido de tanta gente llorando por esta solución. Este es un truco hermoso, necesario para resolver un problema para ciertos servicios de alojamiento. El póster que dio este hermoso truco se ha ido ahora y, en cambio, la comunidad se queda con crybabies.

— Aaron Robinson

22

Me gusta ser súper vago usando tablas para alinear imágenes con la |sintaxis vertical pipe ( ). Esto es compatible con algunos sabores de Markdown (y también es compatible con Textile si eso flota su bote):

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

o

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

No es la solución más flexible, pero es buena para la mayoría de mis necesidades simples, es fácil de leer en formato de descuento y no necesita recordar ningún CSS o HTML sin formato.

— aprender
fuente

2

Me gusta este estilo, muy rebajado. Lástima que no funcione en github (todavía no de todos modos)

— Eliot

3

Acabo de probar esta sintaxis en GitHub y parece que funciona ahora.

— Ege Rubak

66

Este es un truco interesante, pero está usando mal las tablas para el diseño. Bienvenido a 1999.

— jxpx777

3

Para la reducción de sabor con github, agregue una línea con |-|-|. Le dice al analizador que hay una tabla, y la primera línea es un encabezado. Ej: goo.gl/xUCRiK

— Kayla

10

Incluso más limpio sería simplemente poner p#given img { float: right }en la hoja de estilo, o en <head>y envuelto en styleetiquetas. Entonces, solo usa la rebaja ![Alt text](/path/to/img.jpg).

— ma11hew28
fuente

8

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

La markdownposibilidad de atributo dentro de Markdown.

— Peter Mortensen
fuente

1

Me funcionó No estoy usando github. Gracias @raphox.

— Hugo Tavares

Funciona bien con el analizador PHP de descuento de vainilla de michelf

— Ronan

2

Esta es la funcionalidad Markdown Extra, que se incluye en algunos sistemas de administración de contenido (por ejemplo, Drupal), pero no se incluye la funcionalidad en Markdown per se.

— Tim

7

Me gustó la respuesta de learnvst de usar las tablas porque es bastante legible (que es un propósito de escribir Markdown).

Sin embargo, en el caso del analizador Markdown de GitBook, tuve que, además de una línea de encabezado vacía, agregar una línea de separación debajo de ella, para que la tabla sea reconocida y representada correctamente:

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

Las líneas de separación deben incluir al menos tres guiones ---.

— icarito
fuente

7

Si lo implementa en Python, hay una extensión que le permite agregar pares de clave / valor HTML y etiquetas de clase / id. La sintaxis es para esto es:

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

O, si el estilo incrustado no flota su bote,

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

con una hoja de estilo correspondiente stylish.css:

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

— jameh
fuente

2

Como dijo Greg , puede incrustar contenido HTML en Markdown, pero uno de los puntos de Markdown es evitar tener que tener un amplio (o ninguno) conocimiento de marcado CSS / HTML, ¿verdad? Esto es lo que hago:

En mi archivo Markdown, simplemente instruyo a todos mis editores wiki para que incrusten todas las imágenes con algo similar a esto:

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

(por supuesto ... no saben lo que <div>significa, pero eso no debería importar)

Entonces el archivo Markdown se ve así:

<div>
![optional image description][1]
</div>

[1]: /image/path

Y en el contenido CSS que envuelve toda la página, puedo hacer lo que quiera con la etiqueta de imagen:

img {
   float: right;
}

Por supuesto, puede hacer más con el contenido CSS ... (en este caso particular, envolver la imgetiqueta con div evita que otro texto se ajuste a la imagen ... esto es solo un ejemplo), pero en mi humilde opinión, el punto de Markdown es que no desea que personas potencialmente no técnicas entren en los entresijos de CSS / HTML ... depende de usted como desarrollador web hacer que su contenido CSS que envuelva la página sea lo más genérico y limpio posible, pero luego de nuevo, sus editores no necesitan saber sobre eso.

— abbood
fuente

1

Tuve la misma tarea y alineé mis imágenes a la derecha agregando esto:

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

Para alinear su imagen a la izquierda o al centro, reemplace

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

con

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

— Zuha Karim
fuente

Intenté esto pero ahora está funcionando ... la imagen está alineada pero aparece el texto html.

— fiza khan

-1

este trabajo para mi

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

— Andersonfrfilho
fuente

-16

Lo más simple es envolver la imagen en una etiqueta central, así ...

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

Todo lo que tenga que ver con Markdown se puede probar aquí: http://daringfireball.net/projects/markdown/dingus

Claro, <center>puede ser obsoleto, pero es simple y funciona.

— yoyó
fuente

1

Acabo de notar que el OP solicitó la alineación correcta: estaba tratando de centrar una imagen cuando me topé con esta respuesta.

— yoyo

14

No, nunca lo uses center.

— Jordan Reiter

12

Realmente voy a ponerme del lado de @yoyo <center>, tiene sentido. Está en desuso de HTML porque se supone que HTML solo describe el contenido; los estilos deben estar en hojas de estilo. Sin embargo, Markdown tiene una intención diferente: incluir suficiente estilo necesario para transmitir un mensaje de texto, y dejar el resto al renderizador / sitio. <center>parece mucho más natural que pensar en CSS widths, floats, margins ... - Incluso iría tan lejos como hacer que un analizador Markdown reemplace las <center>etiquetas con elementos apropiados respaldados por CSS, al igual que la forma en que actualmente resuelve los párrafos de manera inteligente.

— Slipp D. Thompson