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?
Respuestas:
Puede incrustar HTML en Markdown, por lo que puede hacer algo como esto:
fuente
divy agregando una barra de cierre a laimgetiqueta, respectivamente, es decir, <<img style = "float: right" src = "whatever.jpg" />divpreferir usarspanpara sangría en línea. Para centrar el párrafo completodives bueno, o incluso simplep.Encontré una buena solución en Markdown puro con un pequeño truco CSS 3 :-)
Siga la imagen flotante de código CSS 3 a la izquierda o derecha, cuando
image alttermine con<o>.fuente
Muchos procesadores Markdown "extra" admiten atributos. Entonces puede incluir un nombre de clase como este (PHP Markdown Extra):
o, alternativamente (Maruku, Kramdown , Python Markdown ):
Luego, por supuesto, puede usar una hoja de estilo de la manera correcta:
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.
fuente
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 utilizando los selectores de atributos CSS 3 para seleccionar imágenes con una determinada ruta.
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.
fuente
Incrustar CSS es malo:
CSS en otro archivo:
fuente
if product.name == 'Tulips') porque no puede depender de estabilidad del valor. Todo lo que necesita es alguien que cambiaFlowersdeFlowerrepente esa imagen hace estallar fuera de la vista. Además, ¡tienen que llamarte cada vez que agregan una imagen!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):o
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.
fuente
|-|-|. Le dice al analizador que hay una tabla, y la primera línea es un encabezado. Ej: goo.gl/xUCRiKIncluso más limpio sería simplemente poner
p#given img { float: right }en la hoja de estilo, o en<head>y envuelto enstyleetiquetas. Entonces, solo usa la rebaja.fuente
La
markdownposibilidad de atributo dentro de Markdown.fuente
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:
Las líneas de separación deben incluir al menos tres guiones
---.fuente
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:
O, si el estilo incrustado no flota su bote,
con una hoja de estilo correspondiente
stylish.css:fuente
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:
(por supuesto ... no saben lo que
<div>significa, pero eso no debería importar)Entonces el archivo Markdown se ve así:
Y en el contenido CSS que envuelve toda la página, puedo hacer lo que quiera con la etiqueta de imagen:
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.fuente
Tuve la misma tarea y alineé mis imágenes a la derecha agregando esto:
Para alinear su imagen a la izquierda o al centro, reemplace
con
fuente
este trabajo para mi
fuente
Lo más simple es envolver la imagen en una etiqueta central, así ...
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.fuente
center.<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 CSSwidths,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.