Membuat Markdown Presentasi Online dengan GITPITCH

Apa itu GitPitch ?
GitPitch adalah layanan presentasi markdown online di Git, Gitlab dan Bitbucket. Kita dapat menggunakannya untuk mempromosikan, atau menyajikan apa pun dengan menggunakan alat penulisan yang sudah kita kenal - Markdown.

Layanan ini memperkenalkan konvensi baru untuk pengguna Git, yang disebut PITCHME.md. GitPitch mengubah file markdown PITCHME.md yang ada dalam repo publik atau pribadi menjadi tayangan slide interaktif dan offline.

Markdown → Git → Slideshow

Membuat Repo di Git

Cara membuat Repo Git bisa baca disini Belajar Git on Github

Contoh kita akan membuat repo dengan nama my-presentasi

Membuat file README.md ( Etika di Git ).

README.md berfungsi untuk menjelaskan ke pembaca, apa yang sedang kita buat.

Membuat file PITCHME.md

File PITCHME.md adalah file yang berisi isi presentasi, dimana yang ditulis dengan Markdown.

Contoh Markdown di PITCHME.md

##### Pengantar Praktis Markdown Presentasi Online

---
@title[PITCHME.md]

#### GitPitch mengubah <span class="gold">PITCHME.md</span> menjadi
#### interactive online and offline slideshows.
<br>
<span class="aside">Just like this one...</span>
---
#### Tidak lagi <span class="gray">Menggunakan Keynote</span>.
#### Tidak lagi <span class="gray">Menggunakan Powerpoint</span>.
<br>
#### Menulis dengan <span class="gold">Markdown</span>.
#### Kemudian  <span class="gold">Git-Commit di Github</span>.
---

Silahkan untuk mecoba akses presentasi di

https://gitpitch.com/user-github/nama-repo

atau bisa juga disini Contoh Presentasi Sederhana

Membuat file PITCHME.yaml
Contoh file PITCHME.yaml

theme : night
theme-override : assets/css/PITCHME.css
logo : assets/images/anak-desa.jpg
highlight : atom-one-light
transition : concave
published : true
footnote : "Contoh Presentasi Online"
remote-control: true
slide-number : true
background : /assets/images/wallpaper.jpg
background-size: cover
remote-control: true
slide-number : true
mousewheel : true

Membuat Folder assest/css dan assets/images via terminal di Ubuntu.
Clone Repo Github

git clone https://github.com/user-github/nama-repo.git

Membuat folder assets

cd nama-repo (hasil clone diatas)
mkdir -p assets/css
mkdir -p assets/images

Membuat file PITCHME.css

nano assets/css/PITCHME.css

contoh PITCHME.css

/*
* GitPitch Custom CSS Styling
*
* For details, visit Wiki:
* https://github.com/gitpitch/gitpitch/wiki/Slideshow-Custom-CSS
*/

.reveal p span.slide-title {
padding: 4px 15px;
border-radius: 15px;
color: #eee !important;
font-weight: normal !important;
line-height: 1.2 !important;
letter-spacing: -0.03em !important;
font-family: "Montserrat", Impact, sans-serif !important;
}

.reveal .slides section .code-presenting-annotation {
color: white !important;
background: #1f1c18;
padding: 1px 15px;
border-radius: 15px;
opacity: 0.75 !important;
font-size: 50% !important;
}

.reveal pre {
width: 100%;
box-shadow : none;
}

.reveal pre code {
font-size: 1.2em;
line-height: 1.2;
border-radius: 10px;
}

.reveal .slides section .code-presenting-annotation {
color: gray;
}

#gp-logo img {
max-height: 1.5em;
max-width: none;
}

.shoutout {
color: #e49436;
font-size: 1.5em !important;
}

Menambahkan file gambar background presentasi kita di foleder assets/images

Setelah semua selesai, kita push ulang repo lokal yang baru kita buat ke repo github, caranya bisa dilihat disini Belajar Git on Github

Silahkan cek lagi Gitpitch kita di https://gitpitch.com/user-github/nama-repo
apakah sudah berubah ?

Selamat Mencoba, semoga berhasil

Lihat juga Presentasi Online Gitpitch

Blog Bai Rahmat

Membuat Markdown Presentasi Online dengan GITPITCH

0 Response to "Membuat Markdown Presentasi Online dengan GITPITCH"

Post a Comment