Odsyłacz (nazwany kotwica) w przecenie

511

Czy istnieje składnia przecen dla odpowiednika:

Take me to <a href="#pookie">pookie</a>

... 

<a name="pookie">this is pookie</a>
Synesso
źródło

Odpowiedzi:

691
Take me to [pookie](#pookie)

powinna mieć poprawną składnię, aby przejść do punktu kontrolnego o nazwie pookie.

Aby wstawić punkt kontrolny o tej nazwie, użyj HTML:

<a name="pookie"></a>

Markdown nie ma nic przeciwko temu, gdzie umieścisz punkt kontrolny. Przydatnym miejscem do umieszczenia go jest w nagłówku. Na przykład:

### <a name="tith"></a>This is the Heading

działa bardzo dobrze. (Zademonstruję tutaj, ale renderer SO zdejmuje kotwicę.)

Uwaga na temat tagów samozamykających się i id=versusname=

Wcześniejsza wersja tego postu sugerowała użycie <a id='tith' />, użycie składni samozamykającej dla XHTML i użycie idatrybutu zamiast name.

XHTML pozwala, aby dowolny tag był „pusty” i „samozamykający się”. Oznacza to, że jest <tag />to skrót od <tag></tag>dopasowanej pary tagów z pustym ciałem. Większość przeglądarek akceptuje XHTML, ale niektóre nie. Aby uniknąć problemów w różnych przeglądarkach, zamknij tag jawnie <tag></tag>, zgodnie z zaleceniami powyżej.

Wreszcie atrybut name=został przestarzały w XHTML, więc pierwotnie go użyłem id=, co wszyscy rozpoznają. Jednak HTML5 tworzy teraz zmienną globalną w JavaScript podczas korzystania id=i niekoniecznie jest to, czego chcesz. Tak, używającname= jest teraz bardziej przyjazne.

(Dzięki Slipp Douglas , służące wyjaśnieniu XHTML do mnie, a gwoździarka za wskazanie HTML5 efekt uboczny - patrz komentarze i gwoździ „s odpowiedź dla bardziej szczegółowo. name=Wydaje się działać wszędzie, choć nie jest przestarzałe w XHTML).

Steve Powell
źródło
1
Nie możesz zobaczyć, jak utworzyć link do demonstracji nagłówka po renderowaniu HTML przez StackOverflow, ponieważ ich renderowanie usuwa znacznik <a> . Oznacza to, że nie możesz w StackOverflow Markdown.
Slipp D. Thompson
2
Będzie to jednak działać w innych, bardziej liberalnych mechanizmach renderujących Markdown, ale będziesz potrzebować zamykającego znacznika <a> ; <a> tag nie pozwala samozamykające. Zauważyłem też, że moja przeglądarka przeskakuje obok nagłówka, chyba że znacznik <a> znajduje się przed zawartością nagłówka. Poprawki do twoich przykładów.
Slipp D. Thompson
2
Trzymaj się, kowboju. To, że nie masz żadnej stylizacji <a>bez href, nie oznacza, że ​​sam się zamyka. O ile nie jestem całkowicie szalony, oba: test-xhtml11 i [ sln.6bitt.com/public/test-html5.html](test-html5) renderują resztę strony w tagu <a>. Śmiało i sprawdź z wybranym inspektorem internetowym.
Slipp D. Thompson
4
@Poślizg: OK. Myślę, że teraz rozumiem. Zakodowałeś <a id="hi"/> rest of doc, ale traktowano to jak <a id="hi"> rest of doc</a>. (I pokazuje to analiza elementu na stronie.) Mój błąd: patrzyłem na wyświetlane elementy, a nie na surowe źródło. Czy uważasz, że odpowiedź powinna zostać zmodyfikowana w świetle tej obserwacji?
Steve Powell
3
nameAtrybut tworzy zmienne globalne (patrz stackoverflow.com/questions/3434278/... ), więc równie dobrze można użyć idatrybutu jako cel fragmentu URL identyfikator zgodnie z przeznaczeniem.
Bobby Jack
92

Na bitbucket.org głosowane rozwiązanie nie działałoby. Zamiast tego, używając nagłówków (z ##), można odwoływać się do nich jako kotwic, poprzedzając je # nazwą-markdown-header-my-header-name, gdzie # markdown-header- jest niejawnym prefiksem generowanym przez renderer, i reszta to mały nagłówek z myślnikami zastępującymi spacje.

Przykład

## My paragraph title

wytworzy taką ukrytą kotwicę

#markdown-header-my-paragraph-title

Cały adres URL przed każdym odwołaniem do kotwicy jest opcjonalny, tj

[Some text](#markdown-header-my-paragraph-title)

jest równoważne z

[Some text](https://bitbucket.org/some_project/some_page#markdown-header-my-paragraph-title) 

pod warunkiem, że znajdują się na tej samej stronie.

Źródło: https://bitbucket.org/tutorials/markdowndemo/overview (edytuj źródło tego pliku .md i zobacz, jak tworzone są kotwice).

La Muerte Peluda
źródło
1
To też może zrobić. Zgodnie z tym: confluence.atlassian.com/bitbucket/… , bitbucket obsługuje rozszerzenie Spisu treści, które może automatycznie generować łącza i zakotwiczenia na podstawie nagłówków dokumentów. Rozszerzenie TOC jest udokumentowane tutaj: pythonhosted.org/Markdown/extensions/toc.html Dodaj tekst „[TOC]” na początku dokumentu, aby został wygenerowany.
Binarny Phile
8
W Github ## My paragraph titleutworzy następującą kotwicę user-content-my-paragraph-title, więc możesz odwoływać się do niej za pomocą [Some text] (# user-content-my-paragraph-title). Nie znalazłem jednak na to oficjalnej dokumentacji.
toto_tico,
Pomogło mi to również w Bitbucket - działa jak urok.
Scott Byers
1
To jest przydatna informacja; Dziękuję Ci. Jednak moduły renderujące przeceny bez rozszerzeń nie wygenerują tych kotwic, a zderzenie nazw nagłówków spowoduje zderzenie identyfikatorów kotwic (lub jakaś nieprzydatna sztuczka odróżniająca, taka jak liczba). Jawne identyfikatory kotwicy są lepsze, bardziej kontrolowane, nie podlegają przypadkowym zmianom z powodu aktualizacji tekstu (patrz sztuczka powyżej) i są przydatne do zakotwiczenia więcej niż tylko nagłówków. Obie techniki są ogólnie potrzebne.
Steve Powell,
Na stackedit.io [linky](#header) była wystarczającą kotwicą i działała również po opublikowaniu w Gist.
Felipe Alvarez
66

Użyj a name. Użycie idnie jest konieczne w HTML 5 i spowoduje utworzenie zmiennych globalnych w JavaScript

Patrz specyfikacja HTML 5, 5.9.8, przechodząc do identyfikatora fragmentu - jak idi namestosowane.

Ważne jest, aby wiedzieć, że większość przeglądarek wciąż zmienia identyfikatory w zmienne globalne . Oto szybki test . Użycie a namepozwala uniknąć tworzenia globałów i wszelkich konfliktów, które mogą wyniknąć.

Przykład z użyciem nazwy:

Take me to [pookie](#pookie)

I kotwica docelowa:

### <a name="pookie"></a>Some heading
mikemaccana
źródło
5
Downvoting. Argument zmiennej globalnej jest słaby, ponieważ nie powinieneś (bezpośrednio) definiować zmiennych globalnych w swoim JS, więc nie dojdzie do konfliktu. Również semantyka namei idsą różne.
Marnen Laibow-Koser
9
@ MarnenLaibow-Koser Nikt nie dyskutuje o definiowaniu zmiennych globalnych w JS. Utworzenie identyfikatora w HTML tworzy globalne okno.someid w większości przeglądarek.
mikemaccana
14
@ MarnenLaibow-Koser Wiele bibliotek (tj. Nie własnego JS, ale czyjejś innej) korzysta z jednego globalnego - na przykład fineuploader. Jeśli utworzysz element o identyfikatorze fineuploader, nie będziesz mógł korzystać z fineuploadermodułu. Unikanie tworzenia niepotrzebnych globałów pomaga uniknąć tych konfliktów.
mikemaccana
5
Chciałbym przeprowadzić kilka testów tej sprawy i dowiedzieć się, który z nich ma pierwszeństwo. Doceniam problem teoretyczny, ale w latach rozwoju po stronie klienta nigdy nie miałem złamanego identyfikatora JS po stronie klienta (pod warunkiem, że kod HTML byłby w innym przypadku poprawny). Będę ich nadal używać, gdy będą odpowiednie semantycznie, dopóki nie napotkam na rzeczywiste problemy.
Marnen Laibow-Koser
2
@ MarnenLaibow-Koser I (i wiele innych) miałem identyfikatory HTML, które łamią prawdziwy JavaScript - jest jeden bardzo praktyczny przykład w komentarzu, na który odpowiadasz! Istnieje wiele stylistów i firm, które zawsze korzystają z zajęć, nawet dla singletonów, i dlatego.
mikemaccana
17

Markdown Anchor obsługuje hashmark, więc link do kotwicy na stronie byłby po prostu[Pookie](#pookie)

Generowanie kotwicy nie jest faktycznie obsługiwane w Gruber Markdown, ale jest w innych implementacjach, takich jak Markdown Extra .

W Markdown Extra identyfikator kotwicy jest dołączany do nagłówka lub podtytułu za pomocą {#pookie}.

Github Flavored Markdown na stronach repozytorium Git (ale nie w Gists) automatycznie generuje kotwice z kilkoma znacznikami na wszystkich nagłówkach (h1, h2, h3 itp.), W tym:

  • id="user-content-HEADERTEXT"
  • class="anchor"
  • href="#HEADERTEXT"
  • aria-hidden="true" (dotyczy ikony łącza svg wyświetlanej po najechaniu myszą)

Z wyjątkiem ikony aria / svg, gdy ktoś pisze:

  • # Header Title

Github generuje:

  • <h1><a id="user-content-header-title" class="anchor" href="#header-title">Header Title</a></h1>

Dlatego nie trzeba nic robić, aby utworzyć linki nagłówka, i zawsze można do nich link za pomocą:

  • Link do strony [Header Title](#header-title)
jeffmcneill
źródło
16

W oryginalnej składni Markdown nie ma łatwo dostępnej składni, ale Markdown Extra zapewnia co najmniej przypisywanie identyfikatorów do nagłówków - które następnie można łatwo połączyć. Zauważ również, że możesz używać zwykłego HTML zarówno w Markdown, jak i Markdown Extra, oraz że nameatrybut został zastąpiony przez idatrybut w nowszych wersjach HTML.

ty
źródło
9

Dla każdego, kto szuka rozwiązania tego problemu w GitBook. Tak sprawiłem, że działało (w GitBook). Musisz wyraźnie oznaczyć swój nagłówek w następujący sposób:

# My Anchored Heading {#my-anchor}

Następnie link do tej kotwicy w ten sposób

[link to my anchored heading](#my-anchor)

Rozwiązanie i dodatkowe przykłady można znaleźć tutaj: https://seadude.gitbooks.io/learn-gitbook/

keyoxy
źródło
dzięki! to działa! należy to ocenić!
Dexter
Najlepsza odpowiedź! Dzięki
invis
7

Późno na imprezę, ale myślę, że ten dodatek może być przydatny dla osób pracujących rmarkdown. W rmarkdowntam jest wbudowane wsparcie dla odniesienia do nagłówków w dokumencie.

Dowolny nagłówek zdefiniowany przez

# Header

może odnosić się do

get me back to that [header](#header)

Poniżej przedstawiono minimalny samodzielny .rmdplik, który pokazuje to zachowanie. Można go wykonać na drutach .pdfi .html.

---
title: "references in rmarkdown"
output:
  html_document: default
  pdf_document: default
---

# Header

Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. 

Go back to that [header](#header).
symbolrush
źródło
4

Korzystając z najnowszego Markdown, powinieneś być w stanie użyć następującej składni:

[](){:name='anchorName'}

To powinno utworzyć następujący kod HTML:

<a name="anchorName"></a>

Jeśli chcesz, aby kotwica zawierała tekst, po prostu dodaj tekst kotwicy w nawiasach kwadratowych:

[Some Text](){:name='anchorName'}

Ryan McGuinness
źródło
Wygląda na to, że Marukuwie tylko o tej składni. Zobacz babelmark.
Ulysse BN
3

Dla najpopularniejszych generatorów przecen. W każdym nagłówku masz prostą, samodzielnie wygenerowaną kotwicę. Na przykład w przypadku pandoc wygenerowana kotwica będzie kopią kebaba w nagłówku.

 echo "# Hello, world\!" | pandoc
 # => <h1 id="hello-world">Hello, world!</h1>

W zależności od parsera, którego używasz, kotwica może się zmienić (weź przykład symbolrush i La muerte Peluda, są różne!). Zobacz ten babelmark, w którym możesz zobaczyć wygenerowane kotwice w zależności od implementacji obniżki .

Ulysse BN
źródło