github - font - markdown tutorial

¿Cómo agregar una captura de pantalla a los READMEs en el repositorio github? (13)

¿Es posible colocar una captura de pantalla en un archivo README en un repositorio de GitHub? ¿Cuál es la sintaxis?

Sube tu imagen a postimage.org
Obtener github Markdown url
Insertar en tu ReadMe

Aunque ya hay una respuesta aceptada, me gustaría agregar otra forma de cargar imágenes al Léame en GitHub.

Necesitas crear problema en tu repositorio.
Arrastra y suelta en el área de comentarios tu imagen.
Después de generar el enlace para la imagen, insértelo en su archivo Léame.

Más detalles se pueden encontrar here

Con las imágenes ubicadas en el directorio /screen-shots . El <div> exterior permite colocar las imágenes. El relleno se logra utilizando <img width="desired-padding" height="0"> .

<div align="center"> <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img> <img height="0" width="8px"> <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img> </div>

Descubrí que el camino a la imagen en mi repositorio no era suficiente, tuve que vincularlo a la imagen en el subdominio raw.github.com .

Formato URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png) Ejemplo de Markdown ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

La sintaxis del markdown para mostrar imágenes es de hecho:

![image](https://{url})

PERO: ¿Cómo proporcionar la url ?

Probablemente no quieras saturar tu repositorio con capturas de pantalla, no tienen nada que ver con el código
es posible que tampoco desee lidiar con la molestia de hacer que su imagen esté disponible en la web ... (cárguela en un servidor ...).

Entonces ... puedes usar este here para hacer que github aloje tu archivo de imagen. TDLR:

Crea un problema en la lista de problemas de tu repositorio.
arrastra y suelta tu captura de pantalla sobre este tema
Copie el código de rebaja que github acaba de crear para que pueda visualizar su imagen.
Pégalo en tu readme (o donde quieras)

here

Mucho más sencillo que agregar una URL Simplemente cargue una imagen en el mismo repositorio, como:

![Screenshot](screenshot.png)

Para mi la mejor manera es -

Cree un nuevo problema con ese repositorio en github y luego cargue el archivo en formato gif. Para convertir archivos de video en formato gif, puede usar este sitio web http://www.online-convert.com/
Enviar el número recién creado.
Copia la dirección del archivo cargado.
Finalmente en tu archivo README puesto! [Demo] (DIRECCIÓN COPIADA)

Espero que esto ayude.

Primero, cree un directorio (carpeta) en la raíz de su repositorio local que contendrá las screenshots que desea agregar. Llamemos al nombre de este directorio de screenshots . Coloque las imágenes (JPEG, PNG, GIF, `etc) que desea agregar en este directorio.

Captura de pantalla de Android Studio Workspace

En segundo lugar, debe agregar un enlace a cada imagen en su README. Entonces, si tengo imágenes con el nombre 1_ArtistsActivity.png y 2_AlbumsActivity.png en mi directorio de capturas de pantalla, 2_AlbumsActivity.png sus enlaces así:

<img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

Si desea que cada captura de pantalla en una línea separada, escriba sus enlaces en líneas separadas. Sin embargo, es mejor si escribe todos los enlaces en una línea, separados solo por espacio. Puede que en realidad no se vea muy bien, pero al hacerlo, GitHub los arregla automáticamente para ti.

Por último, confíe sus cambios y empuje!

Si utiliza Markdown (README.md):

Siempre que tenga la imagen en su repositorio, puede usar una URL relativa:

![Alt text](/relative/path/to/img.jpg?raw=true "Optional Title")

Si necesita incrustar una imagen que está alojada en otro lugar, puede usar una URL completa

![Alt text](http://full/path/to/img.jpg "Optional title")

GitHub recomienda que utilice enlaces relativos con el parámetro ?raw=true para garantizar que los puntos de referencia bifurcados correctamente.

Echa un vistazo a un ejemplo: https://raw.github.com/altercation/solarized/master/README.md

Además, la documentación sobre enlaces relativos en archivos README: https://help.github.com/articles/relative-links-in-readmes

Y, por supuesto, los documentos de rebajas: http://daringfireball.net/projects/markdown/syntax

Además, si crea una nueva screenshots de screenshots ramificación para almacenar las imágenes, puede evitar que se encuentren en el árbol de trabajo master

Luego puedes incrustarlos usando:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

Una línea a continuación debe ser lo que buscas

si tu archivo está en el repositorio

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

si su archivo está en otra url externa

![ScreenShot](https://{url})

agrega esto a README

<div align="center"> <img src="/screenshots/screen1.jpg" width="400px"</img> </div>

Método 1-> Markdown way

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

Método 2-> forma HTML

<img src="https://link(format same as above)" width="100" height="100"/>

<img src="https://link" style=" width:100px ; height:100px " />

Nota -> Si no desea aplicar un estilo a su imagen, es decir, cambiar el tamaño, eliminar la parte de estilo

Markdown ![Screenshot](http://url/to/img.png)

Crear un problema relacionado con la adición de imágenes
Añade la imagen arrastrando y soltando o por el selector de archivos
Luego copia la fuente de la imagen
Ahora agregue ![Screenshot](http://url/to/img.png) a su archivo README.md

¡Hecho!

Alternativamente, puede usar un sitio de alojamiento de imágenes como imgur y obtener su url y agregarlo a su archivo README.md o también puede usar un alojamiento de archivos estáticos.

Problema de muestra