Markdown es un lenguaje de marcado que facilita la aplicación de formato a un texto empleando una serie de caracteres de una forma especial

• Introducción
• Entorno de trabajo
• Sintaxis básica
• Lists
• Links
• Images
• Table
• Code
• Gitlab
• Task: Wildlife
• Pending

Introducción

En principio, Markdown fue pensado para elaborar textos cuyo destino iba a ser la web con más rapidez y sencillez que si estuviésemos empleando directamente HTML.

Cuando creas un archivo con formato Markdown, agregas sintaxis Markdown al texto para indicar qué palabras y frases deben verse diferentes.

Por ejemplo, para indicar un encabezado, se agrega un signo de número antes de él (por ejemplo: # Heading One).

O para poner una frase en negrita, se agregan dos asteriscos antes y después de ella (por ejemplo: **this text is bold**).

Entorno de trabajo

Crea un nuevo proyecto en Gitlab.

Crea un fichero hello.md con VS Code (o Kotlin - Idea ).

Añade este texto:

# Hello

William Shakespeare Books:

* Romeo and Juliet
* King Lear
* Othello

Puedes visualizar el texto con “Preview”:

Sintaxis básica

Todas las aplicaciones Markdown admiten la sintaxis básica descrita en el documento de diseño original de Markdown.

Encabezados

Para crear un encabezado, agrega el carácter numeral (#) antes de una palabra o frase.

El número de carácteres numerales se corresponde al nivel del encabezado.

Por ejemplo, para crear un encabezado de nivel tres (<h3>), utiliza tres signos numerales

### My Header

Recuerda:

• Coloca siempre un espacio entre el carácter numeral y el nombre del encabezado.
• Colocar líneas en blanco antes y después de un encabezado.

Párrafos

Para crear párrafos, utiliza una línea en blanco para separar una o más líneas de texto:

No sangres los párrafos con espacios ni tabulaciones.

Énfasis

Puedes agregar énfasis poniendo el texto en negrita o cursiva.

Para poner texto en negrita, añada dos asteriscos (**) o guiones bajos (__) antes y después de una palabra o frase.

Para poner en negrita la parte central de una palabra y darle énfasis, añada dos asteriscos sin espacios entre las letras.

Para poner texto en cursiva, añada un asterisco (*) o un guion bajo (_) antes y después de una palabra o frase.

Para poner en cursiva la mitad de una palabra y darle énfasis, añada un asterisco sin espacios entre las letras.

Para enfatizar el texto con negrita y cursiva simultáneamente, agrega tres asteriscos o guiones bajos antes y después de una palabra o frase.

Para poner en negrita y cursiva la parte central de una palabra y enfatizarla, agregue tres asteriscos sin espacios entre las letras.

Citas en bloque

Para crear una cita en bloque, agrega una > delante de un párrafo.

> Dorothy followed her through many of the beautiful rooms in her castle.

La salida renderizada se ve así:

Dorothy followed her through many of the beautiful rooms in her castle.

Las citas en bloque pueden contener varios párrafos.

Añade una > en las líneas en blanco entre los párrafos:

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

La salida renderizada se ve así:

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Las citas en bloque se pueden anidar.

Añada un signo >> antes del párrafo que quieras anidar.

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Las citas en bloque pueden contener otros elementos con formato Markdown:

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

La salida renderizada se ve así:

The quarterly results look great!

• Revenue was off the chart.
• Profits were higher than ever.

Everything is going according to plan.

Lists

There are two types of lists in the known universe: unordered and ordered. That’s a fancy way of saying that there are lists with bullet points, and lists with numbers.

To create an unordered list, you’ll want to preface each item in the list with an asterisk ( * ), then follow it with a space. Each list item also gets its own line. For example, a grocery list in Markdown might look like this:

* Milk
* Eggs
* Salmon
* Butter

This Markdown list would render into the following bullet points:

• Milk
• Eggs
• Salmon
• Butter

Flour, Cheese, Tomatoes

An ordered list is prefaced with numbers, instead of asterisks. Take a look at this recipe:

1. Crack three eggs over a bowl
2. Pour a gallon of milk into the bowl
3. Rub the salmon vigorously with butter 4, Drop the salmon into the egg-milk bowl

To write that in Markdown, you’d do this:

1. Crack three eggs over a bowl
2. Pour a gallon of milk into the bowl
3. Rub the salmon vigorously with butter
4. Drop the salmon into the egg-milk bowl

Easy, right? It’s just like you’d expect a list to look.

Cut the cheese, Slice the tomatoes, Rub the tomatoes in flour

* Azalea (Ericaceae Rhododendron)
* Chrysanthemum (Anthemideae Chrysanthemum)
* Dahlia (Coreopsideae Dahlia)

Occasionally, you might find the need to make a list with more depth, or, to nest one list within another. Have no fear, because the Markdown syntax is exactly the same. All you have to do is to remember to indent each asterisk one space more than the preceding item.

For example, in the following list, we’re going to add some sub-lists to each “main” list item, describing the people in detail:

* Tintin
    * A reporter
    * Has poofy orange hair
    * Friends with the world's most awesome dog
* Haddock
    * A sea captain
    * Has a fantastic beard
    * Loves whiskey
        * Possibly also scotch?

When rendered, this list turns into the following grouping:

• Tintin
  • A reporter
  • Has poofy orange hair
  • Friends with the world’s most awesome dog
• Haddock
  • A sea captain
  • Has a fantastic beard
  • Loves whiskey
    • Possibly also scotch?

While you could continue to indent and add sub-lists indefinitely, it’s usually a good idea to stop after three levels; otherwise, your text becomes a mess.

There’s one more trick to lists and indentation that we’ll explore, and that deals with the case of paragraphs. Suppose you want to create a bullet list that requires some additional context (but not another list). For example, it might look like this:

To create this sort of text, your paragraph must start on a line all by itself underneath the bullet point, and it must be indented by at least one space.

For example, the list above looks like this in Markdown:

1. Crack three eggs over a bowl.

   Now, you're going to want to crack the eggs in such a way that you don't make a mess.

   If you _do_ make a mess, use a towel to clean it up!

2. Pour a gallon of milk into the bowl.

   Basically, take the same guidance as above: don't be messy, but if you are, clean it up!

3. Rub the salmon vigorously with butter.

   By "vigorous," we mean a strictly vertical motion. Julia Child once quipped:
   > Up and down and all around, that's how butter on salmon goes.

4. Drop the salmon into the egg-milk bowl.

   Here are some techniques on salmon-dropping:

      * Make sure no trout or children are present
      * Use both hands
      * Always have a towel nearby in case of messes

Notice that the first two items have a single space. This looks a bit odd, so you might want to indent properly to match the characters up (like items three and four). In these paragraphs, you can include all sorts of other Markdown elements, like blockquotes, or even other lists!

1. Cut the cheese
    * Make sure that the cheese is cut into little triangles.

2. Slice the tomatoes
    * Be careful when holding the knife.
    * For more help on tomato slicing, see Thomas Jefferson's seminal essay _Tom Ate Those_.

Links

We’ll now learn how to make links to other websites on the World Wide Web.

There are two different link types in Markdown, but both of them render the exact same way.

Inline link

The first link style is called an inline link. To create an inline link, you wrap the link text in brackets ( [ ] ), and then you wrap the link in parentheses ( ( ) ).

For example, to create a hyperlink to www.github.com, with a link text that says, Visit GitHub!, you’d write this in Markdown: [Visit GitHub!](www.github.com).

You're really, really going to want to see this.

The Latest News from the BBC

Reference link

The other link type is called a reference link. As the name implies, the link is actually a reference to another place in the document.

Here’s an example of what we mean:

Here's [a link to something else][another place].
Here's [yet another link][another-link].
And now back to [the first link][another place].

[another place]: www.github.com
[another-link]: www.google.com

The “references” above are the second set of brackets: [another place] and [another-link]. At the bottom of a Markdown document, these brackets are defined as proper links to outside websites. An advantage of the reference link style is that multiple links to the same place only need to be updated once. For example, if we decide to make all of the [another place] links go somewhere else, we only have to change the single reference link.

Reference links don’t appear in the rendered Markdown. You define them by providing the same tag name wrapped in brackets, followed by a colon, followed by the link.

Do you want to [see something fun][]?

Well, do I have [the website for you][another fun place]!

Images

Images also have two styles, just like links, and both of them render the exact same way. The difference between links and images is that images are prefaced with an exclamation point ( ! ).

Inline image link

The first image style is called an inline image link. To create an inline image link, enter an exclamation point ( ! ), wrap the alt text in brackets ( [ ] ), and then wrap the link in parentheses ( ( ) ). (Alt text is a phrase or sentence that describes the image for the visually impaired.)

For example, to create an inline image link to https://gitlab.com/xtec/data/filebase/-/raw/main/tiger.jpg, with an alt text that says, Tiger, you’d write this in Markdown: ![Tiger](https://gitlab.com/xtec/data/filebase/-/raw/main/tiger.jpg).

[](https://upload.wikimedia.org/wikipedia/commons/5/56/Tiger.50.jpg)

Although you don’t need to add alt text, it will make your content accessible to your audience, including people who are visually impaired, use screen readers, or do not have high speed internet connections.

Reference image link

For a reference image, you’ll follow the same pattern as a reference link. You’ll precede the Markdown with an exclamation point, then provide two brackets for the alt text, and then two more for the image tag, like this: ![Two dolphins][Dolphin] At the bottom of your Markdown page, you’ll define an image for the tag, like this: [Dolphin]: https://gitlab.com/xtec/data/filebase/-/raw/main/dolphin.jpg.

[Black cat][]

[Orange cat][Orange]

[Black]: https://upload.wikimedia.org/wikipedia/commons/a/a3/81_INF_DIV_SSI.jpg

Table

A table is an arrangement of data in rows and columns.

To add a table in Markdown, use the vertical line | to separate each column, and use three or more dashes --- to create each column’s header. A vertical line should also be added at either end of the row.

| Month    | Savings |
| -------- | ------- |
| January  | $250    |
| February | $80     |
| March    | $420    |

The output would look like:

Cell widths can vary, as shown below:

| Month | Savings |
| -------- | ------- |
| January | $250 |
| February | $80 |
| March | $420 |

The output will look exactly the same.

Text Alignment

Align text in the columns to the left, right, or center by adding a colon : to the left, right, or on both side of the dashes --- within the header row.

| Item              | In Stock | Price |
| :---------------- | :------: | ----: |
| Python Hat        |   True   | 23.99 |
| SQL Hat           |   True   | 23.99 |
| Codecademy Tee    |  False   | 19.99 |
| Codecademy Hoodie |  False   | 42.99 |

• :-- means the column is left aligned.
• --: means the column is right aligned.
• :-: means the column is center aligned.

Text Formatting

Text can be formatted within tables. For example, links, emphasis, and inline code (words or phrases in backticks only, not code blocks) are all readily available for use within a table.

Several formatting options are not available within tables, including:

• Headings
• Blockquotes
• Horizontal rules
• Images
• Lists
• HTML tags

Code

Highlight anything that should be viewed as code and not standard text.

Inline code is formatted with single backticks (`) :

Inline `code` has `back-ticks around` it.

When rendered, the example looks similar to:

Inline code has back-ticks around it.

For a similar effect with a larger code example, you can use a code block.

To create a code block fence an entire block of code with:

• Triple backticks (```). You can use more than three backticks, as long as both the opening and closing set have the same number.
• Triple tildes (~~~).

For example:

Python code block:

``` py
def function():
    #indenting works just fine in the fenced code block
    s = "Python code"
    print s
```

TypeScript code block:

``` ts
let s = "TypeScript syntax highlighting";
console.log(s);
```

The previous examples render as:

def function():
    s = "Python code"
    print s

let s = "TypeScript syntax highlighting";
console.log(s);

Syntax highlighting

GitLab uses the Rouge Ruby library for more colorful syntax highlighting in code blocks. For a list of supported languages visit the Rouge project wiki. Syntax highlighting is supported only in code blocks, so you can’t highlight inline code.

To fence and apply syntax highlighting to a block of code, append the code language to the opening code declaration, after the three back-ticks (```) or three tildes (~~~).

Code blocks that use plaintext or have no code language specified have no syntax highlighting:

No language indicated, so **no** syntax highlighting.
s = "No highlighting is shown for this line."
But let's throw in a <b>tag</b>.

When rendered, the example looks similar to:

No language indicated, so **no** syntax highlighting.
s = "No highlighting is shown for this line."
But let's throw in a <b>tag</b>.

Gitlab

GitLab Flavored Markdown consists of the following:

• Core Markdown features, based on the CommonMark specification.
• Extensions from GitHub Flavored Markdown.
• Extensions made specifically for GitLab.

Docs

Task: Wildlife

Create a GitLab repository named wildlife.

In the repository, create a README.md file that introduces the project and provides an overview of the wildlife topic you have chosen.

Create additional Markdown files for different sections of your documentation, such as:

• introduction.md: An introduction to the wildlife topic.
• habitat.md: Information about the habitat of the species or ecosystem.
• behavior.md: Details about the behavior and characteristics.
• conservation.md: Information on conservation efforts and how readers can help.

Use internal links to connect these pages. For example, in README.md, link to introduction.md, and within introduction.md, link to other sections like habitat.md.

Incorporate various Markdown features:

• Use headings to structure your content.
• Apply emphasis (bold and italics) to highlight important information.
• Create lists to organize facts or steps.
• Include images relevant to your topic with proper alt text.
• Add tables to present data clearly.
• Use blockquotes for notable quotes or references.
• Include code blocks if you need to show examples (e.g., scientific names or data).
• Utilize reference links for external resources.

Once completed, push your changes to the GitLab repository and ensure that all links work correctly and that the documentation is easy to navigate.

Pending

• Markdown: Syntax
• Markdown Guide