Referensi silang (bernama jangkar) dalam penurunan harga

513

Apakah ada sintaks penurunan harga yang setara dengan:

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

... 

<a name="pookie">this is pookie</a>
Synesso
sumber

Jawaban:

692
Take me to [pookie](#pookie)

seharusnya sintaks penurunan harga yang benar untuk melompat ke titik jangkar bernama pookie.

Untuk memasukkan titik jangkar dari nama itu gunakan HTML:

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

Penurunan harga tampaknya tidak masalah di mana Anda meletakkan titik jangkar. Tempat yang berguna untuk meletakkannya di header. Sebagai contoh:

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

bekerja dengan sangat baik. (Saya akan menunjukkan di sini tetapi penyaji SO menghapus jangkar.)

Catatan tentang tag yang menutup sendiri dan id=versusname=

Versi sebelumnya dari posting ini disarankan untuk menggunakan <a id='tith' />, menggunakan sintaks self-closing untuk XHTML, dan menggunakan idatribut alih-alih name.

XHTML memungkinkan tag apa pun menjadi 'kosong' dan 'ditutup sendiri'. Artinya, <tag />adalah kependekan dari <tag></tag>, sepasang tag yang cocok dengan tubuh kosong. Sebagian besar browser akan menerima XHTML, tetapi beberapa tidak. Untuk menghindari masalah lintas-browser, tutup tag secara eksplisit menggunakan <tag></tag>, seperti yang direkomendasikan di atas.

Akhirnya, atribut name=itu ditinggalkan dalam XHTML, jadi saya awalnya menggunakan id=, yang semua orang tahu. Namun, HTML5 sekarang membuat variabel global dalam JavaScript saat menggunakan id=, dan ini mungkin bukan yang Anda inginkan. Jadi, menggunakan name=sekarang cenderung lebih ramah.

(Terima kasih kepada Slipp Douglas untuk menjelaskan XHTML dengan saya, dan nailer untuk menunjukkan HTML5 efek samping - melihat komentar dan nailer 's jawaban untuk detail lebih lanjut. name=Muncul untuk bekerja di mana-mana, meskipun sudah ditinggalkan dalam XHTML.)

Steve Powell
sumber
1
Anda tidak dapat melihat cara menautkan ke demo tajuk Anda setelah StackOverflow merender HTML karena render mereka menghapus tag <a> Anda . Artinya, Anda tidak bisa dalam StackOverflow Markdown.
Slipp D. Thompson
2
Namun, ini akan berfungsi pada penyaji mundur Markdown lain yang lebih liberal, tetapi Anda akan memerlukan tag <a> penutup ; yang <a> tag tidak memungkinkan menutup diri. Juga, saya menemukan browser saya untuk melewati header kecuali jika tag <a> ada sebelum konten header. Koreksi dibuat untuk contoh Anda.
Slipp D. Thompson
2
Tahan di sana, koboi. Hanya karena Anda tidak memiliki gaya pada <a>tanpa href bukan berarti itu menutup diri. Kecuali saya benar-benar gila, kedua -duanya : test-xhtml11 dan [ sln.6bitt.com/public/test-html5.html[(test-html5) membuat sisa halaman dalam tag <a>. Silakan dan periksa dengan inspektur web pilihan Anda.
Slipp D. Thompson
4
@ Slipp: OK saya pikir saya mengerti, sekarang. Anda memberi kode <a id="hi"/> rest of doc, tetapi diperlakukan seperti <a id="hi"> rest of doc</a>. (Dan analisis elemen halaman menunjukkan ini juga.) Kesalahan saya: Saya melihat elemen yang ditampilkan bukan sumber mentah. Apakah Anda pikir jawabannya harus diubah, mengingat pengamatan ini?
Steve Powell
3
The nameatribut juga menciptakan variabel global (lihat stackoverflow.com/questions/3434278/... ), sehingga Anda mungkin juga menggunakan idatribut sebagai target URL identifier fragmen, sebagaimana dimaksud.
Bobby Jack
92

Pada bitbucket.org solusi yang dipilih tidak akan berfungsi. Sebaliknya, saat menggunakan tajuk (dengan ##), dimungkinkan untuk merujuknya sebagai jangkar dengan mengawasinya sebagai # markdown-header-my-header-name, di mana # markdown-header- adalah awalan implisit yang dibuat oleh renderer, dan sisanya adalah judul header berhuruf rendah dengan tanda hubung menggantikan spasi.

Contoh

## My paragraph title

akan menghasilkan anchor implisit seperti ini

#markdown-header-my-paragraph-title

Seluruh URL sebelum setiap referensi jangkar adalah opsional, yaitu

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

setara dengan

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

asalkan mereka berada di halaman yang sama.

Sumber: https://bitbucket.org/tutorials/markdowndemo/overview (edit sumber file .md ini dan lihat bagaimana jangkar dibuat).

La Muerte Peluda
sumber
1
Ini bisa dilakukan juga. Menurut ini: confluence.atlassian.com/bitbucket/… , bitbucket mendukung ekstensi Table of Contents yang dapat secara otomatis menghasilkan tautan dan jangkar berdasarkan pada header dokumen. Ekstensi TOC didokumentasikan di sini: pythonhosted.org/Markdown/extensions/toc.html Tambahkan teks "[TOC]" ke awal dokumen untuk dihasilkan.
Binary Phile
8
Di Github, ## My paragraph titleakan menghasilkan jangkar berikut user-content-my-paragraph-title, sehingga Anda dapat merujuknya dengan [Beberapa teks] (# user-content-my-paragraf-judul). Namun, saya belum menemukan dokumentasi resmi untuk ini.
toto_tico
Ini membantu saya di Bitbucket juga - bekerja seperti pesona.
Scott Byers
1
Ini adalah informasi yang berguna; Terima kasih. Namun, penyaji penurunan harga tanpa ekstensi tidak akan menghasilkan jangkar ini untuk Anda, dan bentrok nama judul akan menghasilkan bentrok id jangkar (atau beberapa trik pembeda yang tidak membantu, seperti jumlah yang mencukupi). Id anchor eksplisit lebih baik, lebih dapat dikontrol, tidak mengalami perubahan acak karena pembaruan teks (lihat trik di atas) dan berguna untuk menambat lebih dari sekadar header. Kedua teknik itu dibutuhkan secara umum.
Steve Powell
Di stackedit.io [linky](#header) adalah jangkar yang cukup, dan berfungsi saat dipublikasikan ke Gist juga.
Felipe Alvarez
67

Gunakan a name. Menggunakan sebuah idtidak diperlukan dalam HTML 5 dan akan membuat variabel global dalam JavaScript Anda

Lihat spesifikasi HTML 5, 5.9.8 Menavigasi ke pengidentifikasi fragmen - keduanya iddan namedigunakan.

Penting untuk diketahui bahwa sebagian besar browser masih mengubah ID menjadi variabel global . Inilah tes cepat . Menggunakan namemenghindari membuat global dan segala konflik yang mungkin terjadi.

Contoh menggunakan nama:

Take me to [pookie](#pookie)

Dan jangkar tujuan:

### <a name="pookie"></a>Some heading
mikemaccana
sumber
5
Downvoting. Argumen variabel global lemah karena Anda seharusnya tidak (secara langsung) mendefinisikan variabel global di JS Anda, jadi tidak akan terjadi konflik. Juga, semantik namedan idberbeda.
Marnen Laibow-Koser
9
@ MarnenLaibow-Koser Tidak ada yang membahas mendefinisikan variabel global dalam JS. Membuat ID dalam HTML menciptakan jendela global. Beberapa di sebagian besar browser.
mikemaccana
14
@ MarnenLaibow-Koser Banyak perpustakaan (yaitu, bukan JS Anda sendiri, tetapi milik orang lain) menggunakan global tunggal - misalnya, fineuploader. Jika Anda membuat elemen dengan ID fineuploader, Anda tidak akan dapat menggunakan fineuploadermodul. Menghindari menciptakan global yang tidak perlu membantu menghindari konflik itu.
mikemaccana
5
Saya akan tertarik untuk menjalankan beberapa tes kasus itu dan mencari tahu mana yang diutamakan. Saya menghargai masalah teoretis, tetapi selama bertahun-tahun pengembangan sisi klien, saya tidak pernah memiliki ID yang memecah JS sisi klien (asalkan HTML itu valid). Saya akan terus menggunakannya ketika mereka semantik sesuai sampai saya mengalami masalah yang sebenarnya.
Marnen Laibow-Koser
2
@ MarnenLaibow-Koser I (dan banyak lainnya) telah memiliki ID HTML yang benar-benar merusak JavaScript - ada satu contoh yang sangat praktis dalam komentar yang Anda balas! Ada banyak pemandu gaya dan perusahaan yang selalu menggunakan kelas, bahkan untuk lajang, dan inilah sebabnya.
mikemaccana
17

Markdown Anchor mendukung hashmark, jadi tautan ke jangkar di halaman tersebut adalah sederhana[Pookie](#pookie)

Menghasilkan jangkar sebenarnya tidak didukung di Gruber Markdown, tetapi dalam implementasi lain, seperti Markdown Extra .

Dalam Markdown Extra, anchor ID ditambahkan ke header atau subjudul dengan {#pookie}.

Github Flavoured Markdown di halaman repositori Git (tetapi tidak di Gists) secara otomatis menghasilkan jangkar dengan beberapa tag markup pada semua header (h1, h2, h3, dll.), Termasuk:

  • id="user-content-HEADERTEXT"
  • class="anchor"
  • href="#HEADERTEXT"
  • aria-hidden="true" (ini untuk ikon tautan svg yang ditampilkan di atas mouse)

Tidak termasuk ikon aria / svg, ketika seseorang menulis:

  • # Header Title

Github menghasilkan:

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

Oleh karena itu, orang tidak perlu melakukan apa pun untuk membuat tautan tajuk, dan selalu dapat menautkannya dengan:

  • Tautan ke [Header Title](#header-title)
jeffmcneill
sumber
16

Tidak ada sintaks yang tersedia untuk melakukan ini dalam sintaks Markdown asli, tetapi Markdown Extra menyediakan sarana untuk setidaknya menetapkan ID untuk header - yang kemudian dapat Anda tautkan dengan mudah. Perhatikan juga bahwa Anda dapat menggunakan HTML biasa di Markdown dan Markdown Extra, dan bahwa nameatribut telah digantikan oleh idatribut di versi HTML yang lebih baru.

Kamu
sumber
9

Bagi siapa saja yang mencari solusi untuk masalah ini di GitBook. Beginilah cara saya membuatnya bekerja (di GitBook). Anda perlu menandai tajuk secara eksplisit, seperti ini:

# My Anchored Heading {#my-anchor}

Kemudian tautkan ke jangkar ini seperti ini

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

Solusi, dan contoh tambahan, dapat ditemukan di sini: https://seadude.gitbooks.io/learn-gitbook/

keyoxy
sumber
Terima kasih! ini bekerja! ini harus ditingkatkan!
Dexter
Jawaban Terbaik! Terima kasih
invis
7

Terlambat ke pesta, tapi saya pikir penambahan ini mungkin berguna untuk orang yang bekerja dengan rmarkdown. Di rmarkdownsana ada dukungan built-in untuk referensi ke header di dokumen Anda.

Tajuk apa pun yang ditentukan oleh

# Header

dapat dirujuk oleh

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

Berikut ini adalah .rmdfile mandiri minimal yang menunjukkan perilaku ini. Ini bisa dirajut ke .pdfdan .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).
lambang simbol
sumber
4

Menggunakan Penurunan harga terbaru, Anda harus dapat menggunakan sintaks berikut:

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

Ini harus membuat HTML berikut:

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

Jika Anda ingin jangkar memiliki teks, cukup tambahkan teks jangkar di dalam tanda kurung:

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

Ryan McGuinness
sumber
Sepertinya hanya Marukutahu tentang sintaks ini. Lihat babelmark.
Ulysse BN
3

Untuk generator penurunan harga paling umum. Anda memiliki jangkar sederhana yang dibuat sendiri di setiap tajuk. Misalnya dengan pandoc , anchor yang dihasilkan akan menjadi slug case kebab dari header Anda.

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

Bergantung pada parser penurunan harga yang Anda gunakan, jangkar dapat berubah (lihat contoh symbolrush dan La muerte Peluda, semuanya berbeda!). Lihat babelmark ini di mana Anda dapat melihat jangkar yang dihasilkan tergantung pada implementasi penurunan harga Anda .

Ulysse BN
sumber