การไฮไลต์ (Highlight)

Highlight เป็นไวยากรณ์แบบขยายใน Markdown สำหรับเน้นข้อความสำคัญในเอกสาร ช่วยให้ผู้อ่านจับประเด็นสำคัญได้รวดเร็ว ทำให้เอกสารชัดเจนและมีประสิทธิภาพยิ่งขึ้น

ไวยากรณ์พื้นฐาน

ทำเครื่องหมายไฮไลต์

ในส่วนขยาย Markdown ที่รองรับการไฮไลต์ มักใช้เครื่องหมายเท่ากับสองตัว (==) ครอบข้อความที่ต้องการไฮไลต์:

This is an example paragraph containing ==highlighted text==.

ผลลัพธ์การเรนเดอร์:

This is an example paragraph containing ==highlighted text==.

ไฮไลต์คำและวลี

สามารถไฮไลต์คำเดี่ยวหรือวลีได้:

In programming, ==variables== are named spaces for storing data.

Please make sure to read the ==important notes and warnings== in the documentation.

ผลลัพธ์การเรนเดอร์:

In programming, ==variables== are named spaces for storing data.

Please make sure to read the ==important notes and warnings== in the documentation.

การใช้งานขั้นสูง

ผสานกับรูปแบบอื่น

Highlight สามารถใช้ร่วมกับรูปแบบ Markdown อื่น ๆ ได้:

==**Bold Highlight**==

==*Italic Highlight*==

==***Bold Italic Highlight***==

==`Code Highlight`==

