มาร์กดาวน์ (Markdown language)

ปรับปรุง : 2563-08-15 (auto ad sense)

Markdown | HTML | Github/Markdown | Github.io | คำสำคัญ (Key)

การเขียน Markdown

การเขียนเอกสารด้วยภาษา markdown เป็นอีกทางเลือกหนึ่งในการเขียนเอกสารอย่างมีรูปแบบที่ง่าย เดิมนั้นเราใช้ภาษา HTML เพื่อสร้างเอกสารข้อมูลที่มีตัวอักษรแบบหลายมิติที่ได้รับความนิยม แล้วพบว่า มีการเขียนเอกสารโดยใช้ชื่อแฟ้มว่า readme.md ใน github.com หรือ github.io ซึ่งมีรูปแบบ markdown รวมถึงการได้รับการสนับสนุนจาก editor ที่สนับสนุนให้การเขียนเอกสารแบบหลายมิติทำได้ง่ายขึ้น

markdownguide.org
Fork : Marp-core

มาร์กดาวน์ (Markdown) คือ รูปแบบภาษามาร์กอัปสำหรับแก้ไขหน้าเว็บ คิดค้นขึ้นโดย จอห์น กรูเบอร์ และ อารอน สวาร์ตซ เป็นภาษาที่อนุญาตให้ผู้เขียนใช้รูปแบบการจัดเนื้อหาที่ง่ายต่อการอ่าน และง่ายต่อการเขียน จากนั้นตัวภาษาจะแปลงคำสั่งเหล่านี้เป็นภาษาเอชทีเอ็มแอล (HTML) ภาษามาร์คดาวน์ได้รับรูปแบบส่วนใหญ่มาจากรูปแบบการจัดการเนื้อหาที่ใช้ในอีเมลทั่วไป [wiki]

การเตรียม Powerpoint ด้วย Markdown

วิธีการหนึ่งในการเตรียมเอกสาร Powerpoint จากข้อมูลแบบ Plain Text คือ การใช้ภาษา Markdown ซึ่งเป็นภาษาสำหรับเตรียมข้อมูลไปเป็นรูปแบบภาษามาร์กอัปหรือหน้าเว็บที่ง่ายต่อการเขียน และแก้ไข แล้วใช้โปรแกรมช่วยแปลง เช่น Pandoc หรือ Marp แปลงเป็น Powerpoint ก็จะได้แฟ้มสำหรับนำเสนอ ที่นำไปปรับแก้ หรือเปลี่ยน Theme.thmx ได้โดยง่าย ซึ่งการใช้งาน pandoc นั้น ก็เพียงแต่ unzip แล้วใช้แฟ้ม pandoc.exe ได้ทันที

#เล่าสู่กันฟัง 63-068 เล่าเรื่อง markdown ใน github.com

เนื่องจาก markdown ได้รับการสนับสนุนใน github.com จึงสร้าง repository ชื่อ markdown ไว้เก็บผลงาน slide และแบ่งปัน ซึ่งมีเนื้อหาหน่วยการเรียนรู้ และหัวข้อ ที่จะนำไปแปลงผ่านโปรแกรม pandoc เพื่อจัดทำเป็น powerpoint ซึ่งสร้าง repository เป็น public และ check box ให้ Initialize this repository with a README ผลลัพธ์คือข้อมูลในช่อง Description ถูกนำไปใส่ในแฟ้ม README.md และกลายเป็นข้อมูลหน้าแรกของ Repository จากนั้นเข้า Settings จาก MenuBar แล้ว Scroll down ลงมาหากคำว่า GitHub Pages เลือก Source เป็น master branch แล้วเลือก Theme เป็น Architect จากนั้นระบบจะพาไปสร้างแฟ้ม README.md ซึ่งทับแฟ้มเดิมที่มี description แล้วกด commit changes ผล คือ พบ description ของ repository ปรากฎที่ด้านบน เมื่อเข้าสู่ repository และพบรายการ code ทั้งหมดด้านล่างลงมา ส่วนแฟ้ม README.md นั้น ได้ถูกแทนที่ด้วยคำแนะนำในการเขียน Markdown บน Github Page ไปแล้ว และมีแฟ้ม _config.yml ที่มีข้อความเพียงบรรทัดเดียว คือ theme: jekyll-theme-architect ซึ่งกำหนด theme สำหรับแสดงผลใน github.io เมื่อเปิด thaiall.github.io/markdown พบว่ารูปแบบเป็นไปตาม theme ชื่อ architect จากนั้นอัพโหลดแฟ้ม code ชื่อ hci_all.md และ tec_all.md ซึ่งต้องเปิดใน github.com จะมีการแสดงผลที่ผ่านการ convert เป็น html แล้ว แต่ถ้าเปิดผ่าน github.com จะยังเห็นเป็นข้อมูลแบบ markdown อยู่ เช่น github.com/../hci_all.md

#เล่าสู่กันฟัง 63-056 เขียน markdown เป็น pptx

