Tornar al blog

Com subratllar a Markdown

La guia completa dels subratllats a Markdown. Aprèn a subratllar paraules i a donar format als subratllats a Markdown perquè tot es mostri correctament després de publicar-ho.

Benjamin McBrayer // Publicat: 11 de maig del 20266 min de lectura

A diferència del format de negreta i de cursiva, no hi ha cap sintaxi nativa de subratllat a Markdown integrada al llenguatge. Markdown es va dissenyar per encaixar molt bé amb HTML, i com que el text subratllat es confon fàcilment amb els enllaços al web, els creadors el van deixar fora a propòsit.

Això no vol dir que no hi puguis fer res. Hi ha diverses maneres fiables de subratllar a Markdown segons la plataforma que utilitzis i el nivell de control que tinguis sobre la sortida renderitzada.

Aquesta guia repassa tots els mètodes perquè puguis subratllar text en Markdown en qualsevol situació.

Per què Markdown no té sintaxi de subratllat

Markdown el va crear John Gruber el 2004 com una manera senzilla d'escriure contingut que es convertís netament en HTML. La negreta utilitza dos asteriscs, la cursiva un asterisc i, en algunes variants, el ratllat utilitza tildes. Però el subratllat es va excloure deliberadament.

El motiu és pràctic. Al web, el text subratllat gairebé sempre indica un enllaç clicable. Si Markdown permetés el subratllat natiu, els lectors confondrien constantment les paraules subratllades amb enllaços i això crearia una experiència confusa. La majoria de guies d'estil per a contingut web també desaconsellen el subratllat per aquesta mateixa raó.

Tot i així, hi ha casos legítims en què cal subratllar text a Markdown, com ara textos acadèmics, documents formals o plataformes on els enllaços tenen un estil diferent.

Com subratllar a Markdown amb HTML

El mètode més àmpliament compatible per subratllar text a Markdown és utilitzar directament l'etiqueta HTML <u>:

This is <u>underlined text</u> in a sentence.

Es renderitza com: This is underlined text in a sentence.

Com que la majoria d'analitzadors de Markdown permeten HTML en línia, aquest enfocament funciona a GitHub, GitLab, Jupyter Notebooks i molts generadors de llocs estàtics. És la resposta més directa per a qualsevol que busqui maneres de crear sintaxi de subratllat a Markdown, encara que tècnicament fa servir HTML i no Markdown pur.

Quan pot ser que l'etiqueta <u> no funcioni

Algunes plataformes eliminen les etiquetes HTML per motius de seguretat. Discord, Slack i alguns editors de CMS ignoraran o esborraran les etiquetes <u> completament. Si estàs treballant en algun d'aquests entorns, necessitaràs un enfocament diferent.

Utilitzar CSS per subratllar text a Markdown

Si tens accés a estils personalitzats, el CSS et dóna la màxima flexibilitat. Pots utilitzar una etiqueta <span> amb un estil en línia:

This is <span style="text-decoration: underline;">underlined text</span> in a sentence.

També, si controles el full d'estils del teu lloc o de la teva documentació, pots definir una classe personalitzada:

.underline {
  text-decoration: underline;
}

I després utilitzar-la al teu Markdown:

This is <span class="underline">underlined text</span> in a sentence.

Aquest mètode és ideal per a blogs, llocs de documentació i qualsevol entorn on gestionis el CSS. Manté el Markdown més net que els estils en línia i et dóna un format consistent a tot el projecte.

Subratllat de Markdown en plataformes concretes

Cada plataforma gestiona el format de subratllat a la seva manera. Així és com cal abordar-ho als entorns més habituals.

GitHub

GitHub Flavored Markdown admet HTML en línia, així que l'etiqueta <u> funciona als fitxers README, a les issues, a les descripcions de pull requests i als comentaris. Això fa que sigui el mètode de subratllat a Markdown més fàcil per als usuaris de GitHub.

