W Markdown, jaki jest najlepszy sposób na linkowanie do fragmentu strony, tj. #Some_id?

127

Próbuję dowiedzieć się, jak odwołać się do innego obszaru strony za pomocą Markdown. Mogę to uruchomić, jeśli dodam plik

<div id="mylink" />

a dla linku wykonaj:

[My link](#mylink)

Ale przypuszczam, że istnieje inny sposób na utworzenie linku na stronie w Markdown, który nie obejmuje divtagu prostego .

Jakieś pomysły?

html markdown Chris
źródło
Zawsze robiłem je tak, jak tutaj.
Joe Martinez
1
<div/>może zdenerwować formatyzator dla pozostałej części strony. Użyj <a id="ident"/>. Zobacz moją odpowiedź.
Steve Powell
Możliwy duplikat odsyłacza (nazwana kotwica) w przecenie
Ulysse BN
Zamiast tego rozważ użycie MultiMarkdown. Zapewnia [anchor][]składnię do tego. github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

Odpowiedzi:

165

Zobacz tę odpowiedź .

Podsumowując, wyznacz miejsce docelowe za pomocą

<a name="sometext"></a>

wstawiony w dowolnym miejscu znacznika Markdown (na przykład w nagłówku:

## heading<a name="headin"></a>

i link do niego za pomocą linku przeceny:

[This is the link text](#headin)

lub

[some text](#sometext)

Nie używaj <div>- to zepsuje układ wielu rendererów.

(Zmieniłem id=na name=powyżej. Zobacz tę odpowiedź, aby uzyskać żmudne wyjaśnienie).

Steve Powell
źródło
7
+1, dzięki. To smutne, że nie robi tego automatycznie. Bardzo mokre IMHO.
Marc-André Lafortune
Jest brzydka, gdy trzeba przeczytać go w edytorze tekstu, ale to robi pracę. Nie wiem, dlaczego nie jest to akceptowana odpowiedź.
kayleeFrye_onDeck
Definiowanie kotwic w starym stylu <a name="..." />jest przestarzałe, ale zgodne z późniejszymi specyfikacjami HTML. Jeśli <div>może być renderowany jako przeszkadzający blok (może jeśli z nieujawnionych powodów CSS podaje rozmiar) może <span>(element inline) może załatwić sprawę?
Javier
25

Wydaje mi się, że zależy to od tego, czego używasz do generowania kodu HTML ze swojej przeceny. Zauważyłem, że jekyll (domyślnie jest używany przez strony gihub.io) automatycznie dodaje atrybut id = "" do nagłówków w generowanym html.

Na przykład, jeśli jesteś przeceniony

My header
---------

Wynikowy html będzie wyglądał następująco:

<h2 id="my-header">My header</h2>

Możesz więc po prostu utworzyć link do niego [My link](#my-header)

bodgix
źródło
To najlepsza i najczystsza odpowiedź. Markdown jest naprawdę fajny. naprawdę pomaga robić szybkie blogowanie. ^ _ ^
Ashok MA
16

W wersji PHP Markdown możesz również łączyć nagłówki z identyfikatorami fragmentów na stronie przy użyciu składni takiej jak każda z poniższych, jak opisano tutaj

Header 1            {#header1}
========

## Header 2 ##      {#header2}

i wtedy

[Link back to header 1](#header1)
[Link back to header 2](#header2)

Niestety, ta składnia jest obecnie obsługiwana tylko dla nagłówków, ale przynajmniej może być przydatna do tworzenia spisu treści.

Klokie
źródło
3

Kotwicą docelową dla łącza na stronie HTML może być dowolny element z idatrybutem. Zobacz linki na stronie W3C. Oto cytat z odpowiedniej sekcji:

Docelowe kotwice w dokumentach HTML mogą być określone albo przez element A (nadanie mu atrybutu name), albo przez dowolny inny element (nazewnictwo z atrybutem id).

Markdown traktuje HTML jako HTML (patrz Inline HTML ), więc możesz tworzyć identyfikatory fragmentów z dowolnego elementu, który Ci się podoba. Jeśli na przykład chcesz utworzyć łącze do akapitu, po prostu zawiń akapit w znacznik akapitu i dołącz identyfikator:

<p id="mylink">Lorem ipsum dolor sit amet...</p>

Następnie użyj standardowego Markdown, [My link](#mylink)aby utworzyć łącze do kotwicy fragmentów. Pomoże to zachować czystość kodu HTML, ponieważ nie ma potrzeby stosowania dodatkowych znaczników.

Mikrofon
źródło
Z mojego doświadczenia wynika, że ​​użycie <p>tagu w Markdown może usunąć CSS zwykłego akapitu. Powiedziałbym, używaj ostrożnie, jestem nowy w Markdown, ale ma kilka dziwactw.
2rs2ts,
@ user691859 Nie jestem pewien, co masz na myśli, mówiąc „użycie <p>tagu w Markdown może usunąć kod CSS zwykłego akapitu”. Markdown zawija akapity w <p>tagi i ignoruje te, które już mają <p>tagi. Nie rozumiem, jak to wpłynie na CSS ...
Mike.
Zachowanie jest dla mnie nieobliczalne. Na tumblrze użycie <p> może (nie zawsze) usunąć wszystkie zachowania poza określonym przeze mnie. Nie wiem dlaczego. <div> ZAWSZE jednak robi to samo.
2rs2ts,
3

Każdy, kto korzysta z programu Visual Studio Team Foundation Server (TFS) 2015, naprawdę nie lubi osadzania <a>ani <div>elementów, przynajmniej w nagłówkach. Nie lubi też emoji w nagłówkach:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

Zostaje przetłumaczone na:

<h3 id="-configuration-">🔧 Configuration 🔧</h3>
<p>Lorem ipsum problem fixem.</p>

Dlatego linki powinny albo używać tego id(co powoduje przerwanie tego i innych rozszerzeń w wersji zapoznawczej w programie Visual Studio) lub usunąć emoji:

Here's [how to setup](#-configuration-) //🔧 Configuration 🔧
Here's [how to setup](#configuration) //Configuration

Gdzie ta ostatnia wersja działa zarówno w trybie online w programie TFS, jak iw wersji zapoznawczej programu Visual Studio.

Nacięcie
źródło