html - reducir - markdown para imagenes
Markdown y alineación de imagen (13)
Estoy haciendo un sitio que publica artículos en números cada mes. Es sencillo, y creo que usar un editor de rebajas (como el de wmd aquí en StackOverflow) sería perfecto.
Sin embargo, sí 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?
Como said Greg, puedes incluir html en el descuento, pero uno de los puntos de descuento es evitar tener que tener un amplio conocimiento de marcado css / html (o alguno, para el caso) correcto? Esto es lo que hago:
en mi archivo de rebajas, simplemente ordeno a todos mis editores wiki que incrusten todas las imágenes con algo que se parece a esto
''<div> // put image here </div>`
(por supuesto ... ellos no saben qué significa <div> pero eso no debería importar)
por lo que el archivo de descuento se ve así:
<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 la imagen:
img {
float: right;
}
por supuesto, puedes hacer más con el css ... (en este caso particular, envolver el img con div evita que otro texto se adhiera a la imagen ... aunque esto es solo un ejemplo), en mi humilde opinión, el punto de descuento es que no lo haces. t desea personas potencialmente no técnicas para entrar y salir de css / html. Depende de usted como desarrollador web hacer su CSS que envuelva la página de la manera más genérica y limpia posible, pero de nuevo sus editores no necesitan saber sobre eso
Incluso más limpio sería poner p#given img { float: right } en la hoja de estilos, o en el <head> y envuelto en etiquetas de style . ¡Entonces, solo use el valor de descuento  .
Incrustar CSS es malo:
CSS en otro archivo:
img[alt=Flowers] { float: right; }
Lo más simple es envolver la imagen en una etiqueta central, así que ...
<center></center>
Todo lo que tenga que ver con Markdown puede probarse aquí: http://daringfireball.net/projects/markdown/dingus
Claro, <center> puede ser obsoleto, ¡pero es simple y funciona!
Me encuentro una buena solución en Markdown puro con un pequeño hack de CSS3 :-)
Siga la imagen flotante del 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;
}
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 cabecera 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 --- .
Me gusta ser super perezoso al usar tablas para alinear imágenes con la sintaxis vertical de la tubería ( | ). Esto es compatible con algunos sabores de reducción (y también es compatible con textiles 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 de descuento, y no necesita recordar ningún CSS o HTML sin formato.
Muchos procesadores "extra" de Markdown admiten atributos. Entonces puede incluir un nombre de clase como tal (PHP Markdown Extra):
{.callout}
o, como alternativa (Maruku, Kramdown , Python Markdown ):
{: .callout}
Entonces, por supuesto, puede usar una hoja de estilo de la manera adecuada:
.callout {
float: right;
}
Si el suyo es compatible con esta sintaxis, le ofrece lo mejor de ambos mundos: sin marcado incrustado, y una hoja de estilo suficientemente abstracta para que su editor de contenido no tenga que modificarla.
Puede incrustar HTML en Markdown, por lo que puede hacer algo como esto:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Si lo implementa en Python, hay una extensión que le permite agregar pares clave / valor html y etiquetas class / id. La sintaxis es para esto es:
{: style="float:right"}
O, si el estilo integrado no hace flotar su bote,
{: .floatright}
con la hoja de estilo correspondiente stylish.css :
.floatright {
float: right;
/* etc. */
}
Tenía 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 derecha o al centro, reemplace
<div style="text-align: right">
a
<div style="text-align: center"> <div style="text-align: right">
Tengo una alternativa sobre los métodos anteriores que utilizan la etiqueta ALT y un selector CSS en la etiqueta alt. En su lugar, agregue un hash URL como este:
Primero su código de imagen de descuento:
Tenga en cuenta la URL añadida hash #center.
Ahora agregue esta regla en CSS usando los selectores de atributos CSS3 para seleccionar imágenes con una ruta determinada.
img[src*=''#center''] {
display: block;
margin: auto;
}
Debería poder utilizar un hash de URL como este, casi como definir un nombre de clase y no es un uso indebido de la etiqueta ALT, como algunas personas habían comentado sobre esa solución. Tampoco requerirá extensiones adicionales. Haga uno para flotar a la derecha e izquierda, así como a cualquier otro estilo que desee.
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
La posibilidad de rebajar atributo en el margen.