Cara menggunakan php html to markdown

Jadi Anda telah membuat tema, template, atau aplikasi web yang mengagumkan. Sekarang untuk bagian yang membosankan; dokumentasi. Menulis konten tentu tidak akan bermasalah, kemungkinan besar akan membuat file bantuan yang akan menghabiskan waktu yang berharga. Markdown, sintaks format sederhana dan *benar-benar* sederhana bisa menyelesaikan semua itu untuk Anda.

Tentang Markdown

Dibuat oleh John Gruber, Markdown adalah sintaks format teks biasa yang menjadikan pembuatan elemen HTML dasar menjadi lebih mudah.

Alih-alih menggunakan tag HTML (yang, dikatakan, membutuhkan banyak waktu untuk menulisnya) tugas Markdown adalah menyingkirkan dari proses berpikir Anda, sehingga Anda dapat fokus pada konten. Karena sintaksnya sangat mendasar, mudah untuk menulis dan membaca markdown. Nantinya dalam tutorial ini, kita akan berjalan melalui langkah-langkah membuat dokumentasi tema menggunakan Markdown, jadi Anda akan melihat betapa ringan dan cepatnya!

Mengkonversi Markdown

Begitu Anda berhasil mengatasi penulisan Markdown, Anda memerlukan beberapa jenis aplikasi parsing untuk mengubah Markdown menjadi markup HTML.

Konverter Markdown asli dibuat di Perl, namun sejak saat itu banyak aplikasi (di beberapa platform) telah muncul. Mari kita lihat beberapa pilihan, baik online dan berjalan di sistem Anda sendiri.

Dingus (Online)

Dingus adalah aplikasi web yang dibuat oleh orang yang sama yang telah memperkenalkan Anda Markdown. Cukup copy dan paste kode Markdown Anda dari editor teks (atau masukkan di area teks) dan dengan satu klik tombol, kode HTML Anda (dan juga pratinjau) akan muncul. Tidak ada yang mewah, tapi cara mudah untuk mengubah markdown menjadi HTML.

MarkdownPad (Windows)

MarkdownPad adalah aplikasi Windows yang hebat yang memungkinkan Anda membuat file Markdown dengan mudah (dan gratis!) Ini termasuk fitur-fitur hebat seperti pratinjau HTML instan, format yang mudah dengan pintasan keyboard, kustomisasi CSS, ekspor HTML dan bahkan mode "distraction free".

Mou (OS X)

Mou adalah aplikasi Mac yang bagus dan gratis yang memungkinkan Anda menulis Markdown secara sederhana dan indah. Memiliki fitur hebat seperti styling kustom, pintasan keyboard, HTML langsung, ekspor HTML (dengan styling CSS opsional), ekspor PDF, dukungan pendiktean, dan banyak lagi. Untuk tutorial ini, kita akan menggunakan Mou untuk membuat dokumentasi tema kita.

MarkdownNote (OS X & iOS)

MarkdownNote adalah aplikasi hebat lainnya untuk menulis Markdown, dan aplikasi iOS sangat cocok jika Anda ingin menulis Markdown saat dalam perjalanan. Sama seperti aplikasi lain yang kita bahas, ada beberapa fitur hebat, termasuk pratinjau HTML langsung, pintasan keyboard, dan sinkronisasi Dropbox.

Membuat Dokumentasi Tema

Sejauh ini, kita telah membahas apa itu Markdown dan melihat beberapa alat yang dapat Anda gunakan untuk menuliskan Markdown. Sekarang mari kita membuat beberapa dokumentasi tema untuk tema yang tidak ada, mencakup apa yang biasanya Anda sertakan dalam dokumentasi, sintaks Markdown dan praktik terbaik.

Sintaks Markdown

Selama langkah-langkah berikut kita akan melihat Markdown karena berlaku untuk kebutuhan kita. Untuk melihat lebih dalam pada sintaks Markdown, lihat Markdown: Seluk beluk pada Nettuts+.

Apa yang Harus Disertakan Sebuah File Dokumentasi?

