Softonic

แปลง Markdown เป็นสไลด์

ขั้นตอน 1 / 3
ถัดไป

เขียนงานนำเสนอในแบบเดียวกับที่คุณเขียนไฟล์ README: ใช้หัวข้อ Markdown รายการหัวข้อย่อย และบล็อกโค้ด คั่นเป็นสไลด์ด้วยเส้นแนวนอน --- เครื่องมือนี้เรนเดอร์ชุดสไลด์ของคุณแบบเรียลไทม์ด้วย Reveal.js (ธีม: ดำ ขาว เรียบง่าย solarized) รองรับโน้ตผู้บรรยายด้วย Note: สไลด์แนวตั้งซ้อนกันด้วย -- และส่งออกเป็นไฟล์ HTML ที่ทำงานได้ในตัวเองหรือไฟล์ PDF พร้อมพิมพ์

Markdown กลายเป็นชุดสไลด์ได้อย่างไร

  1. 1

    เขียน Markdown

    ใช้ `---` เพื่อคั่นสไลด์ หัวข้อ รายการ และบล็อกโค้ดมาตรฐานทำงานตามปกติ

  2. 2

    เพิ่มโน้ตผู้บรรยาย

    ขึ้นต้นย่อหน้าด้วย `Note:`: จะแสดงเฉพาะในโหมดผู้นำเสนอเท่านั้น

  3. 3

    ดูตัวอย่างชุดสไลด์

    ตัวอย่างแบบเรียลไทม์แสดงชุดสไลด์พร้อมการนำทางด้วยปุ่มลูกศร

  4. 4

    เลือกธีม

    ดำ ขาว league sky เรียบง่าย solarized: ธีมใดก็ได้ของ Reveal.js

  5. 5

    ส่งออก

    ไฟล์ HTML ที่ทำงานได้ในตัวเอง หรือ PDF ผ่านการพิมพ์ของเบราว์เซอร์

โครงสร้างของสไลด์

# สไลด์เปิด

ข้อความหัวข้อย่อยตรงนี้

---

## สไลด์ที่สอง

- หัวข้อย่อยหนึ่ง
- หัวข้อย่อยสอง
- หัวข้อย่อยสาม

Note: นี่คือโน้ตผู้บรรยายที่มองเห็นได้เฉพาะในโหมดผู้นำเสนอ

---

## สไลด์โค้ด

\`\`\`python
def hello(name):
    return f"Hi {name}"
\`\`\`
  • --- (ขีดกลางสามตัวในบรรทัดของตัวเอง) เริ่มสไลด์แนวนอนใหม่
  • -- (ขีดกลางสองตัว) เริ่มสไลด์แนวตั้งภายในคอลัมน์สไลด์ปัจจุบัน, กดลูกศรลงเพื่อเลื่อนลง
  • Note: ที่ต้นย่อหน้าจะกลายเป็นโน้ตผู้บรรยาย

การนำทางด้วยคีย์บอร์ด

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

เทคนิคการจัดวาง

  • การจัดวางสองคอลัมน์: ใช้ HTML ดิบภายในสไลด์, <div class="columns">...</div>
  • การเปิดเผยเป็นส่วน ๆ: รายการหัวข้อย่อยจะปรากฏทีละรายการด้วยแอตทริบิวต์ {.fragment} เมื่อใช้ Reveal.js โดยตรง เพิ่มเป็น HTML ดิบได้หากจำเป็น
  • ภาพพื้นหลัง: แอตทริบิวต์ระดับสไลด์ <!-- .slide: data-background="url" --> กำหนดพื้นหลังแบบเต็มจอ
  • แอนิเมชันอัตโนมัติระหว่างสไลด์: Reveal 4 รองรับการเปลี่ยนภาพอย่างลื่นไหลสำหรับองค์ประกอบที่ตรงกัน, เปิดใช้งานในการตั้งค่าธีม

การส่งออกเป็น PDF

จากตัวอย่างแบบเรียลไทม์ ให้เปิด ?print-pdf ใน URL ของเบราว์เซอร์ แล้วใช้กล่องโต้ตอบการพิมพ์ของเบราว์เซอร์ เลือก A4 แนวนอน เปิดกราฟิกพื้นหลัง และตั้งขอบให้น้อยที่สุด Reveal.js จะแสดงหนึ่งสไลด์ต่อหนึ่งหน้า พร้อมโน้ตผู้บรรยายในหน้าเสริมที่เลือกได้

เมื่อใดที่สไลด์แบบ Markdown โดดเด่น

  • การบรรยายทางเทคนิคที่มีตัวอย่างโค้ดจำนวนมาก
  • ชุดสไลด์ที่เน้นเนื้อหาเป็นหลัก โดยการจัดวางเป็นเรื่องรอง
  • เอกสารในรูปแบบสไลด์, เก็บงานนำเสนอไว้ข้างไฟล์ README ของโปรเจกต์ใน git
  • สื่อการฝึกอบรมที่ควบคุมเวอร์ชัน

เมื่อใดที่ไม่เหมาะ

  • คีย์โน้ตที่เน้นการออกแบบ พร้อมการวางภาพอย่างแม่นยำ
  • สไลด์ที่ต้องการแอนิเมชันซับซ้อนหรือการจับเวลาวิดีโอที่ฝังอยู่
  • ชุดสไลด์ที่ควบคุมโดยแบรนด์ ซึ่งเทมเพลตกำหนดทุกรายละเอียด

คำถามที่พบบ่อย

ได้, รูปแบบการเขียนภาพด้วย Markdown แบบปกติใช้งานได้ โปรดใช้ URL แบบสัมบูรณ์ หรืออัปโหลดภาพก่อน เพื่อให้เข้าถึงได้จากไฟล์ HTML ที่ส่งออก

ได้ ตามต้องการ โหมดพิมพ์ของ Reveal รองรับ “โน้ตเป็นหน้าแยกต่างหาก”, แต่ละสไลด์จะกลายเป็นสองหน้า PDF หน้าหนึ่งเป็นสไลด์ อีกหน้าเป็นโน้ต

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

ได้ เพิ่มบล็อก <style> ไว้ด้านบนของ Markdown หรือเชื่อมโยงสไตล์ชีตภายนอกในการตั้งค่าธีม ระบบจะแทรกเนื้อหานี้ลงในผลลัพธ์ของ Reveal.js

ไฟล์ HTML ที่ส่งออกเป็นไฟล์ที่ทำงานได้ในตัวเอง และรันบนโฮสต์แบบสแตติกใดก็ได้ เช่น GitHub Pages, Netlify หรือ S3 เพียงอัปโหลดไฟล์ HTML ก็เสร็จเรียบร้อย

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้างไฟล์ webpack.config.js สำหรับ webpack 5 จากแบบฟอร์มสั้นๆ ตั้งค่า entry, โฟลเดอร์ output และ mode จากนั้นเปิด TypeScript, Babel, CSS loader, HtmlWebpackPlugin และ dev server

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

ตัวสร้างลูกศร CSS

สร้างลูกศร CSS ในเบราว์เซอร์ด้วยทิศทาง สี ขนาด และความหนาของเส้นขอบ แล้วคัดลอกกฎ.

เครื่องมือนี้มีให้บริการในภาษาอื่น