Markdown is probably the best way to take notes on a PC. We explain how to use it

Markdown

To take notes on a computer, many of us know the typical one: Word or LibreOffice Writer. It is a good option for some scenarios, but if what we want is to take notes, do it quickly, have them in a certain format and open with a not very heavy viewer, it is probably best to use what is known as Markdown. Here we are going to explain what it is, how the text is "marked" and we will name some editors/viewers that are worthwhile in Linux.

Markdown is a light markup, whose objective is to maximize readability and ease of publication, both in its input and output form. Like HTML, Markdown displays text in different ways depending on the markup we use on it, such as bold and italics. It was created by John Gruber and the late Aaron Swartz, and without going much further into its history we are going to explain how to use it.

How to create Markdown documents

Creating a Markdown document is something that we can do it with any plain text editor. This is the same in HTML, but Markdown is easier to write. HTML uses input and output tags, and in all cases they have less than () symbols, which is not the most comfortable for typing, at least on a Spanish keyboard. Many of the marks that we will use in Markdown also have to be placed before and after each word, but using two asterisks is not the same as the symbols that HTML uses. The only thing you need, in addition to the markups, is to save the file with the .md or .markdown extension.

Markdown It doesn't have as many options as HTML, but he doesn't intend it either. There are some that we can find on the Internet that may not be supported by a document viewer compatible with Markdown, but the most used ones are, and they are these:

Spaces in Markdown

I would not want to start or end the article without this section. And in some brands, such as those for headers or lists, you have to put a space between the symbol and the text. We may get the expected result without these spaces, but it improves readability and is considered good practice.

Header Headlines

In HTML they are known as h1-h6. Semantically, they have to be used as the components of an index; You don't have to use them to put larger or smaller text. In theory, the h1 should only be the headline of a page, the h2 are part of the h1, the h3 are part of an h2 and so on. For example, the “How to create Markdown documents” in this article is an h2 that is within the general article with h1, and “Header Headlines” and what will follow will be h3 that are part of the how they are created section.

In HTML the tag would be TEXT, while in Markdown it is with two hash marks in front:

## This would be an h2

The number of pads indicates the number of the header, the maximum being 6.

Bold, italic, strikethrough and highlighting

Texts in bold (b o strong in HTML) and italics (i o em in HTML) look very similar, so much so that it can be confusing. can be put bold text surrounding it with two underscores, and in italics with an underscore on each side. Therefore, three underscores would make the text bold and italic. And exactly the same with the asterisks.

To avoid confusion, I would recommend using an underscore for italics and two asterisks for bold:

**bold font**
 _italics_

It may not be supported in some viewers, but you can cross out text by placing the Ñ mustache in front and behind it twice (~~) and highlight it as with a marker with two equal symbols in front and behind it (==).

~~Striked out~~
==Highlighted==

I don't see the highlighted one in VSCode or some Linux viewers, but I do see it in the notes of the Vivaldi browser.

If you're wondering how to underline, it doesn't exist in Markdown, oddly enough. If you need to underline text, it is best to use the underlined text HTML tag.

Power and subscript

If we want to put a number raised to another, which is the power, can be done by putting the first number, followed by the circumflex (^) and then the power: 2^4 would show 2⁴. There are ways to put the number on the opposite side (subscript), but like marker text, it is not supported by all processors. It is achieved with a mustache of the Ñ on each side of the text or number: h~2~or it looks h2or (if it is not seen, imagine that the 2 is lower).

Paragraphs

Generally no need to use any markup for paragraphs, but you do have to know a couple of things. They have what is known as a hard break, and at first you cannot put text like the following, which would be seen in a poem:

One day in January(space)(space)
Looks like a good day(space)(space)
Tremendous poetry (space)
The blogger wrote (space)(space)

In the previous text, Markdown puts everything in a row, but the trick is to put two spaces at the end of each line. In this way it does respect what we are looking for. Alternatively, you can add a backslash, and it is recommended if you want to put blocks of lines with the same format (bold, italic...) with only two symbols at the beginning and two at the end of the entire block.

Subscriber lists

In HTML there are at least three types of lists, ordered (with numbers in front), unordered (dots in front) and definitions, ol, ul y dl in HTML respectively. In Markdown we have the same thing, and they would be created like this:

Unordered lists

With a dash in front:

- First element
- Second element
- Third element

and also with an asterisk:

*This would go first
* This second
*And the third

or addition symbols:

+ First point
+ Second point
+ Third point

If we want to create a sublist, we will put two of the previous symbols instead of one, three for a sub-sublist and so on.

- Buy
- - Milk
- - Cookies

