Hola a todos, hoy les traigo una guía para mejorar la estructura de su publicación en Hive, toda esta información a continuación se puede hacer en el editor, no necesitará instalar nada más ni tener software extra para esto. hay mucha gente que no entiende de esto y para ellos especialmente es esta guía, empezando con: ¿Que es markdown?
Wikipedia lo define así:
Markdown es un lenguaje de marcado ligero creado por John Gruber que trata de conseguir la máxima legibilidad y facilidad de publicación tanto en su forma de entrada como de salida, inspirándose en muchas convenciones existentes para marcar mensajes de correo electrónico usando texto plano.
Puede sonar algo confuso pero es todo lo contrario, el editor de post en Hive utiliza este formato de forma inteligente para ayudarte a editar tus publicaciones sin que tengas ningún conocimiento sobre el lenguaje, es algo similar a lo que hace Word.
Hello everyone, today I'l bring you a guide for improve the estructure of your post in Hive, all this information belows can be done in the editor, you will not need to install anything else or have extra softwares for this. There are many people who do not understand this and for them especially is this guide, starting with: What is markdown?
Wikipedia defines it like this:Markdown is a lightweight markup language created by John Gruber that tries to achieve maximum readability and ease of publication both in its input and output form, taking inspiration from many existing conventions for marking emails using plain text.
It may sound confusing but it is the opposite, the post editor in Hive uses this format intelligently to help you edit your publications without you having any knowledge about the language, it is something similar to what Word does.
Ahora, si bien el editor nos brinda un montón de buenas opciones al momento de escribir nuestras publicaciones, el verdadero potencial de este no esta a la vista, y ese es el motivo de esta publicación, voy a mostrarte como utilizar el lenguaje markdown para embellecer tus post y darles un tono único, la guía sera escalada desde lo mas fácil hasta lo mas avanzado, sin mas que decir, vamos allá.
Si quieres mas saber teoría sobre este lenguaje, puedes hacerlo a través de este enlace
Now, although the editor gives us a lot of good options when writing our publications, the true potential of this is not in sight, and that is the reason for this publication, I am going to show you how to use the markdown language to beautify your post and give them a unique tone, the guide will be escalated from the easiest to the most advanced, without more to say, let's go.
If you want to know more theory about this language, you can do it through this link
EJEMPLO / EXAMPLE:
**Asi es como debes *escribirlo* en tu editor, cuidado con los simbolos.**
** This is how you should * write * it in your editor, watch out for symbols. **
Y asi es como se vera en tu publicacion:
Asi es como debes escribirlo en tu editor, cuidado con los simbolos.
And this is how it will look in your post:
This is how you should write it in your editor, watch out for symbols.
Encabezados / Headings:
Hay hasta seis niveles de encabezados que podemos usar en nuestras publicaciones añadiendo este simbolo '#' seguido de un espacio antes de escribir.
We start with the basics, the headings.
There are up to six levels of headings that we can use in our posts by adding this '#' symbol followed by a space before writing.
# 1 uno
## 2 two
### 3 tres
#### 4 four
##### 5 cinco
###### 6 six
Y se verán así / And looks like this:
1 uno
2 two
3 tres
4 four
5 cinco
6 six
Formateo de texto / Text formatting:
Negritas / Bold:
**Texto de ejemplo en negritas con asteriscos dobles**
__Example text in bold with double underscore__
cursivas / Italic:
*Texto de ejemplo en cursivas con asteriscos sencillo*
_Example italic text with single underscore_
Tachado / Strikethrough:
~~Texto de ejemplo en cursivas con asteriscos sencillo~~
~~ Italic sample text with plain asterisks ~~
Negrita Cursiva / Bold Italic:
**_Texto de ejemplo cursivas y a la vez negritas_**
** _ Example text italic and bold at the same time _ **
Y se verán así / And looks like this:
Negritas / Bold:
Texto de ejemplo en negritas con asteriscos dobles
Example text in bold with double underscore
cursivas / Italic:
Texto de ejemplo en cursivas con asteriscos sencillo
Example italic text with single underscore
Tachado / Strikethrough:
Texto de ejemplo en cursivas con asteriscos sencillo
Italic sample text with plain asterisks
Negrita Cursiva / Bold Italic:
Texto de ejemplo cursivas y a la vez negritas
Example text italic and bold at the same time
Lineas Horizontales / Horizontal Lines:
They are lines that are drawn where the marks can be used to separate text segments
***
Uno
- - -
Two
___
Tres
Y se verán así / And looks like this:
Uno
Two
Tres
Posicionar Texto / Position Text:
You can make the text centered, justified, and even make it align to the right or left
<center>
text you want to center
</center>
<div class="text-justify">
texto que quieres justificar, agregare contenido sin razon para que la oracion se haga mas larga y se pueda apreciar la justificacion. Recuerda, si te está gustando esta publicacion, votala, y sigueme para que sigas viendo mas contenido como este, muchas gracias / text that you want to justify, I will add content without reason so that the sentence is longer and the justification can be appreciated. Remember, if you are liking this publication, vote for it, and follow me so that you continue to see more content like this, thank you very much.
</div>
<div class="text-right"><p>texto hacia la derecha</p>div>
<div class="text-left"><p>text to the left</p>div>
Y se verán así / And looks like this:
¡Sigueme!
¡Dale upvote!
¡compartelo en tu perfil!
Enlaces / Links:
Puedes enlazar texto o incluso imagenes para que al hacer click en ellos te dirija a una pagina en especifico que tu elijas.
You can link text or even images so that clicking on them will direct you to a specific page that you choose.
[Name of the link/Titulo del enlace](Link you wanna add/Enlace al que deseas dirigir)
[](URL de la fuente/Source's link)
Una vez editados los comandos, se ve asi / Once the commands are edited, it looks like this:
Enlace normal / Normal Link:
Mi perfil en PeakD, Sigueme
Imagen que es enlace / Image's link:
Citas / Quotes:
Puedes agregar texto citado cuando estas publicando informacion perteneciente a otra persona.
You can add quoted text when you are posting information belonging to someone else.
Bloque de codigo:
Lei [aqui](link a la cita / Quote URL)
> esto esta citado
> Esto sería una cita normal / This is a normal quote.
>
> > Dentro de ella puedes agregar otra cita / This i a quote inside of another one.
>
> La cita principal llegaría hasta aquí / the main qoute end here.
Y se vera asi / And looks like this:
Lei aqui
esto esta citado / This is a quote.
Esto sería una cita normal / This is a normal quote.
Dentro de ella puedes agregar otra cita / This i a quote inside of another one.
La cita principal llegaría hasta aquí / the main qoute end here.
Como dato curioso, puedes ver en esta publicacion, ejemplos de como utilizo citas para enmarcar el texto traducido del español al ingles, es una muestra de lo versatil que puede ser el lenguaje markdown.
As a curious fact, you can see in this publication, examples of how I use quotes to frame the translated text from Spanish to English, it is a sample of how versatile the markdown language can be.
Tablas / Boards:
Puedes crear tablas para enmarcar datos organizados dentro de tu publicacion.
You can create tables to frame organized data within your post.
Cabecera A | Header B
-- | --
Campo A0 | Field B0
Campo A1 | Field B1
Puedes añadir estos marcos, para tener mayor orden al escribir aunque no cambia nada el resultado final / You can add these frames, to have greater order when writing although the final result does not change anything:
| Cabecera A | Header B |
| ---------- | ---------- |
| Campo A0 | Field B0 |
| Campo A1 | Field B1 |
Tambien puedes añadir mas de 2 cabezeras y mas de 2 campos / You can also add more than 2 headers and more than 2 fields.
| Element | Cantidad | Price |
| :------- | :------: | :-----: |
| Item 1 | 15 | 150$ |
| Item 2 | 3250 | 23,65$ |
| Item 3 | 250 | 13,45$ |
Y se verian asi / And Looks like this:
Cabecera A Header B Campo A0 Field B0 Campo A1 Field B1
Con los marcos añadidos el resultado visual es el mismo / With the added frames the visual result is the same
Cabecera A Header B Campo A0 Field B0 Campo A1 Field B1
Tambien puedes añadir mas de 2 cabezeras y mas de 2 campos / You can also add more than 2 headers and more than 2 fields.
Element Cantidad Price Item 1 15 150$ Item 2 3250 23,65$ Item 3 250 13,45$
Texto en codigo / Code Text:
Si resulta que quieres agregar a tu publicacion algun trozo de texto que no quieres que se formatee, añades este simbolo: `
If it turns out that you want to add a piece of text to your publication that you don't want to be formatted, add this symbol: `
Este es un texto normal `este es un trozo de texto con codigo` este es otro texto normal.
Y se vera asi / And looks like:
Este es un texto normal este es un trozo de texto con codigo este es otro texto normal.
Posicionar imagenes / Positionating images:
Asi como el texto, las imagenes tambien pueden ser movidas para que se ajusten a la linea que queramos, sea central o alguno de los laterales.
As well as the text, the images can also be moved to fit the line we want, be it central or one of the sides.
Derecha / Right:
<div class="pull-right">enlace de la imagen / Image's Link
Nombre de la Fuente / Source's Name
Izquierda / Left:
enlace de la imagen / Image's Link
Nombre de la Fuente / Source's Name</center>a></p>div>
Y una vez editados los campo correspondientes, se veria asi / And once the corresponding fields are edited, it would look like this:
Superponer texto / Overlay text:
Es exactamente lo que estas viendo en este texto que estas leyendo, debajo veras un ejemplo.
It is exactly what you are seeing in this text that you are reading, below you will see an example.
Hola <sup>este texto esta superpuesto / this text is overlayed</sup> aqui continua el parrafo
Se ve asi / Looks like:
Hola este texto esta superpuesto / this text is overlayed aqui continua el parrafo
Dos columnas de texto / Two columns of text:
Este codigo sirve para agregar dos columnas de texto, lo cual resulta bastante llamativo al momento de leer, ya que simula el estilo de un libro.
This code is used to add two columns of text, which is quite striking when reading, since it simulates the style of a book.
<div class=pull-left>ESCRIBE EL TEXTO DE LA COLUMNA IZQUIERDA AQUI. / WRITE THE TEXT IN THE LEFT COLUMN HERE.div><div class=pull-right>ESCRIBE EL TEXTO DE LA COLUMNA DERECHA AQUI. / WRITE THE TEXT IN THE RIGHT COLUMN HERE.div>
Y una vez editado, se veria asi / And once edited, it would look like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac urna varius, mollis urna elementum, egestas nibh. Mauris vehicula tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac urna varius, mollis urna elementum, egestas nibh. Mauris vehicula tellus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac urna varius, mollis urna elementum, egestas nibh. Mauris vehicula tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac urna varius, mollis urna elementum, egestas nibh. Mauris vehicula tellus.
Y asi, amigos lectores, llegamos al final de esta guia, espero que les sea de utilidad, si hay algo que no entiendas o que quieras que te explique mejor, hazmelo saber en los comentarios, de igual manera, si quieres una segunda guia donde te dare consejos utiles de como aplicar estos codigos combinados para hacer publicaciones como estas: Ejemplos de codigos 1 Ejemplos de codigos 2 Ejemplos de codigos 3 o incluso mejores, tambien hazmelo saber en los comentarios y empezare a trabajar en ella, gracias por la atencion.
And so, dear readers, we come to the end of this guide, I hope it will be useful to you, if there is something you do not understand or that you want me to explain better, let me know in the comments, in the same way, if you want a second guide where I will give you useful tips on how to apply these combined codes to make posts like these: Code's examples 1 Code's examples 2 Code's examples 3 or even better, also let me know in the comments and I'll start working on it, thanks for your attention.
Este post fue creado por mi (@mvl2304) y es totalmente de mi autoria.
Si te gustó, te invito a que me sigas y que apoyes este contenido haciendole repost y upvote.
This post was created by me (@mvl2304) and is entirely my own.
If you liked it, I invite you to follow me and support this content by reposting and upvote it.
