4th Street Bar Hive-Bar

Hive-Bar Powered by Hive beta-fdb5b5b

Community post

GUÍA COMPLETA PARA MARKDOWN [+ BONUS]


¡Saludos a los queridos Steemians que me leen!


En esta oportunidad vengo con una Guía Completa para Markdown, para esos nuevos y no tan nuevos usuarios que no tienen mucho conocimiento en ésto, o se les dificulta un poco la manera de trabajar en él. Espero les sirva de ayuda para realizar sus post's más ordenados y atractivos.

¿Qué es el Markdown?

Es un lenguaje informático que trata de conseguir la máxima legibilidad y facilidad de publicación en la web, te permite mediante caracteres especiales añadir estilo, imágenes y enlaces a un simple documento de texto.
https://steemitimages.com/DQmaheJw2HdhkPS4u2Xof6kLMgw4rzU75CUCYwniE9aoRtM/Screenshot_254.png

Siempre hemos tenido una guía a la mano, pero por cuestiones de desconocimiento, la podemos pasar desapercibida.
https://steemitimages.com/DQmQ9VfjGCWCRFLyKJQRvGdEr8Pf1NWDRGToGqgR8Co9oF3/Screenshot_269.png

Ya que tuve mucha curiosidad sobre éste tema, me puse a investigar y a continuación les dejaré una Guía redactada por mi, bajo conceptos de Guía para el Markdown y una exhausta investigación por medio de Google y Steemit para que no se me escapara ningún aspecto sobre el Markdown y poderlos explicar todos de la manera más completa aquí.


https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

Títulos y Encabezados


Seguido de un buen título e imagen para el post, lo segundo más importante vendría siendo un título o encabezado bien estructurado que llame la atención del lector, según corresponda su ubicación en el post, hay diferentes tamaños para realizarlos.

Formato:

`# Título 1` `## Título 2` `### Título 3` `#### Título 4` `##### Título 5` `###### Título 6`

Resultado:

# Título 1 ## Título 2 ### Título 3 #### Título 4 ##### Título 5 ###### Título 6

https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

Énfasis

Siempre hay aspectos o palabras a resaltar en un post, ¿qué mejor manera para darlos a relucir que haciendo un énfasis en cada una de ellas?

Formato:
Resultado:
`*Cursiva*`
|
*Cursiva*
`**Negrita**`
|
**Negrita**
`***Combinado***`
|
***Combinado***
`~~Tachado~~`
|
~~Tachado~~

https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

Ajuste de Párrafo


Una de las cosas que más llama la atención es el orden que le demos al texto en un post, esto lo hace ver más ordenado y profesional.


Ajuste:
Formato:
Justificado
|
`
TEXTO
`
Centrado
|
`
TEXTO
`
Alinear a la izquierda
|
`
TEXTO
`
Alinear a la derecha
|
`
TEXTO
`

Resultados:

Párrafo Justificado, Párrafo Justificado, Párrafo Justificado, Párrafo Justificado, Párrafo Justificado, Párrafo Justificado, Párrafo Justificado. Párrafo Justificado, Párrafo Justificado, Párrafo Justificado, Párrafo Justificado, Párrafo Justificado.
Párrafo Centrado, Párrafo Centrado, Párrafo Centrado, Párrafo Centrado.
Párrafo alineado a la izquierda, Párrafo alineado a la izquierda, Párrafo alineado a la izquierda, Párrafo alineado a la izquierda.
Párrafo alineado a la derecha, Párrafo alineado a la derecha, Párrafo alineado a la derecha, Párrafo alineado a la derecha.





https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

Columnas de Texto


También es posible llevar a cabo dos columnas de texto, perfecta para realizar comparaciones, variedad de idioma y cualquier cosa que determine tu creatividad.

Formato:

`
TEXTO DE COLUMNA IZQUIERDA.
TEXTO DE COLUMNA DERECHA.
`

Resultado:

TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA.
TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA.








También podemos jugar un poco con los formatos anteriores, como el de "Justificar texto" e integrarlo a éste.

Formato:

<div class="text-justify">
<div class=pull-left>TEXTO DE COLUMNA IZQUIERDA.</div><div class=pull-right>TEXTO DE COLUMNA DERECHA.</div>

Resultado:

TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA, TEXTO DE COLUMNA IZQUIERDA.
TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA, TEXTO DE COLUMNA DERECHA.








https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

Alinear imágenes


