Markdown y HTML, Guía de bolsillo.

Notas antes de comenzar:

<ol> <li><p dir="auto">La intención del post no son las recompensas; la intención principal es que este contenido pueda llegar a la mayor cantidad de usuarios posible, y les sirva.<br /> <strong>Se agradecen todos los Reblogueos. <li><p dir="auto">Cuando digo <em>Guía de bolsillo, es porque la finalidad es que dejen el Link del Post en sus Favoritos o algún lugar donde lo puedan consultar cuando le necesiten. <li><p dir="auto">Este contenido no es Original, existen cientos de post como este en la plataforma, la intención del mismo es ayudar a los usuarios nuevos. Incluso yo tengo otro post parecido de hace 2 años. <hr /> <p dir="auto">Adornar, Maquetear o Poner bonito tu post, se suele hacer difícil para los nuevos usuarios, e incluso a veces los más antiguos olvidamos ciertos trucos dentro de la plataforma. Por lo que hoy, quiero brindar una pequeña guía de Markdown y HTML con la cual, se podrán defender mucho mejor dentro de la plataforma. <p dir="auto"><center><br /> <sub>Inspirada en la imagen de 'For Dummies'<span><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/jossduarte/rG5f2ZsI-Recurso202.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/jossduarte/rG5f2ZsI-Recurso202.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/jossduarte/rG5f2ZsI-Recurso202.png 2x" /> <p dir="auto">Antes de ir de lleno a los trucos, vamos con algo sumamente importante, <strong><em>¿Qué es Markdown y qué es HTML?. Pues <strong>HTML es un lenguaje código que se utiliza para el desarrollo de páginas, mientras que, <strong>Markdown es un lenguaje utilizado para escribir, y que el diseño del texto se mantenga legible en todo momento.<br /> A pesar de que HIVE admite HTML, no lo admite en su totalidad, y en su mayoría el Texto de nuestros post se basa en Markdown. <p dir="auto">Dejando claro esto, vamos con los trucos, que es por lo que vinieron. <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Títulos y subtitulos <p dir="auto">Con <code># <strong>Etiqueta/Almohadilla/Numeral puedes crear un titulo y subtitulos para tus post. Solo debes agregar <em>de uno a seis + un espacio, antes de tu titulo o subtitulo. <p dir="auto">1 <code># es el más grande y 6 <code># el más pequeño <p dir="auto">Es decir: <pre><code># Tamaño con 1 ## Tamaño con 2 ### Tamaño con 3 #### Tamaño con 4 ##### Tamaño con 5 ###### Tamaño con 6 <p dir="auto">Va a generar: <blockquote> <h1>Tamaño con 1 <h2>Tamaño con 2 <h3>Tamaño con 3 <h4>Tamaño con 4 <h5>Tamaño con 5 <h6>Tamaño con 6 <p dir="auto"><strong><em>NOTA: <code>El escribir de forma excesiva con tamaños grandes de letra, véase títulos, puede llegar a considerarse SPAM <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Negrita, Cursiva, Negrita Cursiva y Tachado <p dir="auto">Puedes hacer uso de distintos efectos en tu texto, con la finalidad de hacer énfasis en ciertas palabras o frases en tu post. <h5>Cursiva <p dir="auto">Con <code>* un <strong>Asterisco al inicio y final de tu texto, puedes escribir en cursivas <p dir="auto">Colocas: <pre><code>*Aquí tu texto* <p dir="auto">Y obtienes: <blockquote> <p dir="auto"><em>Tu texto pero en Cursivas <h5>Negrita <p dir="auto">Con <code>** un par de <strong>Asteriscos al inicio y final de tu texto, puedes escribir en negrita <p dir="auto">Colocas: <pre><code>**Aquí tu texto** <p dir="auto">Y obtienes: <blockquote> <p dir="auto"><strong>Tu texto pero en Negritas <h5>Negrita y Cursiva <p dir="auto">¿Sabes que pasa si colocas <code>*** tres <strong>Asteriscos al inicio y final de tu texto? Pues combinas los códigos anteriores. <p dir="auto">Colocas: <pre><code>***Aquí tu texto*** <p dir="auto">Y obtienes: <blockquote> <p dir="auto"><strong><em>Tu texto pero en Negritas y Cursivas a la vez <h5>Tachado <p dir="auto">Por ultimo, puedes utilizar <code>~~ dos <strong>Virgulilla <em>(AltGr+5 Teclado Español) al inicio y final de tu texto, y tachar un texto. <p dir="auto">Colocas: <pre><code>~~Aquí tu texto~~ <p dir="auto">Y obtienes: <blockquote> <p dir="auto"><del>Tu texto pero ¡Cancelado! <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Citas <p dir="auto">Con <code>> <strong>Mayor que antes de tu texto, puedes crear una cita. <p dir="auto">Es decir hacemos lo siguiente: <pre><code>> Colocas el símbolo y comienzas con el texto que quieres citar. Esto es muy útil para traducciones también. <p dir="auto">Y obtendrás: <blockquote> <p dir="auto">Colocas el símbolo y comienzas con el texto que quieres citar. Esto es muy útil para traducciones también. <p dir="auto"><strong><em>NOTA: <code>Ahora que hablamos de citar y tengo tu atención, no olvides citar las fuentes de textos ajenos, incluso si parafraseas; de las imágenes que no te pertenecen y de todo el contenido de otros autores que uses en tu post <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Linea de código <p dir="auto">Con <code><code></code> puedes hacer una linea de código, en la cual el Markdown y otros códigos HTML no funcionan, y se muestra valga la redundancia el código. <p dir="auto">También puedes utilizar <code>``` tres tildes/acentos al inicio y final de tu texto. <p dir="auto">Es decir: <pre><code><code>Lo puedes hacer así</code> ```y también de esta manera, el resultado es el mismo``` <p dir="auto">Y obtienes: <blockquote> <p dir="auto"><code>Lo puedes hacer así<br /> <code>y también de esta manera, el resultado es el mismo <p dir="auto"><strong><em>NOTA: <code>Recuerda que el uso excesivo de funciones, sin razón aparente puede ser considerado Spam, no hagas todo un post en lineas de código porque se vea bonito. <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Bloque de código <p dir="auto">Con <code>~~~ tres <strong>Virgulilla <em>(AltGr+5 Teclado Español) antes y después de tus párrafos, puedes hacer un bloque de códigos.<br /> Su función es la misma que la de la Linea, solo que para párrafos enteros. <p dir="auto">Utilizamos <pre><code>Primero colocas esto ▶ ~~~ ¡Y aquí tus párrafos de Texto! Luego colocas esto ▶ ~~~ <p dir="auto">Y obtienes: <pre><code>Tus párrafos de Texto! <p dir="auto"><strong><em>NOTA: <code>Recuerda que el uso excesivo de funciones, sin razón aparente puede ser considerado Spam, no hagas todo un post en bloque de código. <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Centrar y Justificar texto <h5>Centrar <p dir="auto">Con el código <code><p><center></center></p> abrazando nuestro texto <em>(Una parte del código al inicio, y otra al final) podremos centrar texto e imágenes. <p dir="auto">Colocamos: <pre><code><p><center>Aquí tu texto, o el Link de la imagen</center></p> <p dir="auto">Y obtienes: <h5><p dir="auto"><center>Así tu texto, o la imagen <hr /> <h5>Justificar / Alinear Margenes <p dir="auto">Con el codigo <code><p><div class="text-justify"></div></p> abrazando nuestro texto <em>(Una parte del código al inicio, y otra al final) podremos Justificar/Alinear los margenes. <p dir="auto">De esta manera: <pre><code><p><div class="text-justify">Incluimos nuestro párrafo a justificar, colocando antes la apertura del código, y finalizando con el código de cierre. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div></p> <p dir="auto">Obtienes: <p dir="auto"><div class="text-justify">Incluimos nuestro párrafo a justificar, colocando antes la apertura del código, y finalizando con el código de cierre. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p> <hr /> <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Alinear la Izquierda o Derecha <em>(Escribir en dos Columnas) <p dir="auto">Con los códigos <code><div class="pull-right"></div> y <code><div class="pull-left"></div> podremos alinear a la derecha, o a la izquierda respectivamente. <p dir="auto">Colocamos por ejemplo: <pre><code><div class="pull-right">Derecha ▶ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="pull-left">◀ Izquierda Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <p dir="auto">Y obtienes tu texto alineado: <div class="pull-right">Derecha ▶ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div class="pull-left">◀ Izquierda Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <hr /> <p dir="auto"><strong><em>NOTA: <code>Este es el mismo código que se utiliza para escribir en dos Columnas, solo debes combinar tanto izquierda como derecha. <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Superíndice y Subíndice <p dir="auto">Los codigos <code> para Superíndice y <code> para Subíndice, son otros de los que soporta el formato de texto de HIVe, y que podemos aplicar en nuestros post. <p dir="auto">Con el Superíndice reducimos el tamaño de nuestro Texto y lo colocamos en la parte superior del texto normal, ejemplo: <pre><code>Mira este texto ^{Este es el Superíndice} <p dir="auto">para obtener: <p dir="auto">Mira este texto <sup>Este es el Superíndice <hr /> <p dir="auto">Mientras que con el Subíndice reducimos el tamaño de nuestro Texto y lo colocamos en la parte inferior del texto normal, ejemplo: <pre><code>Mira este texto _{Este es el Subíndice} <p dir="auto">para obtener: <p dir="auto">Mira este texto <sub>Este es el Subíndice <p dir="auto"><strong><em>NOTA: <code>Reducir el tamaño de textos largos puede dificultar su lectura, no abuses de estos códigos. <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Imágenes <p dir="auto">Aunque existe el codigo <code> para cargar imágenes, yo les recomiendo usar directamente el link de la imagen y borrar los caracteres extra. Esto, debido a qué no en todas las Dapps el codigo se interpreta igual, pero los link si. <p dir="auto">Es decir: <pre><code>Colocando solo el Link de tu imagen https://files.peakd.com/file/peakd-hive/jossduarte/OyBvdS7q-Panda.png <p dir="auto">Va a generar que se vea: <p dir="auto"><span><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/jossduarte/OyBvdS7q-Panda.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/jossduarte/OyBvdS7q-Panda.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/jossduarte/OyBvdS7q-Panda.png 2x" /> <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Links <p dir="auto">Usaremos el código más basico que conozco <code>[]() donde dentro de los <code>[] corchetes, colocaremos la palabra o frase a destacar y dentro de <code>() los paréntesis, agregaremos los links a donde nos gustaría redirigir. <p dir="auto">Es decir: <pre><code>[Click aquí](https://peakd.com/@jossduarte/) <p dir="auto">Va a generar que se vea de esta manera: <p dir="auto"><a href="https://peakd.com/@jossduarte/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Click aquí <hr /> <p dir="auto"><strong><em>NOTA: <code>Este post es para ayudar, y mi mejor consejo es que uses este codigo para reconocer LAS FUENTES, y atribuir el reconocimiento a los autores. <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Listas <p dir="auto">Podemos usar la sintaxis de tipo: <code>número. o cualquiera de estos caracteres <code>*, <code>- y <code>+ para crear listas <p dir="auto">El código sería el siguiente: <pre><code>1. Hola 2. Esta es una lista y hay Truco 2.1 Colocando 4 espacios en Blanco antes. 2.2 Puedes hacer Sub Listas + De los otros Caracteres - No importa cual utilices * Siempre se muestra el mismo <p dir="auto">El resultado será: <ol> <li>Hola <li>Esta es una lista y hay Truco<br /> 2.1 Colocando 4 espacios en Blanco antes.<br /> 2.2 Puedes hacer Sub Listas <ul> <li>De los otros Caracteres <ul> <li>No importa cual utilices <ul> <li>Siempre se muestra el mismo <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h3>Tablas <p dir="auto">Al usar dos <code>|| plecas o barras verticales, podemos crear tablas. Este es el código donde vas a necesitar mas trabajo. El orden es, primero la cantidad de <code>|Título| por columnas que necesites. Luego un salto de linea y una cantidad de <code>|-| igual al numero de columnas. y Por ultimo <code>|Artículos| igual a la cantidad de columnas, y repitiendo el proceso agregaras filas. <pre><code>|columna 1|columna 2|columna 3|columna 4|columna 5|columna 6| < Columnas |-|-|-|-|-|-| < Salto de linea Obligatorío |•|•|•|•|•|•| < Fila 1 |•|•|•|•|•|•| < Fila 2 |•|•|•|•|•|•| < Fila 3 <p dir="auto">El resultado será: <div class="table-responsive"><table> <thead> <tr><th>columna 1<th>columna 2<th>columna 3<th>columna 4<th>columna 5<th>columna 6 <tbody> <tr><td>•<td>•<td>•<td>•<td>•<td>•<td>< Fila 1 <tr><td>•<td>•<td>•<td>•<td>•<td>•<td>< Fila 2 <tr><td>•<td>•<td>•<td>•<td>•<td>•<td>< Fila 3 <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h1>FAQS. <p dir="auto"><strong>¿Se puede escribir a color en Hive? <blockquote> <p dir="auto">Por los momentos NO, aunque HTML permite el color, Markdown no, para de esta forma mantener legibles los textos. <p dir="auto"><strong>¿Se pueden mezclar códigos? <blockquote> <p dir="auto">Si, múltiples códigos pueden usarse, yo por ejemplo uso para mis fuentes esta combinación:<br /> <code><center>_{[**Fuente**](Link)}</center> <p dir="auto"><strong>¿Se pueden usar otros codigos HTML? <blockquote> <p dir="auto">La respuesta es Prueba, en mi experiencia se pueden indexar en tu blog de Hive, códigos como el de reproductores de SoundCloud, pero no se puede el código de Tweets. <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/56HcI2vR-Separador.gif" /> <h1>Conclusión <p dir="auto">A pesar de las limitaciones a las que nos condiciona el Markdown, se pueden obtener maravillas con estos pequeños trucos. Prueba a crear tu propio formato, a combinar, a crear tu propio maquetado que adorne tus publicaciones y las haga mas atractivas de leer. <p dir="auto"><span>Me despido no sin antes agradecer a la gente de <a href="/@rutablockchain">@rutablockchain, quienes fueron mi motivación para la redacción de este post; espero que les sea de utilidad y no olviden dejar su comentario. <p dir="auto"><center><span><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jossduarte/ny43WhjO-AnimacionPc.gif" /> <p>