Was ist in Markdown der beste Weg, um auf ein Fragment einer Seite zu verlinken, dh #some_id?

127

Ich versuche herauszufinden, wie ich mit Markdown auf einen anderen Bereich einer Seite verweisen kann. Ich kann es zum Laufen bringen, wenn ich a hinzufüge

<div id="mylink" />

und für den Link tun:

[My link](#mylink)

Ich vermute jedoch, dass es in Markdown eine andere Möglichkeit gibt, einen In-Page-Link zu erstellen, bei dem das Straight-Up- divTag nicht verwendet wird.

Irgendwelche Ideen?

html markdown Chris
quelle
Ich habe sie immer so gemacht, wie du es hier gemacht hast.
Joe Martinez
1
<div/>kann den Formatierer für den Rest der Seite stören. Verwenden Sie <a id="ident"/>. Siehe meine Antwort.
Steve Powell
Mögliches Duplikat des Querverweises (benannter Anker) in Markdown
Ulysse BN
Verwenden Sie stattdessen MultiMarkdown. Es bietet die [anchor][]Syntax dafür. github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

Antworten:

165

Siehe diese Antwort .

Zusammenfassend machen Sie ein Ziel mit

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

an einer beliebigen Stelle in Ihrem Markdown-Markup eingefügt (z. B. in einer Kopfzeile:

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

und über die Markdown-Verknüpfung darauf verlinken:

[This is the link text](#headin)

oder

[some text](#sometext)

Nicht verwenden <div>- dies wird das Layout für viele Renderer durcheinander bringen.

(Ich habe id=zu name=oben gewechselt . Siehe diese Antwort für die mühsame Erklärung.)

Steve Powell
quelle
7
+1, danke. Es ist traurig, dass dies nicht automatisch geschieht. Sehr nass IMHO.
Marc-André Lafortune
Es ist hässlich, wenn Sie es in einem Texteditor lesen müssen, aber es funktioniert . Ich bin mir nicht sicher, warum dies nicht die akzeptierte Antwort ist.
KayleeFrye_onDeck
Das Definieren von Ankern im alten Stil <a name="..." />ist veraltet, entspricht jedoch späteren HTML-Spezifikationen. Wenn <div>es als störender Block gerendert werden könnte (vielleicht, wenn das CSS aus unbekannten Gründen eine Größe angibt <span>), könnte vielleicht (ein Inline-Element) den Trick tun?
Javier
25

Ich denke, das hängt davon ab, was Sie verwenden, um HTML aus Ihrem Markdown zu generieren. Mir ist aufgefallen, dass jekyll (standardmäßig von gihub.io-Seiten verwendet) automatisch das Attribut id = "" zu Überschriften in dem von ihm generierten HTML hinzufügt.

Zum Beispiel, wenn Sie Abschlag sind

My header
---------

Das resultierende HTML sieht folgendermaßen aus:

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

Sie können also einfach über darauf verlinken [My link](#my-header)

Bodgix
quelle
Dies ist die beste und sauberste Antwort. Markdown ist wirklich cool. Es hilft wirklich, schnell zu bloggen. ^ _ ^
Ashok MA
16

Mit der PHP-Version von Markdown können Sie Header auch mit Fragmentkennungen innerhalb der Seite verknüpfen, indem Sie eine Syntax wie eine der folgenden verwenden, wie hier dokumentiert

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

## Header 2 ##      {#header2}

und dann

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

Leider wird diese Syntax derzeit nur für Header unterstützt, könnte aber zumindest zum Erstellen eines Inhaltsverzeichnisses hilfreich sein.

Klokie
quelle
3

Der Zielanker für einen Link in einer HTML-Seite kann ein beliebiges Element mit einem idAttribut sein. Siehe Links auf der W3C-Site. Hier ist ein Zitat aus dem entsprechenden Abschnitt:

Zielanker in HTML-Dokumenten können entweder durch das A-Element (Benennung mit dem Attribut name) oder durch ein anderes Element (Benennung mit dem Attribut id) angegeben werden.

Markdown behandelt HTML als HTML (siehe Inline-HTML ), sodass Sie Ihre Fragment-IDs aus einem beliebigen Element erstellen können. Wenn Sie beispielsweise einen Link zu einem Absatz erstellen möchten, schließen Sie den Absatz einfach in ein Absatz-Tag ein und geben Sie eine ID ein:

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

Verwenden Sie dann Ihren Standard-Markdown [My link](#mylink), um einen Link zum Fragmentanker zu erstellen. Dies hilft dabei, Ihr HTML sauber zu halten, da kein zusätzliches Markup erforderlich ist.

Mike
quelle
Nach meiner Erfahrung kann die Verwendung des <p>Tags in Markdown das CSS eines regulären Absatzes entfernen. Ich würde mit Vorsicht sagen, ich bin neu bei Markdown, aber es hat einige Macken.
2rs2ts
@ user691859 Ich bin mir nicht sicher, was Sie unter "Verwenden des <p>Tags in Markdown kann das CSS eines regulären Absatzes entfernen" verstehen . Markdown umschließt Absätze mit <p>Tags und ignoriert diejenigen, die bereits <p>Tags haben. Ich kann nicht sehen, wie sich dies auf CSS auswirken würde ...
Mike
Das Verhalten ist für mich unberechenbar. Bei tumblr kann die Verwendung von <p> (nicht immer) das gesamte Verhalten außer dem von mir angegebenen spezifischen Verhalten entfernen. Keine Ahnung warum. <div> macht IMMER das Gleiche.
2rs2ts
3

Für jeden, der Visual Studio Team Foundation Server (TFS) 2015 verwendet, sind eingebettete Elemente <a>oder <div>Elemente zumindest in Kopfzeilen nicht besonders beliebt. Es mag auch kein Emoji in Headern:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

Wird übersetzt nach:

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

Daher sollten Links entweder das verwenden id(wodurch diese und andere Vorschauerweiterungen in Visual Studio beschädigt werden) oder das Emoji entfernen:

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

Wo die letztere Version sowohl online in TFS als auch in der Markdown-Vorschau von Visual Studio funktioniert .

Nick
quelle