Markdown y alineación de imágenes
Estoy haciendo un sitio que publica artículos en números cada mes. Es sencillo, y creo que usar un editor de markdown (como el de wmd aquí en StackOverflow) sería perfecto.
Sin embargo, necesitan la capacidad de tener imágenes alineadas a la derecha en un párrafo dado.
No veo ninguna manera de hacer eso con el sistema actual - ¿es posible?
13 answers
Puede incrustar HTML en Markdown, por lo que puede hacer algo como esto:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-17 02:59:40
Muchos procesadores "extra" de Markdown admiten atributos. Así que puedes incluir un nombre de clase como este (PHP Markdown Extra):
{.callout}
O, alternativamente (Maruku, Kramdown, Markdown de Python):
{: .callout}
Entonces, por supuesto, puede usar una hoja de estilo de la manera adecuada:
.callout {
float: right;
}
Si la suya admite esta sintaxis, le dará lo mejor de ambos mundos: sin marcas incrustadas y un resumen de hoja de estilos lo suficiente como para que su editor de contenido no necesite modificarlo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-03 08:57:39
He encontrado una buena solución en Markdown puro con un poco de CSS3 hack :-)
Siga la imagen flotante de código CSS3 a la izquierda o a la derecha, cuando la imagen alt termine con < o >.
img[alt$=">"] {
float:right;
}
img[alt$="<"] {
float:left;
}
img[alt$="<>"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-21 11:12:28
Incrustar CSS es malo:
CSS en otro archivo:
img[alt=Flowers] { float: right; }
Me gusta ser súper perezoso usando tablas para alinear imágenes con la sintaxis vertical pipe (|). Esto es apoyado por algunos sabores markdown (y también es apoyado por el textil si eso 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 raw.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-24 18:33:34
Tengo una alternativa en los métodos anteriores que usaban la etiqueta ALT y un selector CSS en la etiqueta alt.. en su lugar, agregue un hash de URL como este:
Primero tu código de imagen markdown:
Tenga en cuenta el hash de url añadido #center.
Ahora agregue esta regla en CSS usando selectores de atributos CSS3 para seleccionar imágenes con una ruta determinada.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
Deberías 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 tenían comentó acerca de esa solución. Tampoco requerirá ninguna extensión adicional. Haga uno para flotar a la derecha y a la izquierda también o cualquier otro estilo que desee.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-03 13:51:50
Aún más limpio sería simplemente poner p#given img { float: right } en la hoja de estilo, o en el <head> y envuelto en etiquetas style. Entonces, simplemente use el markdown .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-14 15:08:03
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
El atributo markdown posibilidad dentro de markdown.
Si lo implementa en Python, existe 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 la hoja de estilo correspondiente stylish.css:
.floatright {
float: right;
/* etc. */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-27 00:36:46
Me gustó la respuesta de learnvst de usar las tablas porque es bastante legible (que es uno de los propósitos de escribir Markdown).
Sin embargo, en el caso del analizador de Markdown de GitBook tuve que, además de una línea de encabezado vacía, agregar una línea separadora debajo de ella, para que la tabla sea reconocida y renderizada correctamente:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Las líneas separadoras deben incluir al menos tres guiones ---.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:56
Como greg dijo puedes incrustar html en markdown.. pero uno de los puntos de markdown es evitar tener que tener un conocimiento extenso (o cualquiera, para el caso) de marcado css/html, ¿verdad? Esto es lo que hago:
En mi archivo markdown simplemente instruyo a todos mis editores de wiki para insertar envolver todas las imágenes con algo que se vea como esto
'<div> // put image here </div>`
(por supuesto.. donno lo que <div> significa, pero eso no debería importar)
Así que el archivo markdown se ve como esto:
<div>
![optional img description][1]
</div>
[1]: /image/path
Y en el css que envuelve toda la página puedo hacer lo que quiera con la etiqueta de imagen:
img {
float: right;
}
Por supuesto que puedes hacer más con el css.. (en este caso particular, envolver el img 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 quieres que personas potencialmente no técnicas se metan en los entresijos de css/html.. depende de ti como desarrollador web hacer tu css eso envuelve la página lo más genérica y limpia posible, pero de nuevo sus editores no necesitan saber sobre eso.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:45
Tuve la misma tarea, 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">
A
<div style="text-align: center"> <div style="text-align: left">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-31 08:15:21
Lo más simple es envolver la imagen en una etiqueta central, así ...
<center></center>
Cualquier cosa 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!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-13 05:58:46