==[Link Highlight](https://www.markdownlang.com)==

ผลลัพธ์การเรนเดอร์:

==Bold Highlight==

==Italic Highlight==

==Bold Italic Highlight==

==Code Highlight==

==Link Highlight==

การไฮไลต์ระดับบล็อก

บางตัวเรนเดอร์รองรับการไฮไลต์ทั้งบล็อก โดยมักใช้คอนเทนเนอร์แบบกำหนดเอง:

:::: highlight
This is a highlighted paragraph block.

It can contain multiple lines of content, and can even include lists:
- Item 1
- Item 2
- Item 3
::::

หมายเหตุ: การไฮไลต์ระดับบล็อกขึ้นกับตัวเรนเดอร์ ตัวอย่างด้านบนใช้ได้กับแพลตฟอร์มอย่าง VitePress ที่รองรับคอนเทนเนอร์กำหนดเอง

ความเข้ากันได้และความแตกต่างในการใช้งาน

สถานะการรองรับบนแพลตฟอร์มต่าง ๆ

แพลตฟอร์ม/เครื่องมือ	รองรับไฮไลต์	ไวยากรณ์
GitHub Markdown	❌	ไม่รองรับ
GitLab Markdown	✅	==highlight==
Hugo	✅	ใช้แท็ก mark หรือ ==highlight==
VitePress	✅	==highlight==
Pandoc	✅	==highlight== หรือ [highlight]{.mark}
Jekyll	✅	ขึ้นกับธีม/ปลั๊กอิน
CommonMark	❌	ไม่รองรับ

รูปแบบผลลัพธ์ HTML

ตัวเรนเดอร์ที่รองรับการไฮไลต์มักแปลงเป็นแท็ก <mark> หรือคลาส CSS เฉพาะ:

<!-- Using mark tag -->
<p>This is an example paragraph containing <mark>highlighted text</mark>.</p>

<!-- Using custom class -->
<p>This is an example paragraph containing <span class="highlighted">highlighted text</span>.</p>

ไวยากรณ์ทางเลือก

หากแพลตฟอร์มไม่รองรับการไฮไลต์ด้วย == สามารถใช้ HTML แทนได้:

This is an example paragraph containing <mark>highlighted text</mark>.

<!-- Or using custom styles -->
This is an example paragraph containing <span style="background-color: yellow;">highlighted text</span>.

สถานการณ์การใช้งาน

เน้นย้ำในเอกสาร

เหมาะสำหรับเน้นจุดสำคัญในเอกสาร:

# Installation Guide

Please ==completely backup your data== before installation. The system installation process will format the target partition.

Installation steps:
1. Download the installer
2. Run the installation wizard
3. ==Select "Custom Installation" option==
4. Follow the on-screen prompts to complete installation

ผลลัพธ์การเรนเดอร์:

Installation Guide

Please ==completely backup your data== before installation. The system installation process will format the target partition.

Installation steps:

1. Download the installer
2. Run the installation wizard
3. ==Select "Custom Installation" option==
4. Follow the on-screen prompts to complete installation

สื่อการสอน

มีประโยชน์มากในงานสอน/ฝึกอบรม:

## Python Variables

In Python, variable assignment uses the `=` symbol:

```python
x = 10  # Assign value 10 to variable x

==Python is a dynamically typed language, where variable types are automatically determined during assignment.==

Common variable types include:

• Integer (int)
• Float (float)
• String (str)
• Boolean (bool)

### เปรียบเทียบ/แก้ไขข้อความ

ใช้เน้นการเปลี่ยนแปลงหรือความแตกต่างของข้อความได้:

```markdown
## Document Version Comparison

### Original Version
The server will undergo maintenance every Sunday at 2:00 AM.

### Updated Version
The server will undergo maintenance every Sunday at 2:00 AM. ==Maintenance is expected to last 2 hours.==

ผลลัพธ์การเรนเดอร์:

Document Version Comparison

Original Version

The server will undergo maintenance every Sunday at 2:00 AM.

Updated Version

The server will undergo maintenance every Sunday at 2:00 AM. ==Maintenance is expected to last 2 hours.==

อ้างอิงและเชิงอรรถ

ทำเครื่องหมายส่วนสำคัญในข้อความอ้างอิง:

> "This is a quoted text, ==where this part is particularly important==, requiring special attention from readers."
> 
> — Some Famous Author

ผลลัพธ์การเรนเดอร์:

"This is a quoted text, ==where this part is particularly important==, requiring special attention from readers."

— Some Famous Author

ปรับแต่งสไตล์

ในสภาพแวดล้อมที่ปรับ CSS ได้ สามารถปรับสไตล์การไฮไลต์ได้:

/* Custom highlight styles */
mark, .highlighted {
  background-color: #ffeb3b;  /* Yellow background */
  color: #000;                /* Black text */
  padding: 0 3px;            /* Padding */
  border-radius: 3px;        /* Rounded corners */
}

/* Different types of highlighting */
.highlight-warning {
  background-color: #ffcdd2;  /* Red warning highlight */
}

.highlight-success {
  background-color: #c8e6c9;  /* Green success highlight */
}

การใช้งานสไตล์กำหนดเอง:

This is <mark class="highlight-warning">warning information</mark>, this is <mark class="highlight-success">success information</mark>.

แนวปฏิบัติที่ดี

ข้อแนะนำการใช้งาน

✅ Recommended Practices:

1. **Use highlighting moderately**:
   - Only highlight truly important content
   - Too much highlighting weakens the emphasis effect
   
2. **Maintain consistency**:
   - Use consistent highlighting style throughout the document
   - Use different highlighting styles for different types of important content
   
3. **Combine with context**:
   - Ensure highlighted content has logical connection with surrounding text
   - You can add brief explanations for why certain content is highlighted

❌ Practices to Avoid:

1. Highlighting overly long paragraphs or entire chapters
2. Overusing highlighting on a single page
3. Adding highlighting to unimportant content
4. Using too many different colors or styles of highlighting

การเข้าถึงได้ (Accessibility)

การไฮไลต์อาจทำให้ผู้ใช้บางกลุ่มอ่านยาก ควรพิจารณา:

1. ความต่างของสีพื้นหลัง/ตัวอักษรเพียงพอ
2. อย่าพึ่งพาแต่สีในการสื่อสาร
3. เพิ่มตัวบ่งชี้อื่น (เช่น ไอคอน/หัวข้อ) ให้ส่วนที่ไฮไลต์
4. ทดสอบความอ่านง่ายในโหมดต่าง ๆ (เช่น โหมดมืด)

แนวทางแก้ปัญหาที่พบบ่อย

ไฮไลต์ไม่แสดงผล

หากไฮไลต์ไม่แสดงผลอย่างถูกต้อง:

1. ตรวจสอบว่าแพลตฟอร์มรองรับไวยากรณ์ ==
2. ลองใช้แท็ก HTML <mark> แทน
3. ไม่มีช่องว่างระหว่าง == กับข้อความที่ไฮไลต์
4. ตรวจสอบการอ้างอิง CSS ที่ถูกต้อง

ขัดแย้งกับรูปแบบอื่น

บางครั้งการไฮไลต์อาจชนกับรูปแบบอื่น:

<!-- Potentially problematic writing -->
==**Complex [format](https://www.markdownlang.com) content**==

<!-- Safer writing -->
<mark>**Complex [format](https://www.markdownlang.com) content**</mark>

ปัญหาการไฮไลต์ระดับบล็อก

หากต้องไฮไลต์ทั้งบล็อก แนะนำใช้ HTML หรือคอนเทนเนอร์กำหนดเอง:

<!-- Using HTML -->
<div class="highlighted-block">

# Important Chapter

This is a content block that needs overall highlighting.

</div>

<!-- Or using custom containers (on supported platforms) -->
:::: highlight
# Important Chapter

This is a content block that needs overall highlighting.
::::

ไวยากรณ์ที่เกี่ยวข้อง

• การเน้นข้อความ
• การอ้างอิงบล็อก
• HTML

เครื่องมือและปลั๊กอิน

• markdown-it-mark: เพิ่มการรองรับ highlight ให้ markdown-it
• remark-highlight.js: เพิ่มการไฮไลต์ซินแท็กซ์สำหรับโค้ด
• gatsby-remark-highlight-code: ปลั๊กอินไฮไลต์โค้ดสำหรับ Gatsby

สรุป

Highlight เป็นไวยากรณ์แบบขยายที่ช่วยเพิ่มความอ่านง่ายและความเด่นของข้อมูลสำคัญ แม้บางตัวเรนเดอร์จะไม่รองรับโดยตรง แต่ด้วย HTML และ CSS สามารถทำเอฟเฟกต์ใกล้เคียงได้ในแทบทุกสภาพแวดล้อม การใช้ไฮไลต์อย่างเหมาะสมช่วยให้ผู้อ่านค้นหาสาระสำคัญได้เร็วขึ้นและปรับปรุงประสบการณ์การอ่านโดยรวม