Karena Anda sudah mengetahui seluk beluk dari tema/template/aplikasi web Anda, mungkin agak membosankan untuk membahas dasar-dasarnya. Tujuan dari file dokumentasi adalah untuk melayani sebagai panduan bagi pengguna dan pembeli lainnya. Seringkali, ada instalasi, penyesuaian, dan beberapa tweak yang melibatkan pengguna yang perlu diketahui - dan tugas Anda untuk mendidik mereka. Inilah yang mungkin ingin kita sertakan:

• Informasi
  • Penulis
  • Tanggal Pembuatan
  • Versi
  • Info Kontak.
• Struktur File
  • HTML
  • CSS
  • Javascript
• Struktur File Individu
  • Struktur HTML
  • Struktur CSS
• Gaya Kustom
• File Tweak
  • CSS Tweak
  • Javascript Tweak
• Kompatibilitas Browser
• Changelog

Ingat, dokumentasi harus cukup sederhana bagi siapa saja yang memiliki pengetahuan dasar untuk mengerti, namun juga mencakup cara mengubah file penting. Misalnya, Anda tidak perlu menunjukkan bagaimana mengubah nilai CSS tertentu, namun Anda harus menunjukkan cara mengakses file-file ini.

Langkah 1: Menyiapkan File Markdown

Sekarang saatnya untuk hal-hal menyenangkan! Silakan buka editor Markdown Anda (saya akan menggunakan Mou untuk Mac). Buat header untuk file dokumentasi Anda:

#Theme Documentation

Elemen heading dapat ditulis hanya dengan menambahkan satu sampai enam # di depan konten. Pada contoh di atas, kita menggunakan satu tanda # untuk membuat elemen

***

***

***

