Markdown és, probablement, la millor manera de prendre apunts a un PC. T'expliquem com fer-lo servir

Markdown

Per prendre notes en un equip informàtic, molts coneixem el que és típic: Word o Writer de LibreOffice. És una bona opció per a alguns escenaris, però si el que volem és prendre notes, fer-ho ràpid, que tinguin cert format i s'obrin amb un visor no gaire pesat, probablement el millor sigui fer servir el que es coneix com Markdown. Aquí t'explicarem què és, com es «marca» el text i anomenarem alguns editors/visors que val la pena a Linux.

Markdown és un llenguatge de marques lleuger, l'objectiu del qual és maximitzar la llegibilitat i facilitat de publicació, tant en la forma d'entrada com de sortida. Com l'HTML, Markdown mostra el text de diferents formes depenent de la marca que usem en ell, com ara negretes i cursives. Va ser creat per John Gruber i el mort Aaron Swartz, i sense entrar molt més en la seva història explicarem com fer-lo servir.

Com crear documents de Markdown

Crear un document de Markdown és una cosa que podem fer amb qualsevol editor de text pla. Això és igual a HTML, però el Markdown és més fàcil d'escriure. HTML utilitza etiquetes d'entrada i sortida, i tenen en tots els casos símbols menor que (), cosa que no és el més còmode per escriure, almenys en un teclat en espanyol. Moltes de les marques que farem servir a Markdown també s'han de posar davant i darrere de cada paraula, però no és el mateix fer servir dos asteriscs que els símbols que fa servir l'HTML. L'únic que cal, a més de les marques, és desar el fitxer amb l'extensió .md o .markdown.

Markdown no té tantes opcions com HTML, però tampoc ho pretén. N'hi ha algunes que podem trobar a Internet que podrien no estar suportades per un visor de documents compatible amb Markdown, però les més usades sí que ho estan, i són aquestes:

Espais a Markdown

No voldria començar ni acabar l'article sense aquest apartat. I és que en algunes marques, com les de capçaleres o llistes, cal posar-hi un espai entre el símbol i el text. Potser obtindrem el resultat esperat sense aquests espais, però millora la llegibilitat i es considera una bona pràctica.

Titulars de capçalera

En HTML són coneguts com h1-h6. Semànticament, s'han de fer servir com els components d'un índex; no cal fer-los servir per posar text més gran o més petit. En teoria, l'h1 només ha de ser titular d'una pàgina, els h2 formen part de l'h1, els h3 són part d'un h2 i així successivament. Per exemple, el «Com crear documents de Markdown» d'aquest article és un h2 que està dins de l'article general amb h1, i «Titulars de capçalera» i el que seguiran seran h3 que formen part de l'apartat de com es creen.

A HTML l'etiqueta seria TEXT, mentre que a Markdown és amb dos coixinets davant:

## Això seria un h2

El nombre de coixinets indica el número de la capçalera, sent el màxim el 6.

Negreta, cursiva, ratllat i ressaltat

Els textos en negreta (b o forta en HTML) i cursiva (i o em a HTML) s'assemblen molt, tant que pot arribar a confondre. Es pot posar text en negreta envoltant el mateix amb dos guions baixos, i en cursiva amb un guió baix a cada costat. Per tant, tres guions baixos posarien el text en negreta i cursiva. I exactament el mateix amb els asteriscs.

Per no confondre'ns, jo recomanaria fer servir un guió baix per a la cursiva i dos asteriscs per a la negreta:

**negreta**
 _cursiva_

Pot ser que no es suporti en alguns visors, però es pot ratllar text posant davant i darrere el bigoti de la Ñ dues vegades (~~) i ressaltar com amb un retolador amb dos símbols igual davant i darrere (==).

~~Tacat~~
==Resaltat==

El del ressaltat no el veig a VSCode ni alguns visors de Linux, però sí a les notes del navegador Vivaldi.

Si t'estàs preguntant com subratllar, no existeix a Markdown, per estrany que sembli. Si necessiteu subratllar text, el millor és que utilitzeu l'etiqueta d'HTML text subratllat.

Potència i subíndex

Si volem posar un nombre elevat a un altre, el que és la potència, es pot fer posant el primer número, seguit del circumflex (^) i després la potència: 2^4 mostraria 2⁴. Hi ha maneres de posar el número a la part contrària (subíndic), però com que el text marcat amb retolador, no és compatible amb tots els processadors. S'aconsegueix amb un bigoti de la Ñ a cada costat del text o número: h~2~o es veu h2o (si no es veu, imagineu que el 2 és més avall).