Para alinear imágenes se utiliza el mismo formato que se utilizó para alinear texto.


Ajuste:


* Alinear a la izquierda `
` `LINK DE IMAGEN` `
`

  • Alinear a la derecha
    </div><div class="pull-right">
    LINK DE IMAGEN
    </div>

  • Centrada
    <center>LINK DE IMAGEN</center>

Resultados:

Fuente editada
https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png





***Imagen con texto alineada a la izquierda*** Para escribir de este lado, solo hay que redactar el texto que se quiera añadir debajo del formato anteriormente dado.

Fuente editada
https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png





***Imagen con texto alineada a la derecha*** Para escribir de este lado, solo hay que redactar el texto que se quiera añadir debajo del formato anteriormente dado.



***Imagen con texto centrado*** Para escribir de este lado, solo hay que redactar el texto que se quiera añadir por la parte superior del formato anteriormente dado.
[*Fuente editada*](https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/U5duH6KGDV6tP9Fh1R6Sc2WT3Mk1bhv_1680x8400)
https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png
***Imagen con texto centrado*** Para escribir de este lado, solo hay que redactar el texto que se quiera añadir por la parte inferior del formato anteriormente dado.
https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

Link con Texto | Fuentes


Mayormente utilizado para resaltar la Fuente de un texto o imágenes, también para redirigir a otra dirección o página web.

