notebook - Cambio de tamaño de imagen en Markdown
r markdown resize image (17)
Hay forma de añadir clase y estilo css.
![pic][logo]{.classname}
a continuación, escriba el enlace y css a continuación
[logo]: (picurl)
<style type="text/css">
.classname{
width: 200px;
}
</style>
Acabo de empezar con Markdown. Me encanta, pero hay una cosa que me molesta: ¿cómo puedo cambiar el tamaño de una imagen usando Markdown?
La documentación solo da la siguiente sugerencia para una imagen:
Si es posible me gustaría que la imagen también estuviera centrada. Estoy pidiendo una rebaja general, no solo cómo lo hace Github.
Con ciertas implementaciones de Markdown (incluyendo Mou y Marked 2 (solo macOS)) puede agregar =WIDTHxHEIGHT después de la URL del archivo gráfico para cambiar el tamaño de la imagen. No olvides el espacio antes del = .
Puedes saltarte la altura
Cuando uso Flask (lo estoy usando con páginas planas) ... encontré que habilitar explícitamente (no fue por defecto por alguna razón) ''attr_list'' en extensiones dentro de la llamada a markdown funciona, y luego uno puede usar los atributos (muy útil también para acceder a CSS - clase = "mi clase" por ejemplo ...).
FLATPAGES_HTML_RENDERER = prerender_jinja
y la función:
def prerender_jinja(text):
prerendered_body = render_template_string(Markup(text))
pygmented_body = markdown.markdown(prerendered_body, extensions=[''codehilite'', ''fenced_code'', ''tables'', ''attr_list''])
return pygmented_body
Y luego en Markdown:
{: width=200px}
Escribí el sencillo analizador de etiquetas para usar una etiqueta img de tamaño personalizado en Jekyll .
https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
{% img /path/to/img.png 100x200 %}
Puede agregar el archivo a la carpeta _plugins .
La adición de dimensiones relativas a la URL de origen se representará en la mayoría de los procesadores de Markdown.
Implementamos esto en Corilla, ya que creo que el patrón sigue las expectativas de los flujos de trabajo existentes sin que el usuario confíe en HTML básico. Si su herramienta favorita no sigue un patrón similar, vale la pena presentar una solicitud de función.
Ejemplo de sintaxis:
Ejemplo de gatito:
La respuesta aceptada aquí no funciona con ningún editor de Markdown disponible en las aplicaciones que he usado hasta la fecha como Ghost, Stackedit.io o incluso en el editor de desbordamiento de pila. Encontré una solución alternativa aquí en el rastreador de problemas de StackEdit.io .
La solución es usar directamente la sintaxis HTML, y funciona perfectamente:
<img src="http://....jpg" width="200" height="200" />
Espero que esto ayude.
Para R-Markdown, ninguna de las soluciones anteriores funcionó para mí, así que recurrí a la sintaxis normal de LaTeX , que funciona bien.
/begin{figure}
/includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
/end{figure}
Luego puede usar, por ejemplo, la declaración /begin{center} para centrar la imagen.
Podrías usar este también con kramdown:
markdown
{:.some-css-class style="width: 200px"}
o
markdown
{:.some-css-class width="200"}
De esta manera, puede agregar directamente atributos arbitrarios al último elemento html. Para agregar clases hay un acceso directo .class.secondclass .
Puedes usar HTML en tu Markdown:
<img src="drawing.jpg" alt="drawing" width="200"/>
O a través del atributo de style ( no soportado por GitHub )
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
O puede usar un archivo CSS personalizado como se describe en esta respuesta en Markdown y alineación de imágenes
CSS en otro archivo:
img[alt=drawing] { width: 200px; }
Quizás esto haya cambiado recientemente, pero los documentos de Kramdown muestran una solución simple.
De los docs
Here is an inline {:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png
{: height="36px" width="36px"}
Trabaja en github con Jekyll y Kramdown.
Sé que esta respuesta es un poco específica, pero podría ayudar a otros necesitados.
Como muchas fotos se cargan utilizando el servicio Imgur , puede usar la API que se detalla aquí para cambiar el tamaño de la foto.
Al cargar una foto en un comentario de GitHub, se agregará a través de Imgur, por lo que esto ayudará mucho si la foto es muy grande.
Básicamente, en lugar de http://i.imgur.com/12345.jpg , pondría http://i.imgur.com/12345m.jpg para imágenes de tamaño medio.
Se podría dibujar en el atributo alt que se puede establecer en casi todas las implementaciones / representaciones de Markdown junto con los selectores de CSS basados en valores de atributo. La ventaja es que uno puede definir fácilmente un conjunto completo de diferentes tamaños de imagen (y otros atributos).
Reducción:
CSS:
img[alt="minipic"] {
max-width: 20px;
display: block;
}
Si está utilizando kramdown , puede hacer esto:
{:.foo}
Luego agrega esto a tu CSS personalizado :
.foo {
text-align: center;
width: 100px;
}
Si está escribiendo MarkDown para PanDoc, puede hacer esto:
{ width=50% }
Esto agrega style="width: 50%;" a la etiqueta HTML <img> , o [width=0.5/textwidth] a /includegraphics en LaTeX.
Fuente: http://pandoc.org/MANUAL.html#extension-link_attributes
Sobre la base de la respuesta de Tiemes, si está utilizando CSS 3 , puede usar un selector de subcadenas :
Este selector hará coincidir cualquier imagen con una etiqueta alt que termina con ''-fullwidth'':
img[alt$="-fullwidth"]{
width: 100%;
display: block;
}
Entonces aún puede usar la etiqueta alt para el propósito para describir la imagen.
El Markdown para lo anterior podría ser algo como:
He estado usando esto en Ghost markdown, y ha estado funcionando bien.
Solo usa:
<img src="Assets/icon.png" width="200">
en lugar de:
Vine aquí buscando una respuesta. Algunas sugerencias impresionantes aquí. ¡Y la información de oro que señala que markdown es completamente compatible con HTMl!
Una buena solución limpia siempre es ir con la sintaxis de HTML puro con seguridad. Con la etiqueta.
Pero aún estaba intentando mantener la sintaxis de reducción de marca, así que intenté envolverla alrededor de una etiqueta y agregar los atributos que deseaba para la imagen dentro de la etiqueta div. ¡¡Y funciona!!
<div style="width:50%"></div>
¡De esta manera las imágenes externas son compatibles!
Solo pensé que pondría esto como no está en ninguna de las respuestas. :)