วิธีเปลี่ยน VSCode ให้เป็น Ultimate Markdown Editor

หากคุณเขียนสำหรับเว็บ คุณอาจต้องการดู Markdown มีแอพ Markdown มากมายที่รองรับนักเขียนเว็บ แต่โปรแกรมแก้ไขโค้ดฟรี เช่น Visual Studio Code (VSCode) ของ Microsoft นั้นมีประสิทธิภาพมากกว่า

VSCode เข้าใจ Markdown และมีเครื่องมือในตัวสำหรับการดูตัวอย่างใน HTML อย่างไรก็ตาม คุณสามารถเพิ่มฟังก์ชันโปรแกรมประมวลผลคำ เช่น จำนวนคำและตัวตรวจการสะกดได้ คุณอาจต้องการเปิดใช้งานการปรับแต่งเฉพาะเว็บไซต์สำหรับตัวแสดงตัวอย่าง

การทำวิดีโอประจำวัน

สุดท้ายนี้ ความสามารถในการคัดลอก Markdown เป็น HTML เพื่อให้คุณสามารถวางลงใน Content Management System (CMS) ได้อย่างหมดจด

ดาวน์โหลดและติดตั้ง VSCode

ในการเริ่มต้น ให้ดาวน์โหลด VSCode หรือ VSCodium ทางเลือกโอเพ่นซอร์ส เวอร์ชันของแต่ละเวอร์ชันมีให้สำหรับระบบปฏิบัติการเดสก์ท็อปหลักทั้งหมด

เมื่อคุณได้ ดาวน์โหลดและติดตั้ง VSCode ให้เรียกใช้แอปพลิเคชันเพื่อเริ่มต้น

ติดตั้งส่วนขยายจำนวนคำ

เริ่มต้นด้วยการเพิ่มตัวนับคำ มีส่วนขยายมากมายที่จัดการสิ่งนี้ได้ สิ่งที่แยกความแตกต่างระหว่างคำจริงและรหัสหรือชื่อไฟล์ได้ดีที่สุดคือส่วนขยาย Word Counter ของ Microsoft

ดาวน์โหลด: การนับจำนวนคำ ส่วนขยาย VSCode (ฟรี)

คลิกที่ ดาวน์โหลดส่วนขยาย ภายใต้ ทรัพยากร ในบานหน้าต่างด้านขวาล่าง
เมื่อดาวน์โหลดแล้ว ให้เปลี่ยนเป็น VSCode
คลิกที่ ไอคอนเกียร์ ที่มุมล่างซ้ายของอินเทอร์เฟซ
คลิกที่ ส่วนขยาย .
คลิกที่จุดไข่ปลา ( ... ) ใกล้กับด้านบนของบานหน้าต่างส่วนขยาย
คลิก ติดตั้งจาก VSIX .
เลือก ms-vscode.wordcount-*.vsix ไฟล์ที่คุณเพิ่งดาวน์โหลด

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

เป็นโปเกมอนดวงอาทิตย์และดวงจันทร์ที่คุ้มค่า

เปิดเอกสารมาร์กดาวน์ใน VSCode โดยตรวจพบการสะกดผิดโดยขีดเส้นใต้สีน้ำเงินอ่อนๆ

ติดตั้งส่วนขยายการตรวจสอบการสะกด

คุณจะต้องเพิ่มฟังก์ชันการตรวจตัวสะกดด้วย เช่นเดียวกับตัวนับคำ มีส่วนขยายมากมายที่จัดการการตรวจสอบตัวสะกด ที่นิยมมากที่สุดคือ ตรวจการสะกดรหัส โดยซอฟต์แวร์ Street Side เนื่องจากมีหลายภาษา

ดาวน์โหลด: ตรวจการสะกดรหัส ส่วนขยาย VSCode (ฟรี)

ทำตามขั้นตอนที่ 1 ถึง 6 จากหัวข้อด้านบน
เลือก streetsidesoftware.code-spell-checker-*.vsix ไฟล์ที่คุณเพิ่งดาวน์โหลด

ดิ ตรวจการสะกดรหัส ตอนนี้ควรติดตั้งส่วนขยายแล้ว ทดสอบโดยเปิดไฟล์ Markdown ใหม่และพิมพ์คำที่สะกดผิด

ด้านล่างขวาของแถบสถานะ VSCode พร้อมตัวบ่งชี้ที่แสดงข้อผิดพลาดในการสะกดคำสี่คำ