Formato:
Resultado:
`[Fuente](Enlace o link)`
|
[Fuente]()
`[Esto los llevará a mi blog](https://steemit.com/@carlosalexandr)`
|
[Esto los llevará a mi blog](https://steemit.com/@carlosalexandr)

https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

Listados | Viñetas


Usamos el listados o viñetas, para facilitar realizar una lista preferencial o también para marcar subtitulos en un texto.

Tipo de Listado:
Formato:
Resultado:
Simbólico
|
`* Texto`
`+ Texto`
`- Texto`
|
  • Texto
  • Texto
  • Texto
    • Numérico
    |
    `1. Texto`
    `2. Texto`
    `3. Texto`
    |
    1. Texto
    2. Texto
    3. Texto

    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

    https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

    Tamaño de imágenes


    La mayoría hemos pasado por en incómodo momento en el que la imagen que queremos plasmar en un post, no nos complace totalmente por su tamaño, ¡pero ya no más!
    Para hacer funcionar ésta herramienta, es necesario copiar el formato que a continuación se les dará, antes de el link/enlace de la imagen que se quiere modificar (tamaño).

    Formato:
    Link de imagen
    `https://steemitimages.com/TAMAÑO/`
    |
    *Cualquier link/enlace de una imagen*

    **Ejemplo 1**
    `https://steemitimages.com/125x256/`
    `https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png`




    https://steemitimages.com/125x256/https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png
    **Ejemplo 2**
    `https://steemitimages.com/256x512/`
    `https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png`


    ``` https://steemitimages.com/256x512/https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png ```
    **Resultado Ejemplo 1**
    https://steemitimages.com/125x256/https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png
    **Resultado Ejemplo2**
    https://steemitimages.com/256x512/https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png
    **Imagen Original**
    https://steemitimages.com/DQmd14YvwwEUfJSyF6a2QHDubQTBm9aKQp9WGFXRK13ER1K/Screenshot_270.png
    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

    https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

    Citas y códigos


    Siempre que se requiera dar a reflejar una frase de algún autor reconocido, de nosotros mismos o también querer destacar algo en especial, la mejor opción es citar, o destacar en código, yo personalmente lo veo más como una etiqueta. Éstas permiten mejor visión, claridad y enfoque a lo que se quiere reflejar.

    Acción:
    Formato:
    Símbolo:
    *Citar*
    |
    `> Texto a citar`
    |
    >
    *Código Lineal*
    |
    'TEXTO'
    |
    `
    *Código Grupal*
    |
    ' ' 'TEXTO' ' '
    |
    `
    ***Resultados:***
    > Texto a citar
    `Texto a destacar en código lineal`
    ``` Texto a destacar en código grupal, texto a destacar en código grupal, texto a destacar en código grupal, texto a destacar en código grupal, texto a destacar en código grupal, texto a destacar en código grupal. ```
    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

    https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

    Separador y salto de líneas


    Aveces la tecla "Enter" no cumple la función que siempre queremos recibir, como la de hacer más espacio entre líneas, para ésto tenemos un comando que puede ayudarte en éstos casos.
    El separador funciona como un divider entre texto y texto, para no juntar cosas que no son, y dar a relucir un salto a otro tema o caso.

    Acción:
    Formato:
    *Separador*
    |
    `*** ó --- ó ___`
    *Separador*
    |
    `
    `
    *Salto de línea*
    |
    `
    `
    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

    https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

    Insertar vídeo


    Se realiza el mismo procedimiento que se lleva a cabo con una imagen, se copia la dirección URL del vídeo de Youtube y se pega en el post.

    Ejemplo:
    https://www.youtube.com/watch?v=OZLUa8JUR18

    Resultado:
    https://steemitimages.com/256x512/https://www.youtube.com/watch?v=OZLUa8JUR18

    Mirror - Lil Wayne Ft. Bruno Mars

    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

    https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

    Tabla de contenido


    ***Formato:***
    `Titulo | Descripción` `--- | ---` `Imagen o subtitulo 1 | Contenido 1` `Imagen o subtitulo 2 | Contenido 2` `Imagen o subtitulo 3 | Contenido 3`
    ***Resultado:***
    Titulo | Descripción --- | --- Imagen o subtitulo 1 | Contenido 1 Imagen o subtitulo 2 | Contenido 2 Imagen o subtitulo 3 | Contenido 3

    Se pueden agregar o eliminar filas y columnas según se desee.

    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

    https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

    Superposición de Texto


    La superposición de un texto puede ser muy útil a la hora de querer dar una pequeña nota referente al tema al final de un escrito.

    Formato:
    Resultado:
    `Texto a superponer`
    |
    Texto a superponer.
    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png
    #
    [+B O N U S]() [+B O N U S]() [+B O N U S]()
    https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

    Dividers (Divisores)


    Los Dividers (Divisores) son una herramienta más que todo utilizada para dar a entender una separación entre textos o darle un mejor aspecto al post, lo que atrae más seguidores por el buen aspecto y calidad del mismo.
    Steemit con su markdown establecido tiene un divisor predeterminado, que se aplica usando el syntax <hr> ó --- ó ___.

    Se vendría reflejando de la siguiente manera:

    Una pequeña división con una raya poco apreciable, pero notoria.

    Mediante el internet, podemos adquirir más dividers según nuestro gusto, y preferiblemente que estos no estén registrados con derechos de autor, para evitar problemas en la comunidad de Steemit, aunque también tenemos la opción de crear nuestros propios dividers, personalizarlos y darles la apariencia que sea preferida.

    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

    https://steemitimages.com/DQmTMKXLNMQTCVRvLTzmKPeygUhZWUGCHZJySiLH9NdytGA/part1.png

    B O T O N E S


    Para insertar un botón, lo primero que debemos hacer es diseñar nuestro botón, o en su defecto, descargar uno que no tenga derechos de autor establecidos y sea de uso libre, para evitar problemas en Steemit.

    Después de tener nuestro imagen creada o descargada, procedemos a incluirla al siguiente formato:

    <a href="Enlace a destino"><imgsrc="Link de imagen"></a>

    El formato de la imagen siempre debe ser JPG.

    **Steemit**
    ``` ```
    **Instagram**
    ``` ```
    https://steemitimages.com/DQmcWpRktt4Je4BJUytNFGFTBq7UfBGy3WK9ESUt8pwZdNx/part2.png

    https://steemitimages.com/DQmaECEFtFQL9VYCKM5kqEPgStja2Wsaq2E5RToNL3X4D1i/554.png

    Espero esta guía les sirva de mucha ayuda en lo que respecta el Markdown en Steemit, si te gustó apoya dando Resteem https://steemitimages.com/DQmP1nSwL56pevNBgTSLiQrS77sK34nmvYcoEahGwn3KAXu/khjvjvjvjh.png para poder llegar de una mejor manera a todas esas personas que necesitan de esta ayuda, comenta si tienes alguna duda y UpVote si te pareció un buen aporte.

    ¡STEEM ON!

    https://steemitimages.com/DQmaECEFtFQL9VYCKM5kqEPgStja2Wsaq2E5RToNL3X4D1i/554.png

    Upvote⬆ | Follow me👣 | Reesteem®️

    @Carlosalexandr

    17 upvotes $0.00

    Replies (7)

    Review before signing

    Posting as . Signing with . Keychain permission: Posting. Hive Keychain will ask you to approve this action next. 

    
  
    
    Technical details
    
    
      Operation fingerprint: