Hasilkan Google Slide dari penurunan harga & HTML. Jalankan dari baris perintah atau sematkan di aplikasi lain.
Proyek ini dikembangkan sebagai contoh cara menggunakan Slides API.
Meskipun belum menghasilkan dek yang sangat indah, Anda dianjurkan untuk menggunakan alat ini untuk membuat prototipe presentasi dengan cepat.
Kontribusi dipersilakan.
Untuk penggunaan baris perintah, instal md2gslides secara global:
npm install -g md2gslides
Kemudian dapatkan kredensial ID klien OAuth Anda:
client_id.json
(nama harus cocok) dan simpan ke ~/.md2googleslides
.Setelah menginstal, impor slide Anda dengan menjalankan:
md2gslides slides.md --title " Talk Title "
Ini akan menghasilkan Google Slide baru di akun Anda dengan Talk Title
.
CATATAN: Pertama kali perintah dijalankan, Anda akan diminta untuk otorisasi. Kredensial token OAuth disimpan secara lokal dalam file bernama ~/.md2googleslides/credentials.json
.
Setiap kali Anda menjalankan komentar di atas, dek slide baru akan dibuat. Untuk bekerja pada dek yang sama persis, cukup dapatkan ID dari slide yang sudah dibuat. Misalnya, Anda dapat menggunakan perintah berikut:
# 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 menggunakan subset aturan CommonMark dan Github Flavored Markdown untuk penurunan harga.
Setiap slide biasanya diwakili oleh header, diikuti oleh nol atau lebih elemen blok.
Mulailah slide baru dengan aturan horizontal ( ---
). Pemisah dapat dihilangkan untuk slide pertama.
Contoh berikut menunjukkan cara membuat slide dengan berbagai tata letak:
--- # Ini adalah judul slide ## Nama Anda di sini
--- # Ini adalah judul bagian
--- # Judul bagian & isi slide ## Ini adalah subjudul Ini adalah tubuhnya
--- # Judul & isi slide Ini adalah badan slide.
Tambahkan {.big}
pada judul untuk membuat slide dengan satu poin besar
--- # Ini poin utamanya {.big}
Gunakan {.big}
pada header yang dikombinasikan dengan isi juga.
--- # 100% {.besar} Ini adalah tubuhnya
Pisahkan kolom dengan {.column}
. Penanda harus muncul pada barisnya sendiri dengan bagian yang kosong sebelum dan sesudahnya.
--- # Tata letak dua kolom Ini adalah kolom kiri {.kolom} Ini adalah kolom kanan
md2googleslides
tidak mengedit atau mengontrol opsi terkait tema apa pun. Cukup tetapkan tema dasar yang Anda inginkan di Google Slide secara langsung. Bahkan jika Anda akan menggunakan opsi --append
untuk menggunakan kembali dek, tema tidak akan diubah.
Gambar dapat ditempatkan pada slide menggunakan tag gambar. Beberapa gambar dapat dimasukkan. Beberapa gambar dalam satu paragraf disusun dalam kolom, beberapa paragraf disusun dalam baris.
Catatan: Gambar saat ini diskalakan dan dipusatkan agar sesuai dengan template slide.
--- # Slide dapat memiliki gambar ![](https://placekitten.com/900/900)
Atur gambar latar belakang slide dengan menambahkan {.background}
di akhir URL gambar.
--- # Slide dapat memiliki gambar latar belakang ![](https://placekitten.com/1600/900){.background}
Sertakan video YouTube dengan tag gambar yang dimodifikasi.
--- # Slide dapat berisi video @[youtube](MG8KADiRbOU)
Sertakan catatan pembicara untuk slide menggunakan komentar HTML. Teks di dalam komentar mungkin menyertakan penurunan harga untuk pemformatan, meskipun hanya pemformatan teks yang diperbolehkan. Video, gambar, dan tabel diabaikan dalam catatan pembicara.
--- #Judul slide ![](https://placekitten.com/1600/900){.background} <!-- Ini adalah catatan pembicara. -->
Aturan pemformatan dasar diperbolehkan, termasuk:
Penurunan harga berikut menggambarkan beberapa gaya umum.
**Tebal**, *miring*, dan ~~coret~~ dapat digunakan. Daftar yang dipesan: 1. Barang 1 1. Butir 2 1. Butir 2.1 Daftar tidak berurutan: * Barang 1 * Barang 2 * Butir 2.1
Selain itu, subset tag HTML sebaris didukung untuk penataan gaya.
<span>
<sup>
<sub>
<em>
<i>
<strong>
<b>
Gaya CSS yang didukung untuk digunakan dengan elemen <span>
:
color
background-color
font-weight: bold
font-style: italic
text-decoration: underline
text-decoration: line-through
font-family
font-variant: small-caps
font-size
(harus menggunakan titik untuk satuan) Anda juga dapat menggunakan atribut {style="..."}
setelah elemen penurunan harga untuk menerapkan gaya. Ini dapat digunakan pada header, elemen sebaris, blok kode, dll.
Gunakan emoji gaya Github di teks Anda menggunakan :emoji:
.
Contoh berikut menyisipkan emoji di header dan badan slide.
### Aku :hati: kucing :hati_mata_kucing:
Blok kode berindentasi dan berpagar didukung, dengan penyorotan sintaksis.
Contoh berikut menampilkan kode yang disorot.
### Halo Dunia ``` javascript console.log('Halo dunia'); ```
Untuk mengubah tema sorotan sintaks, tentukan opsi --style <theme>
pada baris perintah. Semua tema highlight.js didukung. Misalnya untuk menggunakan tema github
md2gslides slides.md --style github
Anda juga dapat menerapkan perubahan gaya tambahan ke seluruh blok, seperti mengubah ukuran font:
### Halo Dunia ``` javascript console.log('Halo dunia'); ```{style="ukuran font: 36pt"}
Tabel didukung melalui sintaks GFM.
Catatan: Menyertakan tabel dan elemen blok lainnya pada slide yang sama dapat memberikan hasil yang buruk jika elemen tumpang tindih. Hindari atau sesuaikan tata letak secara manual setelah membuat slide.
Berikut ini menghasilkan tabel 2x5 pada slide.
### Hewan peliharaan terpopuler di Amerika Serikat Hewan | Nomor -------|-------- Ikan | 142 juta Kucing | 88 juta Anjing | 75 juta Burung | 16 juta
Gambar yang merujuk pada jalur lokal diunggah sementara dan dihosting ke file.io. File.io adalah layanan penyajian file sementara yang menghasilkan URL acak berumur pendek ke file yang diunggah dan menghapus konten segera setelah digunakan.
Karena gambar lokal diunggah ke pihak ketiga, diperlukan keikutsertaan yang jelas untuk menggunakan fitur ini. Sertakan opsi --use-fileio
untuk ikut serta dalam mengunggah gambar. Hal ini berlaku untuk gambar berbasis file serta konten yang diraster secara otomatis seperti ekspresi matematika dan SVG.
Slide juga dapat menyertakan gambar yang dihasilkan, menggunakan blok berpagar $$$
untuk datanya. Gambar yang dihasilkan saat ini didukung adalah ekspresi matematika (TeX dan MathML) serta SVG. Gambar raster diperlakukan seperti gambar lokal yang memerlukan keikutsertaan untuk mengunggah gambar ke layanan pihak ketiga melalui opsi --use-fileio
.
Menggunakan TeX:
# Bagaimana dengan matematika? $$$ matematika cos (2theta) = cos^2 theta - sin^2 theta $$$
SVG
# Atau SVG? $$$ svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"> <pertahanan> <jalur 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"> <gunakan xlink:href="#a" overflow="terlihat"/> </clipPath> <jalur clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/> <jalur clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/> <jalur clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/> </svg> $$$
Seperti gambar lokal, gambar yang dihasilkan untuk sementara disajikan melalui file.io.
Permintaan tarik untuk generator gambar lainnya (misalnya putri duyung, chartjs, dll.) dipersilakan!
Anda juga dapat menyalurkan penurunan harga ke alat dengan menghilangkan argumen nama file.
Dengan pengecualian /bin/md2gslides.js
, TypeScript digunakan secara keseluruhan dan dikompilasi dengan Babel. Mocha dan Chai digunakan untuk pengujian.
Sebelumnya, pastikan Anda memiliki semua dependensi:
npm install
Untuk mengkompilasi:
npm run compile
Untuk menjalankan pengujian unit:
npm run test
Untuk pengujian lint/format:
npm run lint
Lihat KONTRIBUSI untuk persyaratan tambahan.
Perpustakaan ini dilisensikan di bawah Apache 2.0. Teks lisensi lengkap tersedia di LISENSI.