คุณควรเห็นเส้นหยักสีน้ำเงินใต้คำเหล่านั้นพร้อมกับจำนวนข้อผิดพลาดที่ด้านล่างขวามือของอินเทอร์เฟซ:

ไฟล์ VSCode settings.json เปิดขึ้นโดยเพิ่มโค้ดที่กำหนดเอง

ปรับแต่งข้อผิดพลาด Squiggle

ปัญหาที่ใหญ่ที่สุดของส่วนขยายการตรวจสอบการสะกดนี้คือสีน้ำเงินอ่อนที่ใช้สำหรับ squiggle ที่ระบุข้อผิดพลาด มันมักจะกลมกลืนไปกับพื้นหลังของธีมสีเข้ม และถูกนำมาใช้ซ้ำสำหรับองค์ประกอบ Markdown อื่นๆ

คุณสามารถลองเปลี่ยนเป็นสีแดงตัวหนาอย่างที่คุณคาดว่าจะเห็นในโปรแกรมประมวลผลคำ:

คลิกที่ ไอคอนเกียร์ ที่มุมล่างซ้ายของอินเทอร์เฟซ
คลิกที่ การตั้งค่า .
คลิกที่ โต๊ะทำงาน , แล้ว รูปร่าง .
เลื่อนลงไปที่ การปรับแต่งสี :
คลิก แก้ไขใน settings.json .
วางรหัสต่อไปนี้ลงในตัวแก้ไขที่เปิดขึ้นในแท็บใหม่:
```
"editorInfo.foreground": "#ff0000"
```
และบันทึกไฟล์.

ตอนนี้ถ้าคุณสะกดคำผิด VSCode จะตกแต่งด้วย squiggle สีแดงสด:

เอกสาร HTML ที่จัดรูปแบบอย่างถูกต้องเปิดใน VSCode

ละเว้นผลบวกลวง

เครื่องตรวจตัวสะกดอาจไม่รู้จักคำศัพท์เฉพาะอุตสาหกรรมหรือคำนามเฉพาะ เช่น ชื่อบริษัท ในภาพหน้าจอด้านบน ตัวอย่างเช่น VSCode ไฮไลต์ตัวย่อ 'distro' ว่าสะกดผิด

หากต้องการหยุดเห็นคำเหล่านี้เป็นข้อผิดพลาด คุณจะต้องเพิ่มคำเหล่านี้ลงใน การตั้งค่าผู้ใช้ .

คลิกขวาที่คำที่คุณต้องการให้ตัวตรวจตัวสะกดละเว้น
วางเมาส์เหนือ การสะกดคำ และเลือก เพิ่มคำในการตั้งค่าผู้ใช้ .

จากนี้ไป การตรวจตัวสะกดจะไม่ระบุคำเหล่านี้ว่าไม่ถูกต้องอีกต่อไป:

คุณสมบัติของ windows ควรเปิดใน windows 10

การตั้งค่า VSCode > ส่วนขยาย > Markdown > Markdown: เมนูสไตล์

ติดตั้ง Copy Markdown เป็นส่วนขยาย HTML

ถัดไป ติดตั้ง Copy Markdown เป็นส่วนขยาย HTML เพื่อให้คุณสามารถคัดลอกและวาง Markdown ที่จัดรูปแบบได้

ดาวน์โหลด: คัดลอก Markdown เป็น HTML ส่วนขยาย VSCode (ฟรี)

ทำตามขั้นตอนที่ 1 ถึง 6 จากหัวข้อด้านบน
เลือก jerriepelser.copy-markdown-as-html-1.1.0.vsix ไฟล์ที่คุณเพิ่งดาวน์โหลด

ตอนนี้คุณควรจะสามารถคัดลอก Markdown จาก VSCode และวางลงใน CMS เป็น HTML ที่สะอาดได้ เพื่อทดสอบสิ่งนี้:

เลือกข้อความ Markdown
เปิด จานคำสั่ง ใน ดู เมนู หรือโดยการกด CTRL+Shift+P .
เลือก Markdown: คัดลอกเป็น HTML :
วาง Markdown ที่คัดลอกลงในไฟล์ HTML ใหม่

คุณควรเห็นว่า Markdown ที่คัดลอกถูกวางอย่างถูกต้องเป็น HTML:

การปรับแต่งบานหน้าต่างแสดงตัวอย่าง

