md2googleslides ดาวน์โหลด - md2googleslides ดาวน์โหลดซอร์สโค้ด

md2googleslides

ซอร์สโค้ดอื่น ๆ

0.5

ดาวน์โหลด

สร้าง Google Slides จาก markdown & HTML เรียกใช้จากบรรทัดคำสั่งหรือฝังในแอปพลิเคชันอื่น

โปรเจ็กต์นี้ได้รับการพัฒนาเพื่อเป็นตัวอย่างของวิธีใช้ Slides API

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

ยินดีบริจาค

การติดตั้งและการใช้งาน

สำหรับการใช้งานบรรทัดคำสั่ง ให้ติดตั้ง md2glides ทั่วโลก:

npm install -g md2gslides

จากนั้นรับข้อมูลรับรองรหัสไคลเอ็นต์ OAuth ของคุณ:

สร้าง (หรือนำมาใช้ซ้ำ) โครงการนักพัฒนาซอฟต์แวร์ที่ https://console.developers.google.com
เปิดใช้งาน Google Slides API ที่หน้าไลบรารี API
ไปที่หน้าข้อมูลประจำตัวแล้วคลิก "+ สร้างข้อมูลรับรอง" ที่ด้านบน
เลือกข้อมูลรับรองการให้สิทธิ์ "รหัสไคลเอ็นต์ OAuth"
เลือกประเภท "แอปพลิเคชันคอมพิวเตอร์" และตั้งชื่อให้
ดาวน์โหลดไฟล์ข้อมูลรับรองลูกค้า
คัดลอกไปที่ client_id.json (ชื่อต้องตรงกัน) และบันทึกลงใน ~/.md2googleslides

หลังจากติดตั้ง ให้นำเข้าสไลด์ของคุณโดยเรียกใช้:

md2gslides slides.md --title " Talk Title "

สิ่งนี้จะสร้าง Google Slides ใหม่ในบัญชีของคุณพร้อมชื่อ Talk Title

หมายเหตุ: ครั้งแรกที่รันคำสั่ง คุณจะได้รับแจ้งให้อนุญาต ข้อมูลรับรองโทเค็น OAuth จะถูกจัดเก็บไว้ในไฟล์ชื่อ ~/.md2googleslides/credentials.json

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

 # To reuse deck available at: https://docs.google.com/presentation/d/<some id>/edit#
md2gslides slides.md --title "Talk Title" --append <some id> --erase

กฎมาร์กดาวน์ที่รองรับ

md2gslides ใช้ชุดย่อยของกฎ CommonMark และ Github Flavoured Markdown สำหรับมาร์กดาวน์

สไลด์

โดยทั่วไปแต่ละสไลด์จะแสดงด้วยส่วนหัว ตามด้วยองค์ประกอบบล็อกตั้งแต่ศูนย์ขึ้นไป

เริ่มต้นสไลด์ใหม่ด้วยกฎแนวนอน ( --- ) ตัวคั่นอาจถูกละเว้นสำหรับสไลด์แรก

ตัวอย่างต่อไปนี้แสดงวิธีสร้างสไลด์ที่มีเค้าโครงต่างๆ:

สไลด์ชื่อเรื่อง

 -

    # นี่คือสไลด์ชื่อเรื่อง
    ## ชื่อของคุณที่นี่

สไลด์ชื่อเรื่อง

สไลด์ชื่อส่วน

 -

    # นี่คือชื่อส่วน

สไลด์ชื่อส่วน

ชื่อส่วนและสไลด์เนื้อหา

 -

    # ชื่อส่วนและสไลด์เนื้อหา

    ## นี่คือคำบรรยาย

    นี่คือร่างกาย

ชื่อส่วนและสไลด์เนื้อหา

สไลด์ชื่อเรื่องและเนื้อหา

 -

    # ชื่อเรื่องและสไลด์เนื้อหา

    นี่คือตัวสไลด์

สไลด์ชื่อเรื่องและเนื้อหา

สไลด์ประเด็นหลัก

เพิ่ม {.big} ลงในชื่อเรื่องเพื่อสร้างสไลด์ที่มีประเด็นสำคัญเพียงข้อเดียว

 -

    # นี่คือประเด็นหลัก {.big}

สไลด์ประเด็นหลัก

สไลด์ตัวเลขใหญ่

