Panahon na Para Paunlarin ang Kakayanan mo sa Markdown! (It's Time to Step Up Your Markdown Skills! ) [A Tutorial Just for YOU in Filipino!!]

deveerei (68)in #tutorial • 7 years ago

_{Image Source}

Mayron nang iilang mga gabay ukol sa Markdown dito sa Steemit (at sa iba pang mga lugar sa web) na nakatutulong ng higit sa mga tao. Pero bakit nagpopost pa din ako ng isa? Ganito, alam naman nating aktibo lamang ang isang post sa Steemit sa loob ng 7 araw at and paghahanap ng mga post dito gamit ang Search ay medyo mahirap gamitin. Isa pa, hindi lahat ng tao ay natatandaan kung san nila nahanap ang gabay na nakita (o gumagamit ng bookmark) at hindi lahat ng tao ay pare-pareho ng sinusundang mga blog o nagreresteem ng parehong mga post. Medyo mahirap ding maghukay ng mga post sa blog ng isang Steemian.

Ang naging basehan ko ng gabay na ito ay kung paano ako gumagawa ng pansariling mga post habang gamit ang 2 pinagkunan ko ring mga gabay galing sa Streemian habang gamit ko ang pagi-schedule nila ng post (nilalayon ko ring gumawa ng post ukol sa paggamit nun na may pagsasalin sa Filipino):

Pinapaalala, na ang gabay na ito ay iikot lamang sa mga ginagamit kong mga codes.

Simulan natin sa Headers!

Ang pagbibigay-diin sa ilang salita ay importante upang gawin kaaya-aya o kaakit-akit ang isang sinulat ng blog. Bakit? Ang pagbabasa ng isang bagay na gumagamit lamang ng iisang itsura ng mga letra ay mahihirapang iparating sa mga mambabasa kung aling salita ang bibigyan nila ng higit na importansya kaysa sa iba. Maari nilang masabi "Tungkol saan kaya tong pangungusap na ito? Masyado namang mahaba, hindi naman yata importante, hindi ko na lang babasahin'.

Ang mga Header ay nagmimistulang pagbati bago ka magsalita o magbigay ng talumpati. Isipin mo na lamang kung may isang di kilalang tao ang lalakad papunta sa harap ng isang klase at bigla na lang nagsimulang magturo - magdudulot ito ng pagkalito. Siguro yung iba maiisip na sya yung guro agad-agad, pero may ibang tao na kukuwestiyonin pa rin kung sino siya - baka nagpapanggap lang (Katulad ng kuha sa YouTube). Panoorin:

Ngayon, isipin mo na may isang guro na pumasok at tumayo sa tapat ng klase at nagpakilala "Ako nga pala ang inyong magiging guro". Mas magiging madali na para sa lahat, di ba?

Ang paggamit ng Header sa Markdown ay madali lamang. May 6 na sukat ng header, may bilang mula 1 hanggang 6, kung saan ang 1 ang pinakamalaki:

# Pwede Mong <h1>
## Idagdag Ang <h2>
### Mga Napili<h3>
#### Mong Salita <h4>
##### Sa Header <h5>
###### Gaya Nito <h6>

Siguraduhin lamang na may patlang pagkatapos ng mga # (hashes) at bago ang <h+#> (pansarang header tag).

Kung nais mong ilagay sa gitna ang header gawin lamang ito:

# <center> Your header goes here! </center> <h1>

Inuulit ko, siguraduhing tama ang paglalagay ng patlang dahil kung hindi ay masisira ang buong code.

Mga Linya at Paghahati

Sa markdown, ang simpleng pagpindot ng "Enter" upang pumunta sa susunod na linya ay gagana sa lahat ng oras ngunit kung kinakailangan mo ng dagdag na puwang sa gitna ng iyong mga linya ay pwedeng gumamit ng break code:

<br>

O kaya naman kung nais mong maglagay ng espasyo sa gitna ng dalawang paksa or parte ng iyong blog, pwede kang magdagdag ng pahalang na guhit gamit ito:

***

Nakatutulong ito sa pagsasaayos ng iyong sulatin at paghihiwahiwalay ng mga ideya sa iyong naisulat. Hindi natin gusto ng magulo at makalat na post - mainam na ihiwalay ang dalawang bagay na magkaiba ng tinatalakay upang maiparating ng maayos ang mensahe sa mag nagbabasa.

Itsura ng Letra (Style)!

Ang pagbabago ng itsura o estilo ng mga letra o pagleletra ay nagbibigay-diin din sa mga salita, dito nasasama ang paggamit ng mas makakapal na sulat o kaya ay nakatagilid o italicized, gayun na rin ang iba pang estilo at kombinasyon ng mga nasabing estilo:

**Maglagay ng dalawang asterisk o tala sa bawat dulo upang pakapalin ang sulat.**
*Ang paglalagay ng tag-isang astetisk naman ay gagawing italicized ang napagitnaan nito.*
*_Pwede ka ring gumamit ng pinagsamang asterisk at underscore/salungguhit gaya nito._*
~~Pwede mo ring guhitan sa gitna ang sulat gamit ang 2 tildes sa magkabilang dulo ng sulatin.~~

Mga Listahan and Blockquotes

Ito ay nakatutulong ng malaki kung nagbibigay ka ng mga hakbang o naglilista ng mga bagay-bagay, gayon na rin kapag may sinabi kang mula sa ibang tao, website, o di kaya'y sarili (pero nailathala na sa ibang lugar). Upang maipaliwanag kung paano ito nagagamit, inilagay ko ang eksaktong gabay galing sa Markdown Cheatsheets.

1. First ordered list item
2. Another item
??* Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
??1. Ordered sub-list
4. And another item.

???You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

???To have a line break without a paragraph, you will need to use two trailing spaces.??
???Note that this line is separate, but within the same paragraph.??
???(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses

Ang panuto sa itaas ay nagmula sa Markdown Cheatsheets.

Heto naman ang ginagamit ko sa paggawa ng mga listahan:

- Pwede kang maglagay ng gitling
- O haypen
- Kung anuman ang tawag mo dito

Yan lang ang gamit ko kapag gumagawa ako ng listahan, hindi masyadong maraming arte pero maraming gamit. Heto naman ang paggamit ng blockquotes:

> Kailangan mo lang ng *arrow* na nakaturo sa kanan.

> Pwede ka ring gumamit ng *blockquotes* nang tuluy-tuloy parang ganito.
> 
> Maglalagay ka lamang ng *arrow* sa blankong pagitang ng dalawang talata.

>> Meron ding tinatawag ng *double blockquote*.

Hyperlink Naman!

May iba't ibang paraan ng paglalagay ng link sa mga naisulat na blog. May mga paraan na mas kaaya-aya kaysa sa iba. Minsan pwede mo lang ilagay ang URL sa sulat at gagana na iyon, pero alam naman natin na hindi maganda tignan ang mga link dahil mahaba. Pwede namang maglagay ng iilang salitang pwedeng lagyan ng link. O kaya naman kung nais mo pang mapaganda, pwede ring lagyan ng litrato.

https://steemit.com/@deveerei - Magiging *hyperlink* ng kusa ang isang buong *URL*.
[https://steemit.com/@deveerei] - Kung hindi man maging kusang *clickable* ang isang *link* pwede kang magdagdag ng mga parisukat na *bracket* sa magkabilang-dulo ng *link* upang ito'y gumana.
[Deveerei's Steemit](https://steemit.com/@deveerei) - O kaya ay maglagay ng mga salitang lalagyan mo ng *link*.
[https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png](https://steemit.com/@deveerei) - Pupwede ka ring gumamit ng litrato na lalagyan mo ng link (ang litrato sa itaas ay peke lamang).
[<img src="https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png">](https://steemit.com/@deveerei) - Kung ayaw mang gumana ng unang *code*, pwede mo itong gawin (base sa *HTML* - mas gusto ko itong  gamitin).

Paglalagay ng Litrato at Pag-aayos ng Posisyon Nito

Ang mga litrato ang pinakanagbibigay buhay sa isang blog entry - ang lahat ay nagiging mas interesante dahil dito. Ngunit kung palpak naman ang pagkakaayos mo ng mga litrato ay hindi na ito maganda pang tingnan. Kaya dapat sundin mo ang mga ito:

Itsura ng Litrato - Ang itsura ng litrato ay may sobrang laking impluwensiya sa paghikayat ng mga mambabasa, lalo na ang unang litrato sa iyong blog dahil ito ang lalabas sa pang-unang pahina ng Steemit. Magmimistulang itong pinakapambalita tulad ng sa dyaryo.
Posisyon ng Litrato - Pwede silang ilagay sa gitna o di kaya ay ilagay sa pinakakanan o pinakakaliwa ng iyong blog entry o di kaya'y hayaan lang sa kaliwa (default walang codes).
Laki ng mga Litrato - Ang pagpili ng laki ng litratong gagamit ay mahirap matutunan. Ang Steemit ay maaaring makita sa mobile or kaya sa desktop at ang dalawang ito ay iba ang itsura sa kauuan (mayron ding mangilan-ilang mga apps na halos iba rin ang itsura sa Steeemit). Lagi mong titignan kung tama ba para sa blog mo ang laki ng litratng gagamitin at kung magiging maayos ang pagkakaiba-iba ng sukat nito sa mobile/desktop.

Paano nga ba maglagay ng mga litrato sa iyong blog post? (Paunawa: ang gamit kong URL ng litrato ay peke lamang upang hindi ito gumana sa post na ito, pwede mong gamitin ang naturang codes at magdagdag ng gumaganang litrato sa pamamagitan ng paggawa ng sariling mong post). Gawin mo ito:

https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png - Ang simpleng paglalagay ng *URL* ng litrato ay gagana na agad.
![Image Name](https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png) - Pwede ka ring maglagay ng pangalan sa litratong gagamitin sa pamamaginatan ng pagkulong ng pangalan sa pagitan ng parisukat na mga *bracket* at and *URL* naman ng litrato ay nasa loob ng mga *parenthesis*.
[https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png](https://steemit.com/@deveerei) - Pwede ka ring maglagay ng *link* patunong sa ibang lugar para sa litratong ginamit mo, gaya ng nasaad sa paksa kanina (Tignan lang sa itaas).

Maaari mo ring palitang ang posisyon ng iyong litrato sa pamamagitan ng mga ito:

<center>https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png</center> 

Subukan mong maglagay ng *codes* na pang-*center* sa magkabilang dulo ng *URL* ng litrato mo.

<div class="pull-left">
https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png
</div>

<div class="pull-right">
https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png
</div>

O kaya naman kung nais mong isingit ang litrato sa loob ng mga salitang at talata pwede mong gamitin ang mga *code* sa itaas. Kung hindi man sila gagana dagdagan na lang ng espasyo pagkatapos ng pambungad na *code* at bago ang pansarang *code*.

Kung gusto mo mang nasa dulong kaliwa o kanan ang litrato pero ayaw mong mapapaligiran ito ng mga salita/talaga, magdagdag lamang ng *break* bago o pagkatapos ng pambungad/pansarang *code*.

Mga Video

Ang paglalagay ng mga video sa isang post ayaw pawang madali lamang, ilalagay mo lang ng diretso ang URL galing sa YouTube o di kaya ay gumamit ng embed codes. And embed codes ang gagagamitin sa halos lahat ng website, ang diretsong URL ay maaari lamang gumana kung mula sa YouTube and video. Ang DTube ay di ko pa nasusubukan pero ang nalaman ko ay litrato lamang ang ipapakita nila sa isang post kasama ang link papuntang DTube.

Halimbawa ng diretsong *URL* galing sa YouTube:
http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE

Halimbawa ng *embed code* galing sa YouTube:
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Mula sa: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

Mga Kahon ng Code at Pagtatala(Tables)

Ang mga kahon ng code ay madali lamang gamitin at may iba't ibang maaaring paggamitan:

Paglalagay ng mga markdown o html codes na hindi pinapagana sa blog.
Pagkakamit ng iba't ibang itsura ng iyong post o sa ibang mga parte ng iyong post.
Maaaring magamit sa paghihiwalay o pagsasama-sama ng mga konsepto or paksa.

Maglagay lamang ng *3 back ticks*: ``` bago at pagkatapos ng mga salitang nais ikulong sa kahon.

O kaya ay gumamit ng <code> na pambungad at </code> na pansara.

Ang mga sumusunod na panuto para sa pagtatala ay galing sa Markdown Cheatsheets (hindi na isinalin sa Filipino):

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the 
raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

_{Image Source}

Ang mga ginamit na litrato ay galing sa web - ang mga pinagkuhanan ay nakalagay na rin. Kinalulugod kong makita ang inyong mga mungkahi at suhestiyon sa paksang ito, kung maaari lamang ay mag-iwan ng kumento sa ibaba upang makapagsimula tayo ng mabungang diskusyon tungkol sa paksa.

Click here to read the English version | Pindutin lamang ito upang basahin ang bersyon sa Ingles.