จากการอ่านบล็อก อ.สมเกียรติ ปุ๋ยสูงเนิน ใน somkiat.cc เรื่อง “มาทำ slide และ live code ใน VS Code ดีกว่า” พบว่า อาจารย์ใช้ markdown ในมุมมองใหม่ได้อย่างน่าสนใจ ผมจำได้ว่ารูปแบบ Markdown เป็นภาษาที่ใช้เล่าเรื่องผ่านแฟ้ม readme.md ใน github.com สำหรับนักเขียนที่ไม่ต้องการใช้บริการ github.io ที่ใช้ html ก็เลือกเขียนด้วย markdown ใน README.md เพื่อเล่าเรื่องผลงานของตนเกี่ยวกับ repository นั้นได้

ภาษา markdown เขียนง่ายกว่าภาษา html มาก เพื่อสร้างข้อความหลายมิติ (HyperText) และใน Blog ของอ.สมเกียรติ ปุ๋ยสูงเนิน เล่าเรื่องการเขียนใน vs code แล้วส่งออกเป็น slide บน powerpoint หรือ pdf ประกอบกับช่วงนี้ (มี.ค.63) มีไวรัส covid-19 ระบาดหนัก เริ่มเปลี่ยนการศึกษาจาก #ระบบใส่ใจ คือ สอนกันแบบถึงเนื้อถึงตัว มาเป็น #ระบบใส่แมส คือ มี Social distancing ใส่เครื่องป้องกัน ทิ้งระยะห่างป้องกันติดเชื้อ สอนออนไลน์ สอนออกไปแล้ว ผู้เรียนสามารถเข้าเรียนในเวลาที่สะดวก เรียนได้หลายครั้ง และมีเรื่องให้เลือกเรียนจำนวนมาก แบบ MOOC ถ้าคุณครูเปิดให้เรียนซ้ำ ไม่จำกัดการเข้าถึง ก็จะพัฒนาผู้เรียนได้กว้างไกล แบบ Mass Media เมื่อวางแผนการสอน (Lesson Plan) แล้วเริ่มสอน การสอนแบบเห็นหน้าครูเป็นชั่วโมง นั่งพูด ยืนพูด แบบ TED คงใช้ไม่ได้กับทุกวิชา ดังนั้น Powerpoint กับ Camtasia จึงเป็นตัวเลือกที่น่าสนใจ ในการจัดทำสื่อการสอน การเปิดให้ส่งงาน ผ่านกลุ่มเฟสบุ๊ค และทำข้อสอบผ่าน Google Form ถูกพูดถึงกันมาก กลับมาที่ภาษา Markdown พบว่าเป็นภาษาที่เขียนง่าย นำหัวข้อมาเรียงแยกบรรทัดใน Word หรือ Notepad แล้วใช้ marp แปลงเป็น pdf, png, pptx หรือ html ได้แฟ้ม slide สำหรับเตรียมบรรยายเป็นเวลาหลายชั่วโมง โดยมี Slide เสมือน Navigation ช่วยนำทาง จากการทดสอบใช้ marp-cli บน command line พิมพ์คำสั่งบรรทัดเดียว จะช่วยแปลงแฟ้ม README.md เป็น myslide.pptx พร้อมสอนได้ทันที แก้ไขก็ทำได้ ด้วยการกลับไปแก้ไขข้อความใน README.md แล้ว convert เป็น myslide.pptx อีกครั้ง สามารถจัดการ tempate ผ่านแฟ้ม gaia.scss ได้ ผู้พัฒนา marp ระบุว่าโปรแกรมเป็น License ของ mit (Massachusetts Institute of Technology) ทำให้น่าสนใจยิ่งขึ้น

ตัวอย่างนี้ ผิด 3 จุดที่ผิดปกติ

https://github.com/thaiall/tech100/blob/master/test1.md
## Welcome to test1
### ** hello **