ใช้ {.big} ในส่วนหัวร่วมกับเนื้อหาด้วย

 -

    # 100% {.ใหญ่}

    นี่คือร่างกาย

สไลด์ตัวเลขใหญ่

สไลด์สองคอลัมน์

แยกคอลัมน์ด้วย {.column} เครื่องหมายจะต้องปรากฏบนบรรทัดของตัวเองโดยมีช่องว่างทั้งก่อนและหลัง

 -

    # เค้าโครงสองคอลัมน์

    นี่คือคอลัมน์ด้านซ้าย

    {.คอลัมน์}

    นี่คือคอลัมน์ด้านขวา

สไลด์สองคอลัมน์

ธีมส์

md2googleslides ไม่ได้แก้ไขหรือควบคุมตัวเลือกที่เกี่ยวข้องกับธีมใด ๆ เพียงตั้งค่าธีมพื้นฐานที่คุณต้องการบน Google Slides โดยตรง แม้ว่าคุณจะใช้ตัวเลือก --append สำหรับการใช้สำรับซ้ำ ธีมจะไม่เปลี่ยนแปลง

รูปภาพ

รูปภาพอินไลน์

สามารถวางรูปภาพบนสไลด์ได้โดยใช้แท็กรูปภาพ สามารถใส่ภาพได้หลายภาพ รูปภาพหลายรายการในย่อหน้าเดียวจะถูกจัดเรียงเป็นคอลัมน์ หลายย่อหน้าจัดเรียงเป็นแถว

