Di Markdown, apa cara terbaik untuk menautkan ke sebuah fragmen halaman, yaitu #some_id?

127

Saya mencoba mencari cara untuk referensi area halaman lain dengan Markdown. Saya bisa membuatnya berfungsi jika saya menambahkan

<div id="mylink" />

dan untuk tautannya lakukan:

[My link](#mylink)

Tapi tebakan saya ada beberapa cara lain untuk melakukan tautan dalam-halaman dalam Markdown yang tidak melibatkan divtag langsung .

Ada ide?

html markdown Chris
sumber
Saya selalu melakukannya seperti yang Anda lakukan di sini.
Joe Martinez
1
<div/>dapat mengganggu pemformat untuk sisa halaman. Gunakan <a id="ident"/>. Lihat jawaban saya.
Steve Powell
Kemungkinan duplikat referensi silang (bernama jangkar) dalam penurunan harga
Ulysse BN
Pertimbangkan menggunakan MultiMarkdown sebagai gantinya. Ini memberikan [anchor][]sintaks untuk melakukan ini. github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

Jawaban:

165

Lihat jawaban ini .

Singkatnya, buat tujuan dengan

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

dimasukkan di mana saja di markup markdown Anda (misalnya di header:

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

dan tautkan ke sana menggunakan tautan penurunan harga:

[This is the link text](#headin)

atau

[some text](#sometext)

Jangan gunakan <div>- ini akan mengacaukan tata letak untuk banyak penyaji.

(Saya telah mengubah id=ke name=atas. Lihat jawaban ini untuk penjelasan yang membosankan.)

Steve Powell
sumber
7
+1, terima kasih. Sedih karena tidak melakukan ini secara otomatis. IMHO sangat basah.
Marc-André Lafortune
Itu jelek ketika Anda harus membacanya dalam editor teks, tetapi, itu tidak bekerja. Tidak yakin mengapa ini bukan jawaban yang diterima.
kayleeFrye_onDeck
Menentukan jangkar gaya lama <a name="..." />sudah usang tetapi sesuai dengan spesifikasi HTML nanti. Jika <div>mungkin dianggap sebagai blok yang mengganggu (mungkin jika karena alasan yang tidak diungkapkan CSS memberikan ukuran) mungkin <span>(elemen inline) dapat melakukan triknya?
Javier
25

Saya kira ini tergantung pada apa yang Anda gunakan untuk menghasilkan html dari penurunan harga Anda. Saya perhatikan, bahwa jekyll (digunakan oleh halaman gihub.io secara default) secara otomatis menambahkan atribut id = "" ke heading dalam html yang dihasilkannya.

Misalnya, jika Anda penurunan harga

My header
---------

Html yang dihasilkan akan terlihat seperti ini:

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

Jadi, Anda dapat menautkannya hanya dengan [My link](#my-header)

bodgix
sumber
Ini jawaban terbaik dan bersih. Penurunan harga sangat keren. itu sangat membantu untuk melakukan blogging cepat. ^ _ ^
Ashok MA
16

Dengan versi PHP penurunan harga , Anda juga dapat menautkan header ke pengidentifikasi fragmen dalam halaman menggunakan sintaksis seperti yang berikut ini, seperti yang didokumentasikan di sini

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

## Header 2 ##      {#header2}

lalu

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

Sayangnya sintaks ini saat ini hanya didukung untuk tajuk, tetapi setidaknya ini bisa berguna untuk membangun daftar isi.

Klokie
sumber
3

Jangkar tujuan untuk tautan di halaman HTML dapat berupa elemen apa saja dengan idatribut. Lihat Tautan di situs W3C. Berikut kutipan dari bagian yang relevan:

Jangkar tujuan dalam dokumen HTML dapat ditentukan oleh elemen A (menamainya dengan atribut nama), atau oleh elemen lain (penamaan dengan atribut id).

Penurunan harga memperlakukan HTML sebagai HTML (lihat HTML sebaris ), sehingga Anda dapat membuat pengidentifikasi fragmen dari elemen apa pun yang Anda suka. Jika, misalnya, Anda ingin menautkan ke paragraf, cukup bungkus paragraf dalam tag paragraf, dan sertakan id:

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

Kemudian gunakan Markdown standar Anda [My link](#mylink)untuk membuat tautan ke jangkar fragmen. Ini akan membantu menjaga HTML Anda tetap bersih, karena tidak perlu markup tambahan.

Mike
sumber
Dalam pengalaman saya menggunakan <p>tag dalam penurunan harga dapat menghapus CSS dari paragraf biasa. Saya akan mengatakan gunakan dengan hati-hati, saya baru mengenal Markdown tetapi memiliki beberapa kebiasaan.
2rs2ts
@ user691859 Saya tidak yakin apa yang Anda maksud dengan "menggunakan <p>tag dalam penurunan harga dapat menghapus CSS dari paragraf biasa". Penurunan harga membungkus paragraf dalam <p>tag, dan mengabaikan paragraf yang sudah memiliki <p>tag. Saya tidak dapat melihat bagaimana ini akan mempengaruhi CSS ...
Mike
Perilaku itu tidak menentu bagi saya. Pada tumblr, menggunakan <p> dapat (tidak selalu) menghapus semua perilaku selain perilaku spesifik yang saya tentukan. Saya tidak tahu kenapa. <div> SELALU melakukan hal yang sama.
2rs2ts
3

Bagi siapa pun yang menggunakan Visual Studio Team Foundation Server (TFS) 2015, itu benar-benar tidak suka tertanam <a>atau <div>elemen, setidaknya di header. Juga tidak suka emoji di header:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

Diterjemahkan ke:

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

Maka tautan harus menggunakan itu id(yang memecah ini dan ekstensi pratinjau lainnya di Visual Studio), atau menghapus emoji:

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

Di mana versi yang terakhir bekerja secara online di TFS dan di preview penurunan harga Visual Studio.

Nick
sumber