Sekarang, mari buat aturan horisontal (

***

***

Langkah 2: Informasi Tema

Bagian penting untuk ditambahkan dalam dokumentasi Anda adalah bagian informasi.

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

Mari kita lihat HTML yang setara dari kode di atas:

<em>Theme Name: </em>Theme<br />
<em>Author: </em>Suhail Dawood<br />
<em>Created: </em>08/08/2012<br />
<em>Version: </em>1.0.1<br />
<hr />
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at <strong>[email protected]</strong> or tweet me <strong>@tutsplus</strong>
<hr />

Hanya dengan melihat dua sumber yang berbeda, Anda bisa langsung melihat Markdown lebih intuitif untuk dipahami dan diciptakan. Alih-alih terus-menerus harus menambahkan

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

Langkah 3: Menambahkan Daftar Isi

Sekarang mari tambahkan daftar konten ke dalam file Markdown kita:

##Table of Contents
1. HTML Structure
2. CSS Files
3. Javascript Files
4. PSD Files
5. Theme Styles
6. Tweaking Javascript
7. Tweaking CSS
8. Browser Compatibility
***

Jika kita membuat ini di HTML, berikut adalah bagaimana tampilannya:

<h2>Table of Contents</h2>
<ol>
   <li>HTML Structure</li>
   <li>CSS Files</li>
   <li>Javascript Files</li>
   <li>PSD Files</li>
   <li>Theme Styles</li>
   <li>Tweaking Javascript</li>
   <li>Tweaking CSS</li>
   <li>Browser Compatibility</li>
</ol>
<hr />

Alih-alih harus membuat ordered list dan daftar item terpisah, cukup tulis

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

Langkah 4: Struktur HTML

Penting untuk membiarkan pengguna Anda tahu bagaimana file situs diletakkan. Karena kita membuat dokumentasi untuk sebuah tema, kita harus menjelaskan bagaimana kode HTML dari tema terstruktur. Kita bisa menjelaskannya dengan kode berikut:

##1. HTML Structure
The HTML Structure for each page is as follows:

* Meta
* Link to CSS Files
* Header
  * Logo
	* Social Links
* Navigation
* Main Content
	* Content Slider
	* Articles
* Sidebar
	* Search
	* Post Archives
	* Mailing List
* Link to Javascript Files
* Javascript
***

Sederhana. Untuk membuat daftar isi kita, kita menggunakan ordered list. Pada bagian ini, kita menggunakan undordered list bersarang. Untuk membuat unordered list dalam Markdown, cukup tambahkan tanda bintang dan spasi sebelum teks (misalnya

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

Langkah 5: File CSS

Terutama dalam tema, dokumentasi CSS sangat penting. Sebaiknya memperjelas file-file CSS yang berbeda yang disertakan dalam tema, serta deskripsi singkat setiap file:

##2. CSS Files
There are 3 CSS files in this theme:

* main.css
* colors.css
* skeleton.css

#####main.css
This CSS file is the main stylesheet for the theme. It holds all the values for the different elements of theme and the default color scheme.
#####colors.css
This CSS file holds the styling of all the other colors schemes that are included in the theme.
#####skeleton.css
This CSS file allows the theme to be responsive, adapting to different screen sizes. 
***

Pastikan untuk menggunakan judul untuk memisahkan bagian yang berbeda dari file dokumentasi. File dokumentasi yang ditata dengan baik akan menyebabkan lebih sedikit pengguna yang kebingungan!

Langkah 6: File Javascript

Jika tema Anda menyertakan file Javascript, ada baiknya untuk setidaknya menjelaskannya di dokumentasi:

##3. Javascript Files
There are 2 Javascript files in this theme:

* jquery.js
* slider.js

#####jquery.js
This theme uses the jQuery Javascript library.
#####slider.js
The content slider in the theme runs on this Javascript file. There are some settings that can be tweaked, this will be covered in the 'Tweaking Javascript' section.
***

Pastikan Anda bukan hanya mencantumkan, namun menjelaskan file-file tersebut dalam tema Anda. Ini akan mempermudah pengguna memahami isi setiap file, dan memutuskan apakah mereka ingin mengacaukannya atau tidak.

Langkah 7: File PSD

Meskipun ada bagian terpisah untuk template PSD di ThemeForest, banyak penulis memutuskan untuk menyertakan file PSD dengan template kode mereka untuk memungkinkan kebebasan pengguna membuat perubahan desain. Jika tema Anda menyertakan file PSD, mungkin ide bagus untuk menggambarkannya sama seperti yang telah kami lakukan dengan semua file lainnya:

##4. PSD Files
Included in this theme is 5 different PSD files:

1. homepage.psd
2. about.psd
3. portfolio.psd
4. blog.psd
5. contact.psd

These PSD files will be handy if you would like to make any changes to the theme's design. You can also create a new page layout using the existing PSD files as a base to work with.
***

Praktik terbaik untuk memberi nama file PSD Anda dengan jelas (mis., full-width-page.psd) dibandingkan dengan nama yang tidak jelas (misalnya template-003.psd). Dengan cara ini, pengguna bisa menemukan apa yang mereka butuhkan tanpa harus membuka setiap file.

Langkah 8: Gaya Tema

Kemungkinan besar, tema Anda akan mencakup pilihan skema warna yang dapat dipilih pengguna Anda. Jika demikian, pastikan bahwa Anda menjelaskan bagaimana hal ini dilakukan:

***

Pada contoh di atas, saya telah mencantumkan skema warna yang berbeda yang disertakan dalam tema dan menunjukkan bagaimana cara mengubahnya.

Langkah 9: Javascript Tweak

Jika kode Anda menyertakan file Javascript yang memiliki parameter penyesuaian (misalnya skrip slider), sebaiknya Anda menunjukkan pengguna cara memanipulasi nilai-nilai tersebut:

***

Kode di atas menguraikan bagaimana pengguna dapat mengubah nilai-nilai. Untuk memberi gaya kode, bungkus teks yang relevan di dalam tag

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

Langkah 10: CSS Tweak

File CSS sangat sering disesuaikan oleh pengguna. Mereka pasti akan menganggapnya bermanfaat jika Anda menambahkan sebuah bagian ke dokumentasi yang menunjukkan bagaimana mengakses file CSS sehingga mereka dapat mengeditnya.

***

Sekarang pengguna memiliki akses ke file CSS, mereka dapat membuat perubahan yang mereka inginkan.

Langkah 11: Kompatibilitas Browser

Sebaiknya beri tahu pengguna tentang apa pun masalah kompatibilitas browser:

***

Jika Anda ingin memperluas bagian ini, Anda bisa menjelaskan fitur tema apa yang terdampak di browser tertentu.

Langkah 12: Menyelesaikan Dokumentasi

Untuk melengkapi dokumentasi kita, kita akan menambahkan sebuah bagian untuk memberi tahu pengguna cara menghubungi kita jika mereka memiliki pertanyaan lebih lanjut. Mari tambahkan sedikit kode ini:

***

Untuk menghubungkan e-mail dengan menggunakan markdown, cukup bungkus alamat e-mail Anda antara chevron (misalnya

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

Menambahkan link di Mardown cukup sederhana.

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

*Theme Name:* Theme
*Author:* Suhail Dawood
*Created:* 08/08/2012
*Version:* 1.0.1
***
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at **[email protected]** or tweet me **@tutsplus**
***

<em>Theme Name: </em>Theme<br />
<em>Author: </em>Suhail Dawood<br />
<em>Created: </em>08/08/2012<br />
<em>Version: </em>1.0.1<br />
<hr />
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at <strong>[email protected]</strong> or tweet me <strong>@tutsplus</strong>
<hr />

<em>Theme Name: </em>Theme<br />
<em>Author: </em>Suhail Dawood<br />
<em>Created: </em>08/08/2012<br />
<em>Version: </em>1.0.1<br />
<hr />
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at <strong>[email protected]</strong> or tweet me <strong>@tutsplus</strong>
<hr />

<em>Theme Name: </em>Theme<br />
<em>Author: </em>Suhail Dawood<br />
<em>Created: </em>08/08/2012<br />
<em>Version: </em>1.0.1<br />
<hr />
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at <strong>[email protected]</strong> or tweet me <strong>@tutsplus</strong>
<hr />

Kode Markdown Akhir

Berikut adalah kode akhir Markdown kita untuk dokumentasi ini:

***

Mengekspor Dokumentasi

Setelah kita selesai membuat file dokumentasi, saatnya mengkonversi Markdown menjadi HTML atau file PDF. Saya akan menggunakan Mou untuk mengekspor dokumentasi saya, namun langkah-langkahnya bersifat umum dan berlaku untuk sebagian besar aplikasi.

Mengekspor ke HTML

Untuk mengekspor dokumentasi Anda ke HTML, cukup pilih File > Export > HTML. Namai file dokumentasi Anda dan centang/hapus centang pada 'Include CSS' tergantung apakah Anda ingin styling yang sama ditampilkan dalam aplikasi untuk diterapkan ke file HTML Anda. Mou tidak akan membuat file CSS yang terpisah, namun menambahkan styling ke file HTML. Mou juga membuat tag yang diperlukan seperti

<em>Theme Name: </em>Theme<br />
<em>Author: </em>Suhail Dawood<br />
<em>Created: </em>08/08/2012<br />
<em>Version: </em>1.0.1<br />
<hr />
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at <strong>[email protected]</strong> or tweet me <strong>@tutsplus</strong>
<hr />

<em>Theme Name: </em>Theme<br />
<em>Author: </em>Suhail Dawood<br />
<em>Created: </em>08/08/2012<br />
<em>Version: </em>1.0.1<br />
<hr />
Thank you for your purchase! If you have any questions about this theme, feel free to e-mail me at <strong>[email protected]</strong> or tweet me <strong>@tutsplus</strong>
<hr />

Mengekspor ke PDF

Jika Anda ingin mengekspor dokumentasi Anda ke PDF, pilih File > Export > PDF. Dalam kasus Mou, semua styling yang ditampilkan dalam pratinjau langsung HTML akan disertakan dalam file PDF.

Dan kita sudah selesai! Dokumentasi yang jelas dan mudah dibaca untuk klien, pelanggan dan kolega. Unduh file sumber untuk tutorial ini dan periksa file .md .html dan .pdf yang dihasilkan.

Ikhtisar Sintaks Markdown

Berikut adalah perbandingan singkat dari sintaks HTML dan Markdown yang kita bahas dalam tutorial ini