หมายเหตุ: ขณะนี้รูปภาพได้รับการปรับขนาดและจัดกึ่งกลางเพื่อให้พอดีกับเทมเพลตสไลด์

 -

    # สไลด์สามารถมีรูปภาพได้

    ![](https://placekitten.com/900/900)

เลื่อนพร้อมรูปภาพ

ภาพพื้นหลัง

ตั้งค่าภาพพื้นหลังของสไลด์โดยเพิ่ม {.background} ต่อท้าย URL รูปภาพ

 -

    # สไลด์สามารถมีภาพพื้นหลังได้

    ![](https://placekitten.com/1600/900){.พื้นหลัง}

สไลด์พร้อมภาพพื้นหลัง

วิดีโอ

รวมวิดีโอ YouTube ด้วยแท็กรูปภาพที่แก้ไข

 -

    # สไลด์สามารถมีวิดีโอได้

    @[youtube](MG8KADiRbOU)

สไลด์พร้อมวิดีโอ

บันทึกของผู้บรรยาย

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

 -

    # ชื่อสไลด์

    ![](https://placekitten.com/1600/900){.พื้นหลัง}

    -
    นี่คือบันทึกของผู้บรรยาย
    -

การจัดรูปแบบ

อนุญาตให้ใช้กฎการจัดรูปแบบพื้นฐาน ได้แก่:

ตัวหนา
ตัวเอียง
รหัส
ขีดทับ
ไฮเปอร์ลิงก์
รายการที่สั่ง
รายการที่ไม่เรียงลำดับ

มาร์กดาวน์ต่อไปนี้จะแสดงสไตล์ทั่วไปบางประการ

 **ตัวหนา** *ตัวเอียง* และ ~~ขีดทับ~~ อาจใช้ได้

รายการที่สั่ง:
1. ข้อ 1
1. ข้อ 2
  1. ข้อ 2.1

รายการที่ไม่เรียงลำดับ:
* รายการที่ 1
* ข้อ 2
  * ข้อ 2.1

นอกจากนี้ ชุดย่อยของแท็ก HTML แบบอินไลน์ยังได้รับการสนับสนุนสำหรับการจัดรูปแบบอีกด้วย

รูปแบบ CSS ที่รองรับสำหรับใช้กับองค์ประกอบ  :

color
background-color
font-weight: bold
font-style: italic
text-decoration: underline
text-decoration: line-through
font-family
font-variant: small-caps
font-size (ต้องใช้จุดสำหรับหน่วย)

คุณยังอาจใช้แอตทริบิวต์ {style="..."} หลังองค์ประกอบมาร์กดาวน์เพื่อใช้สไตล์ สามารถใช้กับส่วนหัว องค์ประกอบอินไลน์ บล็อกโค้ด ฯลฯ

อิโมจิ

ใช้อิโมจิสไตล์ Github ในข้อความของคุณโดยใช้ :emoji:

ตัวอย่างต่อไปนี้จะแทรกอิโมจิในส่วนหัวและเนื้อหาของสไลด์

 ### ฉัน :heart: แมว

:heart_eyes_cat:

บล็อกรหัส

รองรับบล็อกโค้ดทั้งแบบเยื้องและแบบมีรั้ว พร้อมการเน้นไวยากรณ์

ตัวอย่างต่อไปนี้แสดงโค้ดที่เน้นสี

 ### สวัสดีชาวโลก

```จาวาสคริปต์
console.log('สวัสดีชาวโลก');
-

หากต้องการเปลี่ยนธีมเน้นไวยากรณ์ ให้ระบุตัวเลือก --style <theme> บนบรรทัดคำสั่ง รองรับธีม highlight.js ทั้งหมด ตัวอย่างเช่น หากต้องการใช้ธีม GitHub

md2gslides slides.md --style github

คุณยังสามารถใช้การเปลี่ยนแปลงสไตล์เพิ่มเติมกับทั้งบล็อกได้ เช่น การเปลี่ยนขนาดตัวอักษร:

 ### สวัสดีชาวโลก

```จาวาสคริปต์
console.log('สวัสดีชาวโลก');
```{style="font-size: 36pt"}

ตาราง

ตารางได้รับการสนับสนุนผ่านไวยากรณ์ GFM

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

ข้อมูลต่อไปนี้จะสร้างตารางขนาด 2x5 บนสไลด์

 ### สัตว์เลี้ยงยอดนิยมในสหรัฐอเมริกา

สัตว์ | ตัวเลข
-
ปลา | 142 ล้าน
แมว | 88 ล้าน
สุนัข | 75 ล้าน
นก | 16 ล้าน

ภาพท้องถิ่น

รูปภาพที่อ้างอิงเส้นทางในเครื่องถูกอัปโหลดชั่วคราวและโฮสต์ไว้ที่ file.io File.io เป็นบริการให้บริการไฟล์ชั่วคราวที่สร้าง URL แบบสุ่มที่มีอายุสั้นไปยังไฟล์อัพโหลดและลบเนื้อหาหลังการใช้งานไม่นาน

เนื่องจากรูปภาพในเครื่องถูกอัปโหลดไปยังบุคคลที่สาม จึงจำเป็นต้องเลือกใช้คุณสมบัตินี้อย่างชัดเจน รวมตัวเลือก --use-fileio เพื่อเลือกใช้การอัปโหลดภาพ สิ่งนี้ใช้ได้กับรูปภาพที่เป็นไฟล์รวมถึงเนื้อหาที่แรสเตอร์โดยอัตโนมัติ เช่น นิพจน์ทางคณิตศาสตร์และ SVG

การแรสเตอร์รูปภาพ

สไลด์ยังสามารถรวมรูปภาพที่สร้างขึ้น โดยใช้บล็อกรั้ว $$$ สำหรับข้อมูล รูปภาพที่สร้างที่รองรับในปัจจุบัน ได้แก่ นิพจน์ทางคณิตศาสตร์ (TeX และ MathML) รวมถึง SVG รูปภาพที่แรสเตอร์จะถือว่าเหมือนกับรูปภาพในเครื่องที่ต้องเลือกใช้ในการอัปโหลดรูปภาพไปยังบริการของบุคคลที่สามผ่านตัวเลือก --use-fileio

การใช้เท็กซ์:

 #คณิตเป็นยังไงบ้าง?

$$$ คณิตศาสตร์
cos (2theta) = cos^2 theta - sin^2 theta
-

SVG

 # หรือ SVG บ้าง?

$$$ svg
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 48 48">
  <defs>
    <เส้นทาง id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/>
  </defs>
  <clipPath id="b">
    <ใช้ xlink:href="#a" overflow="visible"/>
  </คลิปพาธ>
  <path คลิป-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
  <path คลิป-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/>
  <path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/>
</svg>
-

เช่นเดียวกับรูปภาพในเครื่อง รูปภาพที่สร้างขึ้นจะถูกแสดงชั่วคราวผ่าน file.io

ยินดีต้อนรับคำขอดึงสำหรับโปรแกรมสร้างรูปภาพอื่นๆ (เช่น นางเงือก, Chartjs ฯลฯ)!