Jupyter Notebooks

Jupyter renderitza les cel·les de Markdown amb suport complet per a HTML. Tant l'etiqueta <u> com els enfocaments basats en CSS funcionen amb fiabilitat. També pots utilitzar l'etiqueta <ins>, que semànticament representa text inserit però que es renderitza amb un subratllat per defecte:

This is <ins>underlined text</ins> in a notebook.

Discord i Slack

Ni Discord ni Slack admeten el subratllat de Markdown de manera nativa. Discord utilitza la seva pròpia variant de Markdown, però no inclou cap sintaxi de subratllat. Slack fa servir un sistema de format totalment propi. En tots dos casos, no hi ha cap solució alternativa dins de la mateixa entrada de missatges.

Obsidian i aplicacions de notes

Algunes aplicacions per prendre notes com Obsidian admeten fragments de CSS personalitzats. Si la teva aplicació ho permet, pots definir una classe de subratllat al CSS i referenciar-la a les notes. Consulta la documentació concreta de l'aplicació per a més detalls sobre com habilitar estils personalitzats.

Utilitzar l'etiqueta <ins> com a alternativa

L'etiqueta <ins> és un element HTML que representa text que s'ha inserit a un document. Els navegadors la renderitzen amb un subratllat per defecte, cosa que la converteix en una alternativa semàntica a l'etiqueta <u>:

The meeting is on <ins>Thursday</ins>, not Wednesday.

La diferència entre <u> i <ins> és bàsicament de significat. Fes servir <u> quan només vulguis el subratllat visual. Fes servir <ins> quan vulguis indicar que un text s'ha afegit o modificat, com per exemple en una revisió o en un historial d'edicions.

Les dues etiquetes produeixen el mateix resultat visual a la majoria d'analitzadors de Markdown que admeten HTML.

Solucions alternatives quan HTML no és compatible

Si treballes en una plataforma que elimina les etiquetes HTML i no té cap suport per al subratllat, les teves opcions són limitades. Aquí tens algunes solucions alternatives que la gent acostuma a fer servir:

Subratllat fals amb caràcters Unicode. Pots fer servir caràcters combinatoris Unicode per simular un subratllat, però no és fiable entre tipografies i plataformes, i en general no es recomana.

Utilitza negreta o cursiva. Si l'objectiu és simplement cridar l'atenció sobre un text concret, el format de negreta o cursiva pot complir la mateixa funció sense necessitat de subratllar.

Afegeix una nota entre parèntesis. En entorns de text pla, alguns escriptors indiquen l'èmfasi afegint una nota com «(èmfasi meu)» després del text rellevant.

Cap d'aquests substituts és realment equivalent al subratllat de text a Markdown, però poden ajudar en entorns restringits.

Referència ràpida

Aquí tens un resum de tots els mètodes per subratllar text a Markdown:

  • <u>text</u> és el mètode més senzill i àmpliament compatible.
  • <ins>text</ins> és una alternativa semàntica que també es renderitza com a subratllat.
  • CSS amb etiquetes <span> et dóna el màxim control quan gestiones el full d'estils.
  • No existeix cap sintaxi nativa de subratllat a Markdown, així que tots els mètodes depenen de l'HTML o de funcionalitats específiques de cada plataforma.
  • GitHub i Jupyter admeten el subratllat basat en HTML.
  • Discord i Slack no admeten cap mena de format de subratllat.

Reflexions finals

La manca d'una sintaxi nativa de subratllat a Markdown és una decisió de disseny deliberada, no pas un descuit. Per a la majoria del contingut web, evitar els subratllats manté el text clar i prevé la confusió amb els enllaços. Però quan realment necessites subratllar text a Markdown, l'etiqueta <u> és la solució més ràpida i portable. Tria el mètode que encaixi amb la teva plataforma, tingues sempre present la llegibilitat i els teus documents tindran exactament l'aspecte que pretens.