![Image](https://github.com/thaiall/tech100/blob/master/training61.jpg)

![Image](https://thaiall.github.io/tech100/training61.jpg)

[**##facebook**](https://www.facebook.com/thaiall)

[**##training61.htm**](https://thaiall.github.io/tech100/training61.htm)

**ชวนมอง 3 จุดที่ผิดปกติ**
- ### คู่กับ ** คุณสมบัติตัวหนาจะไม่ทำงาน
- มี 2 ลิงค์ ที่พบ ## ภายใต้ [ ] คุณสมบัติ header จะไม่ทำงาน
- อ้างอิงภาพนอก github.com ต้องใช้ github.io

marp-cli

marp-cli-v0.17.3-win.zip

1. download marp-cli-v0.17.3-win.zip
https://github.com/marp-team/marp-cli/releases
https://github.com/marp-team/marp-cli
2. unzip marp-cli-v0.17.3-win.zip
3. DOS> marp -?
4. DOS> notepad test1.md แล้ว File-type = utf-8
5. DOS> marp test1.md 
[  INFO ] Converting 1 markdown...
[  INFO ] test1.md => test1.html
DOS> marp test1.md -o test1.htm
DOS> marp test1.md -o test1.pdf หรือ test1.pptx
DOS> marp --images jpeg test1.md
DOS> marp --image png test1.md
DOS> marp test1.md -o output.png
DOS> marp --allow-local-files --theme burin.scss test1.md -o test1.pptx

ตัวอย่าง test1.md

rem file name : marpdo.bat
@echo off
rem DOS> marpdo test1
if  exist  %1.md  goto  fileexists
echo file not found : %1.md 
goto end
:fileexists
@echo on
marp --allow-local-files --theme burin.scss %1.md 
marp --allow-local-files --theme burin.scss %1.md -o %1.pdf
marp --allow-local-files --theme burin.scss %1.md -o %1.pptx
%1.pptx
:end
@echo off
echo see you again

<!-- theme: gaia -->
<!-- size: 16:9 -->
<!-- paginate: true -->
<!-- footer: /markdown -->
<!-- backgroundColor: white -->
 
# Welcome to Test1
 
	https://www.thaiall.com/markup
 	https://marpit.marp.app/image-syntax
	https://marpit.marp.app/directives
	https://marpit.marp.app/theme-css
	https://github.com/marp-team/marp-core/tree/master/themes
 
---
<!-- _backgroundColor: aqua -->
<!-- _color: blue -->
 
# หัวข้อ
 
- เรื่องที่ 1 *italic*
- เรื่องที่ 2 **bold**
- เรื่องที่ 3 ***bold และ italic***

---
<!-- _class: title -->

# Markdown Language
## Programming
### thaiall.com/markdown
 
---
 
# เรื่องที่ 1
 
- เรื่องที่ 1.1
 
> รายละเอียด blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes
 
- เรื่องที่ 1.2
 
> 1. รายละเอียด
> 2. รายละเอียด
 
---
 
# เรื่องที่ 2
 
1. รายละเอียด
2. รายละเอียด
3. รายละเอียด
4. รายละเอียด
5. รายละเอียด
6. รายละเอียด
7. รายละเอียด
8. รายละเอียด
9. รายละเอียด
 
---
<!-- backgroundColor: #ddddff -->
# set backgroundcolor = #ddddff
 
	Hello world!
 
---
![bg](http://www.thaiall.com/thai/bg_black.jpg)
 
# Welcome to TECH 100
 
<style>
img[alt~="center"] {
  display: block;
  margin: 0 auto;
}
</style>
 
![w:400 h:400 center](https://thaiall.github.io/tech100/training61.jpg)
 
---
 
# Source code
 
```
<html><head> 
<title>Welcome</title>
</head>
<body>
<b><u>hello<u> <br/>
<i>world</i>!</b>
</body>
</html>
```

---
![bg left:20%](http://www.thaiall.com/thai/bg_black.jpg)
 
# Guides
 
- [facebook](https://www.facebook.com/thaiall)
- [training61.htm](https://thaiall.github.io/tech100/training61.htm)
 
---
![bg right:50%](http://www.thaiall.com/html/_toon.jpg)
 
# Thank you

chrome extension สำหรับ markdown

- [phpjs markdown](http://www.thaiall.com/md/phpjs_all.md)
- [Markdown Viewer for chrome](https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk/related?hl=en)
```
1. Extension enable : Markdown Viewer
2. Address Bar : Click เลือก Extension : Markdown Viewer
3. Click : ADVANCED OPTIONS
4. Click : ALLOW ACCESS TO FILE:// URLS
5. Enable : Allow access to file URLs
6. Chrome : file:///E:/phpjs_all.md
```

pandoc

marp-cli-v0.17.3-win.zip

<!-- theme: gaia -->
<!-- size: 16:9 -->
<!-- paginate: true -->
<!-- footer: /markdown -->
<!-- backgroundColor: white -->
 
# Welcome to Test2
 
	https://pandoc.org/
	https://www.thaiall.com/markup
	https://github.com/jgm/pandoc/releases/tag/2.9.2.1

---
 
# เรื่องที่ 1
 
- เรื่องที่ 1.1
 
> รายละเอียด blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes blockquotes
 
- เรื่องที่ 1.2
 
> 1. รายละเอียด
> 2. รายละเอียด
 
---
 
# เรื่องที่ 2
 
1. รายละเอียด
2. รายละเอียด
3. รายละเอียด
4. รายละเอียด
5. รายละเอียด
 
---

# Training

![w:400 h:400 center](https://thaiall.github.io/tech100/training61.jpg)
 
---
 
# Source code
 
```
<html>
<head><title>Welcome</title></head>
<body><b>hello world</b>!</b></body>
</html>
```

---

# Thank you
 
- [facebook](https://www.facebook.com/thaiall)
- [training61.htm](https://thaiall.github.io/tech100/training61.htm)

Pandoc 2.9.2.1
Markdown is Lightweight markup formats
1. downoad pandoc-2.9.2.1-windows-x86_64.zip แล้ว unzip
2. DOS> cd pandoc-2.9.2.1
3. DOS> dir test2.md
4. DOS> pandoc test2.md -o test2.pptx
5. DOS> test2.pptx
github.com/../pandoc-2.9.2.1-windows-x86_64.zip
github.com/jgm/../2.9.2.1
pandoc.org
medium.com/@stymied/..-from-markdown
daringfireball.net/../markdown

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com