การอ้างอิงโยง (ชื่อสมอ) ใน markdown


คำตอบ:


691
Take me to [pookie](#pookie)

ควรเป็นไวยากรณ์ markdown ที่ถูกต้องเพื่อข้ามไปยังจุดยึดชื่อ pookie

ในการแทรกจุดยึดของชื่อนั้นให้ใช้ HTML:

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

Markdown ดูเหมือนจะไม่สนใจที่คุณวางจุดยึด สถานที่ที่มีประโยชน์ที่จะวางมันอยู่ในส่วนหัว ตัวอย่างเช่น:

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

ทำงานได้ดีมาก (ฉันจะสาธิตที่นี่ แต่ผู้สร้างภาพของ SO ดึงสมอออก)

หมายเหตุเกี่ยวกับแท็กปิดตัวเองและid=เมื่อเทียบกับname=

รุ่นก่อนหน้าของโพสต์นี้แนะนำให้ใช้<a id='tith' />โดยใช้ไวยากรณ์ตนเองปิดสมุดทะเบียนเพื่อ XHTML, และการใช้แอตทริบิวต์แทนidname

XHTML อนุญาตให้แท็กใด ๆ เป็น "ว่างเปล่า" และ "ปิดตัวเอง" กล่าวคือ<tag />สั้น ๆ สำหรับ<tag></tag>แท็กคู่ที่จับคู่กับเนื้อความว่างเปล่า เบราว์เซอร์ส่วนใหญ่จะยอมรับ XHTML แต่บางเบราว์เซอร์ไม่สามารถทำได้ เพื่อหลีกเลี่ยงปัญหาข้ามเบราว์เซอร์ให้ปิดแท็กโดยใช้อย่างชัดเจน<tag></tag>ตามที่แนะนำข้างต้น

ในที่สุดแอตทริบิวต์name=ถูกเลิกใช้ใน XHTML ดังนั้นฉันจึงใช้ แต่เดิมid=ซึ่งทุกคนรับรู้ อย่างไรก็ตามตอนนี้ HTML5 สร้างตัวแปรทั่วโลกใน JavaScript เมื่อใช้id=และอาจไม่จำเป็นต้องเป็นสิ่งที่คุณต้องการ ดังนั้นname=ตอนนี้การใช้งานก็น่าจะเป็นมิตรมากกว่า

(ขอขอบคุณslipp ดักลาสสำหรับการอธิบาย XHTML ให้ฉันและnailerสำหรับการชี้ออก HTML5 ผลข้างเคียง - ดูความคิดเห็นและnailer 's คำตอบสำหรับรายละเอียดเพิ่มเติม. name=ปรากฏในการทำงานทุกที่ถึงแม้ว่ามันจะเลิกใช้ใน XHTML.)


1
คุณไม่สามารถดูวิธีเชื่อมโยงไปยังการสาธิตส่วนหัวของคุณหลังจาก StackOverflow แสดง HTML เนื่องจากการแสดงผลของพวกเขาแยกแท็ก<a>ออก นั่นคือคุณไม่สามารถอยู่ใน StackOverflow Markdown
Slipp D. Thompson

2
อย่างไรก็ตามสิ่งนี้จะทำงานในโหมดแสดงภาพมาร์คดาวน์อื่น ๆ ที่เป็นอิสระมากกว่า แต่คุณจะต้องมีแท็กปิด<a> <a>แท็กไม่อนุญาตให้ปิดตัวเอง นอกจากนี้ฉันพบเบราว์เซอร์ของฉันที่จะข้ามส่วนหัวที่ผ่านมาเว้นแต่ว่าแท็ก<a>อยู่ก่อนเนื้อหาของส่วนหัว การแก้ไขที่ทำกับตัวอย่างของคุณ
Slipp D. Thompson

2
เดี๋ยวก่อนคาวบอย เพียงเพราะคุณไม่มีสไตล์ใด ๆ เลย<a>หากไม่มี href ไม่ได้หมายความว่ามันจะปิดตัวเอง นอกจากว่าฉันจะเป็นคนบ้าอย่างสมบูรณ์ทั้งสองอย่างนี้: test-xhtml11และ [ sln.6bitt.com/public/test-html5.html เหมือน( test- html5)แสดงส่วนที่เหลือของหน้าภายในแท็ก <a> ไปข้างหน้าและตรวจสอบกับผู้ตรวจสอบเว็บที่คุณเลือก
Slipp D. Thompson

4
@ Slipp: โอเคฉันคิดว่าฉันเข้าใจแล้วตอนนี้ คุณรหัสแต่มันได้รับการรักษาเช่น<a id="hi"/> rest of doc <a id="hi"> rest of doc</a>(และการวิเคราะห์องค์ประกอบของหน้าแสดงสิ่งนี้ด้วย) ความผิดพลาดของฉัน: ฉันดูองค์ประกอบที่แสดงไม่ใช่แหล่งที่มา คุณคิดว่าคำตอบควรได้รับการแก้ไขเนื่องจากการสังเกตนี้หรือไม่?
Steve Powell

3
nameแอตทริบิวต์ยังสร้างตัวแปรทั่วโลก (ดูstackoverflow.com/questions/3434278/... ) ดังนั้นคุณอาจรวมทั้งการใช้idแอตทริบิวต์เป็นเป้าหมายของ URL ที่ระบุส่วนที่ตามที่ตั้งใจไว้
บ๊อบบี้แจ็ค

92

บน bitbucket.org โซลูชันที่โหวตจะไม่ทำงาน แต่เมื่อใช้ส่วนหัว (ที่มี ##) คุณสามารถอ้างอิงพวกเขาเป็นจุดยึดได้โดยใส่คำนำหน้าเป็น # markdown-header-my-header-name โดยที่ # markdown-header- เป็นคำนำหน้าโดยนัยที่สร้างโดย renderer และ ส่วนที่เหลือเป็นชื่อส่วนหัวที่ต่ำกว่าพร้อมเครื่องหมายขีดกลางแทนที่ช่องว่าง

ตัวอย่าง

## My paragraph title

จะสร้างสมอที่แน่นอนเช่นนี้

#markdown-header-my-paragraph-title

URL ทั้งหมดก่อนการอ้างอิงจุดยึดแต่ละอันเป็นทางเลือกเช่น

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

เทียบเท่ากับ

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

โดยมีเงื่อนไขว่าพวกเขาอยู่ในหน้าเดียวกัน

ที่มา: https://bitbucket.org/tutorials/markdowndemo/overview (แก้ไขแหล่งที่มาของไฟล์. md นี้และดูว่ามีการสร้างจุดยึด)


1
สิ่งนี้อาจทำเช่นกัน ตามนี้: confluence.atlassian.com/bitbucket/… , bitbucket รองรับส่วนขยายของ Table of Contents ซึ่งสามารถสร้างลิงค์และจุดยึดอัตโนมัติขึ้นอยู่กับส่วนหัวของเอกสาร ส่วนขยาย TOC มีการบันทึกไว้ที่นี่: pythonhosted.org/Markdown/extensions/toc.html เพิ่มข้อความ "[TOC]" ไปยังจุดเริ่มต้นของเอกสารเพื่อให้สร้างขึ้น
Bile Phile

8
ใน Github ## My paragraph titleจะสร้างจุดยึดต่อไปนี้user-content-my-paragraph-titleเพื่อให้คุณสามารถอ้างอิงได้ด้วย [ข้อความบางข้อความ] (# user-content-my-ย่อหน้า-title) อย่างไรก็ตามฉันไม่พบเอกสารอย่างเป็นทางการสำหรับเรื่องนี้
toto_tico

สิ่งนี้ช่วยฉันใน Bitbucket ด้วย - ทำงานเหมือนมีเสน่ห์
Scott Byers

1
นี่คือข้อมูลที่เป็นประโยชน์ ขอบคุณ. อย่างไรก็ตามตัวแสดงมาร์คดาวน์ที่ไม่มีส่วนขยายจะไม่สร้างจุดยึดเหล่านี้ให้คุณและชื่อส่วนหัวที่ปะทะกันจะส่งผลให้เกิดการจับรหัสรหัส รหัสจุดยึดที่ชัดเจนจะดีกว่าควบคุมได้มากกว่าไม่ใช่การเปลี่ยนแปลงแบบสุ่มเนื่องจากการปรับปรุงข้อความ (ดูเคล็ดลับด้านบน) และมีประโยชน์สำหรับการยึดมากกว่าส่วนหัว โดยทั่วไปจำเป็นต้องใช้ทั้งเทคนิค
Steve Powell

ในstackedit.io [linky](#header)เป็นจุดยึดที่เพียงพอและทำงานเมื่อเผยแพร่ไปยัง Gist ด้วย
เฟลิเป้อัลวาเรซ

67

nameการใช้งาน การใช้idไม่จำเป็นใน HTML 5 และจะสร้างตัวแปรทั่วโลกใน JavaScript ของคุณ

ดูข้อมูลจำเพาะ HTML 5, 5.9.8 การนำทางไปยังตัวระบุส่วน - ทั้งสองidและnameถูกใช้

มันเป็นสิ่งสำคัญที่จะรู้ว่าเบราว์เซอร์ส่วนใหญ่ยังคงเปิดรหัสลงในตัวแปรทั่วโลก นี่คือการทดสอบอย่างรวดเร็ว ใช้nameหลีกเลี่ยงการสร้าง Globals และความขัดแย้งที่อาจเกิดขึ้น

ตัวอย่างการใช้ชื่อ:

Take me to [pookie](#pookie)

และสมอเรือปลายทาง:

### <a name="pookie"></a>Some heading

5
downvoting อาร์กิวเมนต์โกลบอลตัวแปรอ่อนแอเนื่องจากคุณไม่ควรกำหนดตัวแปรโกลบอลใน JS ของคุณโดยตรงดังนั้นจะไม่มีข้อขัดแย้งเกิดขึ้น นอกจากนี้ความหมายของnameและidแตกต่างกัน
Marnen Laibow-Koser

9
@ MarnenLaibow-Koser ไม่มีใครพูดถึงการกำหนดตัวแปรทั่วโลกใน JS การสร้าง ID ใน HTML จะเป็นการสร้าง window.someid ที่เป็นสากลในเบราว์เซอร์ส่วนใหญ่
mikemaccana

14
@ MarnenLaibow-Koser ห้องสมุดหลายแห่ง (เช่นไม่ใช่ JS ของคุณ แต่เป็นของคนอื่น) ใช้ระบบเดียวทั่วโลก - ตัวอย่างเช่น fineuploader หากคุณสร้างองค์ประกอบที่มี ID fineuploaderคุณจะไม่สามารถใช้fineuploaderโมดูลได้ การหลีกเลี่ยงการสร้างรูปกลมที่ไม่จำเป็นช่วยหลีกเลี่ยงความขัดแย้งเหล่านั้น
mikemaccana

5
ฉันสนใจที่จะทำการทดสอบบางอย่างของกรณีนั้นและดูว่าการทดสอบใดที่มีความสำคัญกว่า ฉันซาบซึ้งในประเด็นทางทฤษฎี แต่ในหลายปีของการพัฒนาฝั่งไคลเอ็นต์ฉันไม่เคยมี ID ที่ใช้ในการทำลาย JS ฝั่งไคลเอ็นต์เลย (หาก HTML นั้นใช้ไม่ได้) ฉันจะใช้มันต่อไปเมื่อมันเหมาะสมทางความหมายจนกว่าฉันจะพบปัญหาจริง
Marnen Laibow-Koser

2
@ MarnenLaibow-Koser I (และอื่น ๆ อีกมากมาย) มีรหัส HTML ที่ทำลาย JavaScript จริง - มีตัวอย่างหนึ่งที่ใช้งานได้จริงมากในความคิดเห็นที่คุณตอบกลับ! มีไกด์นำเที่ยวและ บริษัท มากมายที่มักจะใช้คลาสเสมอแม้แต่กับซิงเกิลตันและนี่คือเหตุผล
mikemaccana

17

Markdown Anchorสนับสนุน hashmark ดังนั้นลิงก์ไปยังจุดยึดในหน้าก็จะเป็น[Pookie](#pookie)

สร้างจุดยึดไม่สนับสนุนจริงใน Gruber Markdown แต่ในการใช้งานอื่น ๆ เช่นMarkdown พิเศษ

ใน Markdown พิเศษ ID {#pookie}สมอถูกผนวกเข้ากับส่วนหัวหรือส่วนหัวย่อยด้วย

Github Flavoured Markdownในหน้าพื้นที่เก็บข้อมูล Git (แต่ไม่ใช่ใน Gists) สร้างจุดยึดโดยอัตโนมัติด้วยแท็กมาร์กอัปหลายแท็กในส่วนหัวทั้งหมด (h1, h2, h3, ฯลฯ ) รวมถึง:

  • id="user-content-HEADERTEXT"
  • class="anchor"
  • href="#HEADERTEXT"
  • aria-hidden="true" (นี่เป็นไอคอนลิงก์ svg ที่แสดงเมื่อวางเมาส์เหนือ)

ไม่รวมไอคอน aria / svg เมื่อมีคนเขียน:

  • # Header Title

Github สร้าง:

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

ดังนั้นเราไม่จำเป็นต้องทำอะไรเพื่อสร้างลิงก์ส่วนหัวและสามารถลิงก์ไปยังลิงก์เหล่านั้นด้วย:

  • เชื่อมโยงไปยัง [Header Title](#header-title)

16

ไม่มีไวยากรณ์ที่พร้อมใช้งานในการทำเช่นนี้ในไวยากรณ์ Markdown ดั้งเดิม แต่Markdown Extraมีวิธีการอย่างน้อยกำหนด ID ให้กับส่วนหัว - ซึ่งคุณสามารถเชื่อมโยงไปได้อย่างง่ายดาย โปรดทราบว่าคุณสามารถใช้ HTML ปกติในทั้ง Markdown และ Markdown Extra และnameแอตทริบิวต์นั้นถูกแทนที่โดยidแอตทริบิวต์ใน HTML เวอร์ชันที่ใหม่กว่า


9

สำหรับใครก็ตามที่กำลังมองหาวิธีแก้ไขปัญหานี้ใน GitBook นี่คือวิธีที่ฉันทำให้มันทำงาน (ใน GitBook) คุณต้องติดแท็กส่วนหัวอย่างชัดเจนเช่นนี้:

# My Anchored Heading {#my-anchor}

จากนั้นลิงก์ไปยังจุดยึดนี้เช่นนี้

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

วิธีแก้ไขปัญหาและตัวอย่างเพิ่มเติมสามารถดูได้ที่นี่: https://seadude.gitbooks.io/learn-gitbook/


ขอบคุณ! ใช้งานได้! สิ่งนี้ควรเป็น upvoted!
เด็กซ์เตอร์

คำตอบที่ดีที่สุด! ขอบคุณ
Invis

7

สายไปงานเลี้ยง rmarkdownแต่ผมคิดว่านอกจากนี้อาจจะมีประโยชน์สำหรับคนที่ทำงานด้วย ในrmarkdownมีการสนับสนุนในตัวสำหรับการอ้างอิงถึงส่วนหัวในเอกสารของคุณ

ส่วนหัวใด ๆ ที่กำหนดโดย

# Header

สามารถอ้างอิงได้โดย

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

ต่อไปนี้เป็น.rmdไฟล์แบบสแตนด์อโลนขั้นต่ำที่แสดงพฤติกรรมนี้ มันสามารถถักไปและ.pdf.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).

4

ใช้ Markdown ล่าสุดคุณควรจะสามารถใช้ไวยากรณ์ต่อไปนี้:

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

สิ่งนี้ควรสร้าง HTML ต่อไปนี้:

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

หากคุณต้องการให้สมอมีข้อความเพียงเพิ่มสมอข้อความในวงเล็บเหลี่ยม:

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


ดูเหมือนว่าจะMarukuรู้เพียงเกี่ยวกับไวยากรณ์นี้ ดู babelmark
Ulysse BN

3

สำหรับเครื่องกำเนิดไฟฟ้า markdown ทั่วไป คุณมีสมอที่สร้างขึ้นด้วยตนเองอย่างง่ายในแต่ละส่วนหัว ตัวอย่างเช่นที่มีแพนโดกสมอที่สร้างขึ้นจะเป็นกระสุนตัวเล็กของเคบับที่ส่วนหัวของคุณ

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

ขึ้นอยู่กับว่าคุณใช้ parser ตัวแยกวิเคราะห์ตัวใดสมอสามารถเปลี่ยนได้ (ใช้ตัวอย่างของ symbolrush และ La muerte Peluda ตอบมันต่างกัน!) เห็นนี้babelmarkที่คุณสามารถดูแองเคอที่สร้างขึ้นอยู่กับการดำเนินการของคุณ markdown

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.