paràgrafs

En general no cal fer servir cap marca per als paràgrafs, però sí que cal saber un parell de coses. Tenen el que es coneix com a ruptura dura, i al principi no es pot posar text com el següent, el que es veuria en una poesia:

Un dia de gener(espai)(espai)
Sembla un bon dia(espai)(espai)
Tremenda poesia(espai)(espai)
Ha escrit el blocaire(espai)(espai)

En el text anterior, Markdown ho posa tot seguit, però el truc és posar dos espais al final de cada línia. D'aquesta manera sí que respecta el que busquem. Com a alternativa, es pot afegir una barra invertida, i es recomana si es volen posar blocs de línies amb el mateix format (negreta, cursiva…) amb només dos símbols al principi i dos al final de tot el bloc.

Llistes

A HTML hi ha almenys tres tipus de llistes, les ordenades (amb números davant), desordenades (punts davant) i de definicions, ol, ul y dl en HTML respectivament. A Markdown tenim el mateix, i es crearien així:

Llistes desordenades

Amb un guió al davant:

- Primer element
- Segon element
- Tercer element

i també amb un asterisc:

* Això aniria primer
* Això segon
* I el tercer

o símbols de suma:

+ Primer punt
+ Segon punt
+ Tercer punt

Si volem crear una subllista, posarem dos dels símbols anteriors en comptes d'un, tres per a una subsublista i així successivament.

- Comprar
- - Llet
- - Galetes

També es pot fer amb sagnat (diversos espais en blanc).

Llistes ordenades

Les llistes ordenades es creen posant un número seguit d'un punt i després l'element:

1. El primer
2. Això el segueix
3. I això després

O també amb un parèntesi en comptes del punt:

1) Element 1
2) Element 2

Per afegir subllistes, cal afegir sagnat, depenent del nivell al que vulguem arribar. El més habitual són 4 espais en blanc o el que doni el tabulador (si en pressionar-lo desplaça el cursor a la dreta). Al següent exemple, Preparació i Instal·lació estan a l'esquerra del tot, mentre que els punts intermedis estan amb quatre espais davant:

1. Preparació:
    1. Es descarrega la ISO.
    2. S'enregistra en un USB.
2. Instal·lació:
    1. S'introdueix l'USB a l'ordinador.
    2. Es...

Es veuria com:

  1. Preparació:
    1. Es baixa la ISO.
    2. S'enregistra en un USB.
  2. Instal · lació:
    1. S'introdueix l'USB a l'ordinador.
    2. Es..

Cal tenir en compte que les llistes ordenades a Markdown segueixen sempre un ordre, mai més ben dit. Es pot crear amb 1., 1., 1. i es veurà 1., 2., 3.. Per trencar-les cal afegir text entre mitges amb doble salt de línia. I tot i així, si després se'n posa 2., seguirà amb el compte.

Llistes de dades

Les llistes de dades són aquelles que a un terme segueix una definició, i es poden crear així (no és compatible amb molts visors):

Terme 1
: Definició 1

Terme 2
: Definició 2a
: Definició 2b

Llista de tasques

Es poden crear llistes de tasques amb un símbol de llista desordenada ('-', '*' o '+'), espai i claudàtors. Si estan amb un espai en blanc, la tasca encara s'ha de fer; amb una «x» dins, està feta:

- [ ] Crear article
- [x] Felicitar any nou

Es veuria com:

  • crear article
  • Felicitar l'any nou

Les llistes es poden combinar, i aquí ja hi entra la imaginació i necessitats de cadascú.

Enllaços a Markdown

Hi ha diverses maneres dafegir enllaços a Markdown: el ràpid o directe, el normal i per referència. El ràpid és afegir l'enllaç tal qual, amb el protocol inclòs. Per exemple, https://linuxadictos.com es veurà com un enllaç al qual es podrà fer clic a la majoria de visors compatibles amb Markdown. Després tenim el normal daquest tipus de llenguatge i per referència.

L'enllaç normal es posa amb el text entre claudàtors i l'enllaç i el seu title o informació sobre eines (si existís, entre cometes) entre parèntesis:

[El millor bloc de Linux](https://linuxadictos.com "O ho intentem")

Els enllaços per referència són una mica més complicats, però poden ser útils perquè, si necessitem fer canvis, modificant la referència es modificaran tots els enllaços que la facin servir. La sintaxi és semblant, però es posarà el text entre claudàtors seguit de la referència entre altres claudàtors. Més endavant se n'indica la referència. Millor amb un exemple que amb mil paraules:

[El millor bloc de Linux][LXA] ... ... ... [LXA]: https://linuxadictos.com

Les referències se solen posar al final del document.

Si volem que un enllaç aparegui sense hipervincle, podem envoltar-lo d'accents greus o oberts (`), que és un mètode d'escapament de què parlarem més endavant. Li donarà una mica de format, però no enllaçarà res.

Enllaços a IDs

Markdown també permet crear enllaços a elements amb ID. La primera manera de fer-ho és del que més es comparteix, però a mi no m'ha funcionat mai: heu d'afegir {#el-id} a capçaleres, darrere, i l'enllaç, en comptes d'una URL, ha d'incloure l'ID. Per exemple [a imatges](#imatges) portaria al següent punt si el seu Markdown fos «## Imatges a Markdown {#imatges}».

Hi ha dues maneres més d'afegir enllaços a IDs:

  • Enllaços a capçaleres automàtics: alguns processadors de text, i alguns visors ho suporten, afegeixen l'ID automàticament. Si la capçalera és «Una prova», l'ID és el mateix, però tot en minúscules i substituint els espais per guions. La sintaxi hauria de ser:
[Text que vulguem que mostri](#una-prova)
  • Enllaços amb ID d'HTML: aquest mètode és afegint una etiqueta (com pot ser una a, però no és obligatori) amb l'ID desitjat, i sense cap text entre etiquetes d'obertura i tancament perquè només actuï com a referència (). Lenllaç seria exactament igual que en el punt anterior.

Si el que busquem és tornar a dalt del document, n'hi ha prou de posar el coixinet entre els parèntesis.

Un truc estètic: si afegim en alguna part del codi <style>* {scroll-behavior: smooth}</style>, veurem el desplaçament; no farà un salt. El que és dolent amb això és una cosa que explicaré més endavant: és probable que alguns visors mostrin aquesta línia tal com en comptes d'amagar-la.

Imatges a Markdown

Si has entès el punt anterior, aquest també ho entendràs. S'hi afegeixen imatges gairebé igual que els enllaços, amb la principal diferència que es posa el símbol d'exclamació al davant. Per exemple:

![Fons de Linux Mint](https://www.linuxadictos.com/wp-content/uploads/Fons-de-pantalla-de-Victoria.png "Disponible al gener")

D'això:

  • ! indica que és una imatge.
  • [] contenen el text alternatiu, l'atribut alt d'HTML.
  • () contenen l'enllaç a la imatge, l'atribut src d'HTML.
  • Entre cometes es pot posar el text informatiu, «title» en HTML. No cal.

Si volem que la imatge porti a una altra pàgina, el que és una imatge amb enllaç, l'únic que cal fer és envoltar l'anterior entre claudàtors i afegir darrere l'enllaç entre parèntesis.

[![Fons de Linux Mint](https://www.linuxadictos.com/wp-content/uploads/Fons-de-pantalla-de-Victoria.png "Això porta a DuckDuckGo")](https://duckduckgo.com)

Com als hipervincles, es poden afegir els enllaços per referència, però a les referències de les imatges comencen amb el símbol d'exclamació.

cites

Les cites a Markdown es creen començant un paràgraf amb el símbol de més gran què, per exemple, Pablinux va dir:

> Penso, després... Quan es menja?

Mostraria:

Penso, després… Quan es menja?

Si necessitéssim niar cites, es faran servir més símbols més gran què.

> Cita original
>
> > El citat a la cita

Es veuria com:

Cita original

El citat a la cita

I si volem que la cita inclogui línies en blanc, cadascuna ha d'incloure davant el símbol, incloses aquelles que són buides:

> Frase enginyosa primera
>
> Final de la cita

mostraria:

Frase enginyosa primera

Fi de la cita.

Codi

El codi s'afegeix amb una tabulació o quatre espais en blanc davant seu:

(tabulació)sud pacman -Syu

Si es posen tres accents greus i darrere el nom, alguns visualitzadors mostraran el codi amb colors especials, i fins i tot es mostrarà el nom del llenguatge en algun visor.

```python
def prova():
    hola
````

Mostraria una cosa així:

Codi Python

Línies horitzontals

Les línies horitzontals a Markdown es poden crear deixant només 3 o més asteriscs (***), guions (—) o guions baixos (___) en una línia. El resultat és el següent:


taules

Les taules a Markdown es creen bàsicament fent-ne un dibuix:

|Primer|Segon|Tercer|
|:------|:------:|------:|
|Primer camp|Segon camp|Tercer camp|
|Alguna cosa|Alguna cosa 2|Alguna cosa 3|

Mostrarà (però amb un altre format):

primer Segon tercer
Primer camp Segon camp Tercer camp
alguna cosa Alguna cosa 2 Alguna cosa 3

És igual la mida que deixem a les cel·les; el llenguatge els donarà format. A la segona fila, potser la més important, podem indicar que el text s'alineï a l'esquerra, centre o dreta. Els dos punts (:) indiquen on va el text, tot al contrari quan volem centrar-lo, que hem de posar els dos punts davant i darrere de les línies.

fórmules matemàtiques

Markdown també permet afegir fórmules matemàtiques. Per exemple, es pot incloure una equació en línia amb el símbol del dòlar davant i darrere: $x2+y2=z^2$. També blocs amb dos dòlars:

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

El resultat de l'anterior es veu a VSCode així (amb un parèntesi davant de la segona n, que se'm va passar):

Operació matemàtica a Markdown

Escapar caràcters a Markdown

De vegades pot ser necessari “escapar” alguns caràcters. Per exemple, si # posem al principi d'una línia i després un espai, ens crearà un h1. Podem evitar-ho posant la barra invertida davant d'aquesta manera:

\# Titular

I així sortiria tal qual, sense format, i sense el símbol d'escapament. Hi ha algunes maneres més, però aquesta és la més usada i és la mateixa que usen altres llenguatges.

Markdown amb HTML

Markdown suporta parcialment les etiquetes d'HTML i regles CSS, però jo no apostaria per això. No tots els visors mostren les coses igual, i és important tenir-ho en compte. Per exemple, si fem servir el Markdown de GitHub i volem alinear una imatge, usant <img align="left"> aconseguirem que «floti» -flotar és que això de baix puja i es posa al seu costat- a l'esquerra. Es pot posar al costat contrari usant right, però l'opció de centrar no funciona tret que s'emboliqui en una etiqueta de bloc com o .

Però sí que pot ser una opció. Si volem posar un text en vermell, es pot estirar HTML i CSS, envoltar-lo amb un contenidor tipus span i, en línia (dins de l'etiqueta), afegir les regles CSS a l'atribut «style». Podeu anar bé, per exemple, si volem controlar la mida d'una imatge, però el que he dit, no funciona sempre.

Quan NO utilitzar Markdown

Markdown és el que és i s'ha dissenyat per crear contingut ràpid i per a un ús molt concret. Podeu servir per a notes personals o com un preprocessador d'HTML, però no cal fer-lo servir si cal treballar en un grup que no l'utilitzi. El més estès és fer servir processadors de text, més concretament Word i els seus .docx, per la qual cosa jo no faria servir Markdown si tinc pensat compartir els meus treballs. Probablement no sàpiguen ni com visualitzar-los, tret que li passem l'enllaç a un article com aquest ;)

Editors de Markdown per a Linux

Aquest article s'ha allargat més del que s'esperava, i potser val la pena deixar això per a un altre post. Potser sí que seria bona idea esmentar-ne alguns de passada, com JoplinApostrofació o Visual Studio Code per a qui vulgui tenir-ho tot en un mateix lloc. Com a visors, alguns visors de documents per defecte poden mostrar-ne el contingut.

S'esculli el que s'esculli, val la pena utilitzar Markdown per a les notes personals. Proveu-ho i ja em direu.

taula resum

objectiu sintaxi
capçalera # Text (fins a 6 coixinets)
Negrita **Text** (també dos guions baixos)
cursiva _Texto_ (també un asterisc)
ratllat ~~Text~~
ressaltat ==Text==
subratllat Text
potència ^ + numero
subíndex ~ Text ~
  • primer
  • Segon
  • tercer
‘*’, ‘-’ o ‘+’ + Text
  1. primer
  2. Segon
  3. tercer
Número + ‘.’ o ‘)’ + Text
primer
Segon
tercer
'*', '-' o '+' + '[ ]' o '[x]' + Text
Enllaços [Anchor](enllaç «title»)
imatges ![Text alt](enllaç)
cita > Text
Código `Text`. ̀ ̀ ̀ Text ̀ ̀ ̀ per a blocs
Línies horitzontals ‘***’, ‘—’ o ‘___’
taules Dibuix d'elles (veure a dalt)
Matemàtiques $fórmula$, $$$fórmula$$$ per a blocs
Escapar caràcter «\» davant

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: AB Internet Networks 2008 SL
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.