It can also be done with indentation (several blank spaces).

ordered lists

Ordered lists are created by putting a number followed by a period and then the element:

1. First thing
2. This follows
3. And this later

Or also with a parenthesis instead of the period:

1) Element 1
2) Element 2

To add sublists, you have to add indentation, depending on the level we want to reach. The usual thing is 4 blank spaces or whatever the tab key gives (if pressing it moves the cursor to the right). In the following example, Preparation and Installation are on the far left, while the intermediate points are four spaces in front:

1. Preparation:
    1. The ISO is downloaded.
    2. It is recorded on a USB.
2. Installation:
    1. The USB is inserted into the device.
    2. It...

It would look like:

  1. Preparation:
    1. The ISO is downloaded.
    2. It is recorded on a USB.
  2. Installation:
    1. The USB is inserted into the equipment.
    2. See..

Keep in mind that ordered lists in Markdown always follow an order, never better said. It can be created with 1., 1., 1. and you will see 1., 2., 3.. To break them you have to add text in between with a double line break. And even so, if you then put 2., it will continue with the count.

Data lists

Data lists are those in which a term is followed by a definition, and can be created like this (not supported by many viewers):

Term 1
: Definition 1

Term 2
: Definition 2a
: Definition 2b

Things to do

You can create task lists with an unordered list symbol ('-', '*', or '+'), space, and square brackets. If they are with a blank space, the task remains to be done; with an "x" inside, it is done:

- [ ] Create article
- [x] Congratulate new year

It would look like:

  • Create article
  • Congratulate the new year

The lists can be combined, and here the imagination and needs of each one come into play.

Links in Markdown

There are several ways to add links in Markdown: quick or direct, normal and by reference. The fast one is add the link as is, with the protocol included. For example, https://linuxadictos.com will be seen as a clickable link in most Markdown-compatible viewers. Then we have the normal of this type of language and by reference.

The normal link is placed with the text in square brackets and the link and its title o tooltip (if it exists, in quotes) in parentheses:

[The best Linux blog](https://linuxadictos.com "Or we try")

Links by reference are a little more complicated, but they can be useful because if we need to make changes, modifying the reference will modify all the links that use it. The syntax is similar, but the text will be placed in square brackets followed by the reference in other square brackets. The reference is indicated below. Better with an example than with a thousand words:

[The best Linux blog][LXA] ... ... ... [LXA]: https://linuxadictos.com

References are usually placed at the end of the document.

If we want a link to appear without a hyperlink, we can surround it with back or open accents (`), which is an escaping method that we will talk about later. It will give it some formatting, but it won't link to anything.

Links to IDs

Markdown also allows you to create links to elements with ID. The first way to do it is what is most shared, but it has never worked for me: {#el-id} must be added to headers, behind, and the link, instead of a URL, must include the ID. For example [to images](#images) would lead to the next point if your Markdown was “## Images in Markdown {#images}”.

There are two other ways to add links to IDs:

  • Links to automatic headers: Some word processors, and some viewers support it, add the ID automatically. If the header is "A test", the ID is the same, but all in lower case and replacing the spaces with hyphens. The syntax should be:
[Text that we want it to display](#a-test)
  • Links with HTML ID: this method is adding a tag (such as an "a", but it is not mandatory) with the desired ID, and without any text between opening and closing tags so that it only acts as a reference (). The link would be exactly the same as in the previous point.

If what we are looking for is to return to the top of the document, it is enough to put the hash mark between the parentheses.

An aesthetic trick: if we add somewhere in the code <style>* {scroll-behavior: smooth}</style>, we will see the displacement; won't jump. The problem with this is something I'll explain later: some scopes may show that line as is instead of hiding it.

Images in Markdown

If you have understood the previous point, you will also understand this one. Images are added almost the same as links, with the main difference that the exclamation mark is placed in front of it. For example:

![Linux Mint Wallpapers](https://www.linuxadictos.com/wp-content/uploads/Fondos-de-screenla-de-Victoria.png "Available in January")

From the above:

  • ! indicates that it is an image.
  • [] They contain the alternative text, the "alt" attribute of HTML.
  • () They contain the link to the image, the HTML "src" attribute.
  • You can put the informative text, "title" in HTML, between quotes. There's no need.

If we want the image to lead to another page, which is an image with a link, all we have to do is surround the above in square brackets and add the link behind it in parentheses.

[![Linux Mint Wallpapers](https://www.linuxadictos.com/wp-content/uploads/Fundos-de-screenla-de-Victoria.png "This leads to DuckDuckGo")](https://duckduckgo.com)

As with hyperlinks, links can be added by reference, but in image references they begin with the exclamation mark.

Quotes

Citations in Markdown are created by starting a paragraph with the greater than symbol, for example, Pablinux said:

> I think, then... When do you eat it?

It would show:

I think, then... When do you eat it?

If we needed to nest quotes, more greater than symbols would be used.

> Original quote
>
> > What was mentioned in the quote

It would look like:

Original quote

What was mentioned in the quote

And if we want the quote to include blank lines, each of them must include the symbol in front of them, including those that are empty:

> First witty phrase
>
> End of appointment

would show:

First witty phrase

End of quote.

Custom code

The code is added with a tab or four blank spaces in front of it:

(tab)sudo pacman -Syu

If you put three grave accents and the name after them, some viewers will show the code with special colors, and even the name of the language will be shown in some viewers.

```python
def test():
    hello
```

It would show something like this:

python code

Horizontal lines

Horizontal lines in Markdown can be created by leaving only 3 or more asterisks (***), dashes (—), or underscores (___) on a line. The result is the following:


Boards

Tables in Markdown are basically created by drawing a picture of them:

|First|Second|Third|
|:------|:------:|------:|
|First field|Second field|Third field|
|Something|Something 2|Something 3|

It will show (but in a different format):

First Second Third
First field Second field Third field
Something Something 2 Something 3

It doesn't matter what size we leave in the cells.; the language will format them. In the second row, perhaps the most important, we can indicate that the text is aligned to the left, center or right. The colon (:) indicates where the text goes, just the opposite when we want to center it, we must put the colon in front of and behind the lines.

Mathematical formulas

Markdown also allows you to add mathematical formulas. For example, you can include an online equation with the dollar sign in front and behind it: $x2+y2=z^2$. Also blocks with two dollars:

$$\sum_{i=0}^ni^2 = \frac{(n^2+n)(2n+1)}{6}$$

The result of the above looks like this in VSCode (with a parenthesis in front of the second n, which I missed):

Mathematical operation in Markdown

Escaping characters in Markdown

Sometimes it may be necessary to "escape" some characters. For example, if we put # at the beginning of a line and then a space, it will create an h1. We can avoid this by putting the backslash in front, like this:

\# Headline

And so it would come out as is, without formatting, and without the escape symbol. There are a few more ways, but this is the most used and is the same as other languages.

Markdown with HTML

Markdown partially supports HTML tags and CSS rules, but I wouldn't bet on this. Not all viewers show things the same, and it is important to keep this in mind. For example, if we use GitHub Markdown and we want to align an image, using <img align="left"> We will get it to "float" - floating means that what is below rises and is placed next to it - to the left. It can be put on the opposite side using right, but the center option does not work unless it is wrapped in a block tag like or .

But it can be an option. If we want to put text in red, we can pull HTML and CSS, surround it with a span-type container and, inline (within the tag), add the CSS rules in the "style" attribute. It can be useful, for example, if we want to control the size of an image, but as I said, it does not always work.

When NOT to use Markdown

Markdown is what it is, and it has been designed to create content quickly and for a very specific use. It can be used for personal notes or as an HTML preprocessor, but You should not use it if you have to work in a group that does not use it. The most widespread is to use word processors, more specifically Word and its .docx, so I would not use Markdown if I plan to share my work. They probably don't even know how to view them, unless we give them the link to an article like this ;)

Markdown editors for Linux

This article has been longer than expected, and perhaps it is worth leaving this for another post. Maybe it would be a good idea to mention some in passing, such as Joplinapostrophe or Visual Studio Code for those who want to have everything in one place. Like viewers, some default document viewers can display their content.

Whatever you choose, it's worth using Markdown for personal notes. Try it and you'll tell me.

Summary table

Objective Syntax
Header # Text (up to 6 pads)
Bold type **Text** (also two underscores)
Italics _Text_ (also an asterisk)
Strikethrough ~~Text~~
Highlighted ==Text==
Underlined Text
Power ^ + number
Subscript ~ Text ~
  • First
  • Second
  • Third
'*', '-' or '+' + Text
  1. First
  2. Second
  3. Third
Number + '.' or ')' + Text
First
Second
Third
‘*’, ‘-‘ or ‘+’ + ‘[ ]’ or ‘[x]’ + Text
Links [Anchor](link «title»)
Images ![Alt ​​text](link)
Quote > Text
Código `Text`. ̀ ̀ ̀ Text ̀ ̀ ̀ for blocks
Horizontal lines '***', '-' either '___'
Boards Drawing of them (see above)
Maths $formula$, $$$formula$$$ for blocks
Escape character "\" in front of

Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: AB Internet Networks 2008 SL
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.