ตามค่าเริ่มต้น บานหน้าต่างแสดงตัวอย่างจะมีลักษณะเหมือนกับธีม VSCode ปัจจุบัน

มาร์กดาวน์ของบทความนี้เปิดใน VSCode โดยใช้ธีม Office โดย huacat

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

คุณสามารถใช้เว็บไซต์ใดก็ได้ที่คุณต้องการ สไตล์ต่อไปนี้นำมาจาก MUO แค่ ใช้เครื่องมือตรวจสอบองค์ประกอบในเบราว์เซอร์ของคุณเพื่อค้นหาแบบอักษร และ เลือกสีจากเว็บไซต์ใดก็ได้ .

วิธีที่ตลกในการเลื่อนใน dms

สร้างไฟล์ใหม่และตั้งชื่อว่า ' CustomStyles.css '

วางโค้ด CSS ตัวอย่างต่อไปนี้ลงในไฟล์:

body { 
  background-color: #fff; 
  color: #2c2c2c; 
  font-family: Roboto; 
  font-size: 18px; 
  font-weight: 400; 
  line-height: 1.7em; 
  max-width: 750px; 
} 
  
h1 { 
  font-size: 38px; 
  font-weight: 800; 
} 
  
h2 { 
  font-size: 34px; 
  font-weight: 700; 
} 
  
h3 { 
  font-size: 24px; 
  font-weight: 700; 
} 
  
a { 
  border-bottom: 2px solid #bf0d0b; 
  color: #bf0d0b; 
  font-weight: 700; 
} 
  
a:hover { 
  color: #fff; 
  background: #bf0d0b; 
} 
  
strong { 
  font-weight: bold; 
}

และบันทึกไฟล์.
คลิกที่ ไอคอนเกียร์ ที่มุมล่างซ้ายของอินเทอร์เฟซ
คลิกที่ การตั้งค่า .
คลิกที่ ส่วนขยาย แล้วก็ Markdown .
เลื่อนลงไปที่ Markdown: สไตล์ และคลิก เพิ่มรายการ .
เข้าสู่เส้นทางของคุณ CustomStyles.css ไฟล์ เช่น
```
C:\Users\Adam\CustomStyles.css
```
คลิก ตกลง .

เมื่อคุณสร้างสิ่งเหล่านี้แล้ว คุณควรลงเอยด้วยบานหน้าต่างแสดงตัวอย่างที่ดูเหมือนบทความนี้มาก

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

ธีมบรรณาธิการ

ธีม VSCode เริ่มต้นมีทั้งแบบมืดและสว่าง โดยแต่ละเวอร์ชันมีคอนทราสต์สูง แต่เช่นเดียวกับโปรแกรมแก้ไขโค้ดดีๆ ก็มี มีธีมของบุคคลที่สามมากมายให้เลือก .

ถ้าคุณชอบรูปลักษณ์ของ Word Processor มากกว่าตัวแก้ไขโค้ด ฉันขอแนะนำธีม Office โดย huacat:

หากคุณต้องการโปรแกรมแก้ไขโค้ด ธีมทั่วไป เช่น Dracula, Gruvbox, Material (ดูภาพหน้าจอด้านล่าง) และ Nord ล้วนมีให้ใช้งานจากตลาดส่วนขยาย

ในการติดตั้งธีมใหม่:

คลิกที่ ไอคอนเกียร์ ที่มุมล่างซ้ายของอินเทอร์เฟซ
คลิกที่ ส่วนขยาย .
ค้นหาธีมใด ๆ ที่กล่าวถึงข้างต้นหรือเพียงแค่กรองหมวดหมู่เป็น ธีม และเรียกดูสิ่งที่มีอยู่

VSCode เป็น Ultimate Markdown Editor หรือไม่?

VSCode เป็นเครื่องมือแก้ไข Markdown ที่ดีที่สุดสำหรับเนื้อหาเว็บหรือไม่? นอกกรอบ คงไม่ใช่ แต่มันเป็นเรื่องที่สามารถขยายได้มากที่สุด

ตัวนับคำ, ตัวตรวจการสะกด, คัดลอก Markdown เป็น HTML, ปรับแต่งการแสดงตัวอย่าง และธีมเพียงแค่ขีดข่วนพื้นผิว มีระบบนิเวศที่เต็มไปด้วยส่วนขยายสำหรับ VSCode และคุณมีอิสระที่จะสร้างมันขึ้นมาเอง