Markdown y alineación de imágenes
https://stackoverflow.com/questions/255170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy creando un sitio que publica artículos en números cada mes.Es sencillo y creo que usar un editor Markdown (como el armas de destrucción masiva uno aquí en Stack Overflow) sería perfecto.
Sin embargo, necesitan la capacidad de tener imágenes alineadas a la derecha en un párrafo determinado.
No veo una manera de hacerlo con el sistema actual, ¿es posible?
Solución
Puede incrustar HTML en Markdown, por lo que puede hacer algo como esto:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Otros consejos
Muchos Markdown " extra " Los procesadores admiten atributos. Entonces puede incluir un nombre de clase como este (PHP Markdown Extra):
{.callout}
o, alternativamente (Maruku, Kramdown , Python Markdown ):
{: .callout}
Entonces, 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.
Encontré una buena solución en Markdown puro con un poco de CSS & nbsp; 3 hack :-)
Siga la imagen flotante de código CSS 3 a la izquierda o derecha, cuando el 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;
}
Incrustar CSS es malo:
CSS en otro archivo:
img[alt=Flowers] { float: right; }
Me gusta ser súper vago usando tablas para alinear imágenes con la sintaxis de tubería vertical (|). Esto es compatible con algunos sabores de Markdown (y también es compatible con Textil si flota su barco):
| I am text to the left |  |
o
|  | 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 markdown y no necesita recordar ningún CSS o HTML sin formato.
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:
Tenga en cuenta el hash de URL agregado #center.
Ahora agregue esta regla en CSS usando CSS & nbsp; 3 selectores de atributos 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.
Aún más limpio sería simplemente poner p#given img { float: right } en la hoja de estilo o en la <head> y envuelto en style etiquetas.Entonces, solo usa la rebaja .
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
El atributo markdown posibilidad dentro de Markdown.
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 |  |
|  | I am text to the right |
Las líneas de separación deben incluir al menos tres guiones ---.
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:
{: style="float:right"}
O, si el estilo incrustado no flota su barco,
{: .floatright}
con una hoja de estilo correspondiente, stylish.css:
.floatright {
float: right;
/* etc. */
}
Como greg dijo puede incrustar contenido HTML en Markdown, pero uno de los puntos de Markdown es evitar tener que tiene un amplio conocimiento (o cualquier otro) de marcado CSS / HTML, ¿verdad? Esto es lo que hago:
En mi archivo Markdown simplemente les pido a todos mis editores wiki que incrusten todas las imágenes con algo parecido a esto:
'<div> // Put image here </div>`
(por supuesto ... no saben lo que significa <div>, 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 etiqueta img con div evita que otro texto se ajuste a la imagen ... sin embargo, esto es solo un ejemplo), pero en mi humilde opinión, el punto de Markdown es que no quieres que personas potencialmente no técnicas entren en los entresijos de CSS / HTML ... depende de ti como desarrollador web hacer tu contenido CSS que envuelve la página de la forma más genérica y limpia posible, pero nuevamente sus editores no necesitan saber sobre eso.
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">
Lo más simple es envolver la imagen en una etiqueta central, así ...
<center></center>
Todo lo que tenga que ver con Markdown se puede probar aquí: http://daringfireball.net/projects/markdown/ dingus
Claro, <center> puede estar en desuso, ¡pero es simple y funciona!
