Aprenda un par de trucos que quizás no conozcas usando Github Markdown en tus archivos readme.md.

Consejos y trucos que probablemente no conozca con Github Markdown en archivos readme.md

Markdown es una sintaxis ligera y fácil de usar para diseñar todas las formas de escritura en la plataforma GitHub.

Markdown es una forma de aplicar estilo al texto en la web. Usted controla la visualización del documento; dar formato a las palabras en negrita o cursiva, agregar imágenes y crear listas son solo algunas de las cosas que podemos hacer con Markdown. En su mayoría, Markdown es solo texto normal con algunos caracteres no alfabéticos, como #*.

Puede usar Markdown en la mayoría de los lugares de GitHub:

  • Gists
  • Comentarios en problemas y solicitudes de extracción
  • Archivos con la extensión .mdo.markdown

Incrustar imágenes

Hay 2 formas de agregar imágenes en un archivo readme.md:

Reducción

Utilice la siguiente sintaxis para agregar una imagen.

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

HTML

Use la siguiente sintaxis para agregar una imagen usando html.

<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" title="Github Logo">

Ancho o alto fijo para una imagen

Para dar dimensiones fijas a una imagen, use el atributo de ancho y alto. (Recuerda que usar html será válido solo para Github):

<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="256" height="256" title="Github Logo">

Centrar una imagen

Para centrar una imagen, no usaremos el marcado tradicional, sino que usaremos HTML simple:

<p align="center">
  <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="256" title="Github Logo">
</p>

Resaltando un bloque de código

Para resaltar un fragmento de código, envuelva su código entre 6 comillas seguidas del nombre del idioma. Los bloques de código son parte de la especificación Markdown, pero el resaltado de sintaxis no lo es. Sin embargo, muchos renderizadores, como Github y Markdown Here, admiten el resaltado de sintaxis. Los idiomas que se admiten y cómo se deben escribir esos nombres de idioma variarán de un renderizador a otro.

```javascript
function hello(name) {
  console.log(name);
}
```

Emojis

Github Markdown admite emojis integrados, visite la hoja de trucos de emojis para ver una lista completa de emojis.

:kissing: :laughing: :neutral_face:

Emojis markdown

Listas de tareas

Puede crear una lista similar a la de tareas pendientes utilizando la rebaja que se convertirá en una lista de casillas de verificación. Si incluye una lista de tareas en el primer comentario de un problema, obtendrá un indicador de progreso útil en su lista de problemas. También funciona en Pull Requests.

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

Github progress list

Incorporación de videos de Youtube

Lamentablemente, esto no es posible hasta la fecha. Sin embargo, hay un pequeño truco que le permite crear una imagen y redirigir al usuario a la página de videos de YouTube.

Simplemente reemplace YOUTUBE_VIDEO_ID_HERE por la identificación de su video. Aparecerá una imagen y redirigirá automáticamente al video en youtube.

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE" target="_blank">
 <img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />
</a>

O use descuento puro (sin dimensiones):

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

¿Tienes otro consejo que podría ser útil y no lo tenemos en esta colección? Compártelo con nosotros en el cuadro de comentarios.


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores