DEV Community: MrChoke

GitHub Copilot Custom AutoComplete

MrChoke — Sun, 23 Jul 2023 22:15:11 +0000

การใช้ Github Copilot ช่วยทุ่นแรงในการเขียนโค้ดที่เป็นรูปแบบซ้ำ ๆ เช่นการเตรียมข้อมูล Seed สำหรับ migrate database แค่เราเอาข้อมูลที่แบ่งเป็น fields มาแปะไว้ให้ Copilot เรียนรู้มันก็จะจัดการให้เราแบบรวดเร็ว

Demo จาก YouTube

จากตัวอย่างจำลองการ insert ข้อมูลลง table แบบหลาย ๆ row ซึ่งจะมีรูปแบบที่ซ้ำ ๆ กัน โดยได้นำข้อมูลมาแปะขั่วคราวไว้ใน comment ของ code แล้วก็ให้ Copilot ทำการเติมเต็มให้เท่าที่ลองมาจะทำงานค่อนข้างแม่นมาก และ รวดเร็ว คือแปะปุ๊บมันก็เติมให้เลยแทบไม่มีการให้รอเลย ก็ลองเอาไปเล่นกันดูครับ

Fix: Svelte Devtools on Chrome/Brave

MrChoke — Thu, 28 Jul 2022 14:44:32 +0000

สืบเนื่องมาจาก Official Svelte Devtools ไม่ยอมทำงานบน Chrome และ Brave เลยค้นหาดูพบว่ามันเป็น Bug และทางต้นน้ำก็ไม่มี update มาปีกว่าแล้ว มีคน PR เข้าไปแก้ง่าย ๆ แค่หนึงบรรทัดเลยลองทำตามดูก็กลับมาทำงานได้ ใครประสบปัญหาอยู่ก็ลองทำดูได้ครับ ขั้นตอนดังนี้

Git Clone

git clone https://github.com/sveltejs/svelte-devtools.git

Edit

หลังจากนั้นให้แก้ไข dest/devtools/index.js โดยการลบ / บรรทัดที่ 6 ออก

- '/devtools/panel.html',
+ 'devtools/panel.html',

Install

ให้ลบของเก่าออกแล้วทำการติดตั้งแบบ Load Unpacked

หลังจากนั้นก็จะปรากฎ Extension ดังนี้

Use

หลังจากนั้นก็สามารถใช้งานได้ตามปกติแล้ว

ต้นฉบับ:

https://github.com/sveltejs/svelte-devtools/pull/78

macOS Monterey DNS

MrChoke — Sun, 27 Feb 2022 05:28:22 +0000

เข้าใจเสมอว่าแก้ DNS ของ macOS สามารถแก้ใน /etc/resolv.conf ได้เลย แต่ล่าสุดพบว่ามันไม่ได้ให้ความสำคัญแล้ว ถ้าให้ได้ผลต้องตั้งใน UI ให้เรียบร้อย แต่ถ้ายังอยากใช้ command line เราก็ยังใช้ได้ดังนี้

ตรวจสอบอุปกรณ์

ก่อนที่เราจะตั้งต่าต้องรู้ก่อนว่าปัจจุบันเราต่อ network ผ่านอุปกรณ์ไหน และ มีอุปกรณ์อะไรบ้างในระบบ

networksetup -listallnetworkservices

ผลที่ได้จะประมาณนี้

Ethernet
USB 10/100/1000 LAN
Thunderbolt Bridge
Wi-Fi

เรียกดูค่าปัจจุบัน

ถ้าต่อ WiFi ก็แสดงดังนี้

networksetup -getdnsservers Wi-Fi

หรือ ถ้าใช้สายแลน

networksetup -getdnsservers Ethernet

ผลที่ได้จะประมาณนี้

networksetup -getdnsservers Ethernet
10.222.21.14
10.222.21.15
10.18.12.222
10.18.12.223

การตั้งค่า

หากต้องการล้มกระดานแล้วใช้ DNS ที่ต้องการตั้งครั้งนี้ก็ใช้คำสั่ง

networksetup -setdnsservers Ethernet 10.26.21.14 10.26.21.15

แต่ถ้าต้องการเพิ่มเข้าไปก็ให้ get ค่าเดิม แล้วต่อท้ายเข้าไป เช่น

networksetup -getdnsservers Ethernet
10.222.21.14
10.222.21.15

networksetup -setdnsservers Ethernet 10.222.21.14 10.222.21.15 10.18.12.222 10.18.12.223

หรือถ้าต้องการ clear ไปเลยก็

networksetup -setdnsservers Ethernet Emty

ลองเอาไปประยุกต์ใช้กันดูครับ

การใช้ Pydantic Model กับ Form Data ใน FastAPI

MrChoke — Fri, 25 Feb 2022 03:44:07 +0000

ปกติถ้าหากจำนวน Fields ใน Form มีไม่มากก็ไม่มีปัญหาเราสามารถเขียนแบบปกติได้ เช่น


@app.post("/abc", response_model=bool)
def abc(id: int = Form(...), name: str = Form(default=None),status: str = Form(default="single")):
  return True

แต่ถ้า Fields มีเยอะ ๆ สัก 10 Fields ขึ้นไป Code ก็จะเริ่มดูยากยาวมาก การใช้ Pydantic model เข้ามาช่วยก็จะจัดการง่ายขึ้น ปกติเราใช้ Pydantic model ใน Body แบบ JSON กันอยู่แล้วแต่สำหรับ Form Data จะมีลูกเล่นนิดหนึ่ง ค้นหาใน internet ไปเจอวิธีที่คิดว่าง่ายที่สุดละเลยบันทึกไว้สักหน่อย

ต้นฉบับที่ผมนำมาใช้

stackoverflow

ตัวอย่าง model.py

from typing import Optional

from fastapi import Form
from pydantic import BaseModel


def form_body(cls):
    cls.__signature__ = cls.__signature__.replace(
        parameters=[
            arg.replace(default=Form(default=arg.default) if arg.default is not inspect._empty else Form(...))
            for arg in cls.__signature__.parameters.values()
        ]
    )
    return cls

@form_body
class Profile(BaseModel):
    passport_no: Optional[str]
    hn: Optional[str]
    patient_guid: Optional[str]
    prefix: str = "นาย"
    first_name: str
    last_name: str
    prefix_eng: str = "Mr"
    first_name_eng: Optional[str]
    middle_name_eng: Optional[str]
    last_name_eng: Optional[str]
    gender: int = 1
    birth_date: Optional[str]
    mobile_phone: Optional[str]
    installed_line_connect: Optional[str]
    address: Optional[str]
    moo: Optional[str]
    road: Optional[str]
    chw_code: Optional[str]
    amp_code: Optional[str]
    tmb_code: Optional[str]
    address_full_thai: Optional[str]
    address_full_english: Optional[str]
    nationality: Optional[str]

ในส่วนของ Form มันจะมีหลัก ๆ อยู่สามแบบคือ

บังคับ
มีค่า Default
มีก็ได้ไม่มีก็ได้

ผมเลยปรับในตัว Decorators เพิ่มเติมให้มันปรับตาม Model ที่เรากำหนดไว้

arg.replace(default=Form(default=arg.default) if arg.default is not inspect._empty else Form(...))

ตัวอย่าง Router

from model import Profile
from fastapi import Depends, FastAPI, File, UploadFile

app = FastAPI()

@app.post("/abc", response_model=bool)
def abc(profile: Profile = Depends(Profile), photo: UploadFile = File(...)):

  return True

ตอน Render ก็จะได้ประมาณนี้

ลองเอาไปประยุกต์ใช้กันดูครับ

การเลือก WebCam บน Google Colab ในกรณีมีมากกว่า 1 ตัว

MrChoke — Sun, 20 Feb 2022 20:22:39 +0000

ปกติ Colab ได้เตรียม Snippet เกี่ยวกับการใช้ WebCam มาให้เราแล้วแค่เลือก Code มาใช้แบบง่าย ๆ เลย

พอดีผมทดสอบ API แล้วใช้ Colab ในการทดสอบ และ แสดงตัวอย่างให้กับ Dev คนอื่น ๆ เลยแก้ไข script นิดหน่อยให้สามารถเลือกกล้องได้ถ้าเราเสียบกล้องมากกว่า 1 ตัว

Code ตัวอย่าง

Google Colaboratory

mrchoke / select_webcam_in_colab

Select WebCam in Google Colab

select_webcam_in_colab

Select WebCam in Google Colab

View on GitHub

JavaScript

จริง ๆ ผมใช้ JavaScript ที่ใช้งานเป็นประจำอยู่แล้ว ซึ่งสามารถนำไปประยุกต์ใช้กับ JavaScript Framework อื่น ๆ ได้ด้วย

ตัวอย่าง

// define variables
let camera_id = ''; // current camera id
let stream = null; // current stream
let devices = []; // all camera
const div = document.createElement('div'); // parent div playground
const camera_list = document.createElement('select'); // camera dropdown
const camera_label = document.createElement('h3'); // current selected camera
const video = document.createElement('video'); // video object

// scan all cameras
async function scan_cameras() {
  let camera_found = false;

  await navigator.mediaDevices
      .enumerateDevices()
      .then((deviceInfos) => {
        deviceInfos.forEach((deviceInfo) => {
           if (deviceInfo.kind === 'videoinput') {
            if(!camera_found) {
              camera_label.textContent = `Camera: ${deviceInfo.label}`;
              camera_id = deviceInfo.deviceId
              camera_found = true
            }
            devices.push(deviceInfo)
          }
        })

      })

  div.appendChild(camera_label);
 }

// change camera by id
async function change_camera(e) {
  camera_id = e.target.value;
  camera_label.textContent = `Camera: ${devices.filter(i => i.deviceId == camera_id)[0].label}`;
  await start_camera();
}

// stop all active camera
async function stop_camera() {
  if(stream){
    await stream.getVideoTracks().forEach(track => track.stop());
  }
}

// start camera by selected id
async function start_camera() {
  await stop_camera();
  stream = await navigator.mediaDevices.getUserMedia({video: {deviceId: {exact: camera_id}, audio: false}});
 video.srcObject = stream;
 await video.play();
  }

// create camera list dropdown
function create_camera_select() {
 camera_list.appendChild(new Option("Select Camera", 0))        

 devices.forEach((device, i) => {
 camera_list.appendChild(new Option(device.label || `Camera ${i + 1}`, device.deviceId));
   })

 div.appendChild(camera_list);
 camera_list.addEventListener("change", change_camera);

}

// take photo
async function takePhoto(quality) {
  await scan_cameras();
  create_camera_select();

  const capture = document.createElement('button');
  capture.textContent = 'Capture';
  div.appendChild(capture);

  video.style.display = 'block';
  document.body.appendChild(div);
  div.appendChild(video);
  await start_camera();

   google.colab.output.setIframeHeight(document.documentElement.scrollHeight, true);

  // Wait for Capture to be clicked.
  await new Promise((resolve) => capture.onclick = resolve);

  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  await stop_camera();
  div.remove();
  return canvas.toDataURL('image/jpeg', quality);
  }

ตัวอย่างการเลือกกล้อง WebCam

ลองเอาไปประยุกต์ใช้กันดูนะครับ น่าจะได้กับการเลือกไมค์บันทึกเสียงได้ด้วยแต่ผมไม่เคยลอง คือหลักการเดียวกันเลย

docker compose not docker-compose

MrChoke — Mon, 19 Apr 2021 00:33:40 +0000

docker-compose กำลังจะถูก deprecate แล้วใช้ docker compose แทน มาดูว่าใช้ยังไงกัน

สืบเนื่องมาจาก blog ของ คุณปุ๋ย

https://www.somkiat.cc/docker-compose-to-docker-compose/

ทำให้เกิดอยากลองใช้บ้างซึ่งพบว่า

บน Docker Desktop macOS สามารถใช้คำสั่งนี้ได้เลย (ลองบน M1) เลยลองบน Ubuntu บ้างพบว่ายังใช้ไม่ได้ เลยตามไปสืบค้นดูพบว่า Project คือ

docker/compose-cli

ทำมานานพอสมควรถ้าอ้างตามเอกสารนี้

docker/compose-cli

Docker Desktop macOS และ Windows จะถูก built-in ไปแล้วเลยใช้ได้ทันทีเหมือน buildx เลย

Installation

ตาม link ด้านบนวิธีการติดตั้ง (ผมติดตั้งบน Ubuntu)

curl -L https://raw.githubusercontent.com/docker/compose-cli/main/scripts/install/install_linux.sh | sh

เมื่อติดตั้งสำเร็จจะมีคำสั่ง docker เพิ่มขึ้นมาใน path

/usr/local/bin/docker

ลองทดสอบดูว่าตอนนี้คำสั่ง docker ถูกเรียกจาก path ไหน

type docker

หรือ

which docker

ถ้ายังเรียกไปที่

/usr/bin/docker

ก็ให้ปิด shell แล้วเปิดใหม่ อ้อ!! ดูลำดับ path ของ PATH ด้วยนะครับว่า /usr/local/bin ต้องอยู่ก่อน /usr/bin

คราวนี้เราก็สามารถใช้คำสั่ง

docker compose

ได้แล้วจ้า….

docker compose

Use latexindent on macOS Big Sur

MrChoke — Wed, 14 Apr 2021 19:23:56 +0000

ตัวช่วยจัด indent source ของ LaTeX คือ latexindent แต่บน macOS จะต้องติดตั้ง cpan modules เพิ่มเติมนิดหน่อย

Can't locate File/HomeDir.pm in [@INC](http://twitter.com/INC) (you may need to install the File::HomeDir module) ([@INC](http://twitter.com/INC) contains: /usr/local/texlive/2021/texmf-dist/scripts/latexindent /Library/Perl/5.30/darwin-thread-multi-2level /Library/Perl/5.30 /Network/Library/Perl/5.30/darwin-thread-multi-2level /Network/Library/Perl/5.30 /Library/Perl/Updates/5.30.2 /System/Library/Perl/5.30/darwin-thread-multi-2level /System/Library/Perl/5.30 /System/Library/Perl/Extras/5.30/darwin-thread-multi-2level /System/Library/Perl/Extras/5.30) at /usr/local/texlive/2021/texmf-dist/scripts/latexindent/LatexIndent/GetYamlSettings.pm line 22.

ถ้าเจอ error นี้ให้ติดตั้ง modules ต่างๆ ดังนี้

เริ่มแรกให้กำหนด CPATH ให้ชี้ให้ถูกต้อง

export CPATH=/Library/Developer/CommandLineTools/SDKs/MacOSX11.1.sdk/System/Library/Perl/5.30/darwin-thread-multi-2level/CORE:$CPATH

หลังจากนั้นก็ให้ติดตั้ง CPAN Modules

cpan install File:HomeDir
cpan install Unicode::GCString

ปล. ผมเลือก sudo ตอนที่ CPAN ถามนะครับ

เขียน LaTeX ด้วย VSCode และ TeX Live Docker Image — EP2

MrChoke — Thu, 25 Mar 2021 22:54:05 +0000

เขียน LaTeX ด้วย VSCode และ TeX Live Docker Image — EP2

หลังจากสามารถจัดการและใช้งาน Docker Container ได้แล้วคราวนี้ลองมาเขียน LaTeX กับ VSCode กันดูครับ ถ้าใครไม่เคยเขียนมาก่อนก็คงต้องทำการบ้านมาบ้าง เพราะผมไม่ได้ลงรายละเอียดทั้งหมด

เขียน LaTeX ด้วย VSCode และ TeX Live Docker Image — EP1

Attach Container

Attach to New Window

เลือกรูป Computer บน Side Bar ด้านซ้าย แล้วก็ Click ขวาบนชื่อ Container ที่เราต้องการใช้งาน (สั่ง run ไว้ก่อนหน้านี้แล้ว) แล้วเลือก Attach in New Window ก็จะปรากฎหน้าต่างใหม่ขึ้นมาดังรูปถัดไป

Workspace ใหม่

ซึ่งจะมี Terminal ของ Container มาให้ด้วยให้เราสร้าง Folder สำหรับทำเขียน LaTeX ด้วยคำสั่งดังนี้

สร้าง Folder

เนื่องจากตอนเราสร้าง container ได้มีการ mount volume ไว้ใน /root/data ดังนั้นให้เราเข้าไปใน /root/data แล้วสร้าง folder ขึ้นมา 1 folder

mkdir /root/data/latex1

จะสั่งแบบในรูปหรือสั่งตามตัวอย่างก็ได้

เปิด Folder ใน Workspace

เปิดจาก terminal ง่ายๆ ด้วยคำสั่ง

code /root/data/latex1

หรือจะใช้ mouse click ที่รูป icon files บน Side Bar ด้านซ้าย และ Click ที่ปุ่ม Open Folder

Click Open Folder

ใส่ path หรือจะ Click เลือกไปเรื่อยๆ ก็ได้ดังรูปด้านล่าง

เลือก Folder ที่เราสร้างไว้

สร้าง File ใหม่

เมื่อเปิด Folder เรียบร้อยให้ Click ที่ icon new file หรือ Click ขวาบนพื้นที่ว่างในช่อง แล้วเลือก New File จาก Menu ดังรูปด้านบน

ตั้งชื่อ file1.tex

New File

ใส่คำสั่ง LaTeX แรกดังตัวอย่าง

\documentclass{article}
\title{My First \LaTeX{} Document}
\author{MrChoke}
\date{\today}
\begin{document}
   \maketitle
   Hello \LaTeX{} world!
\end{document}

อ่านเกี่ยวกับ LaTeX เพิ่มเติมได้ที่

https://medium.com/media/ff54de4b800cb059c6627c3b4733d06d/href

คำสั่ง LaTeX

หลังจากนี้เราสามารถสั่งให้ Build คำสั่งนี้ได้แล้วโดยการ Click ที่ปุ่มสีเขียวด้านบนขวา

ปุ่มคำสั่งของ LaTeX Workshop Extension

หลังจาก Build

ถ้าหาก Build สำเร็จจะมี files ต่างๆ เกิดขึ้นทางด้านซ้ายมือ โดยเฉพาะ PDF File คือเป้าหมายของเราถ้ามี Error ตัว Extension ก็จะแจ้งเตือนเรามา ก็ต้องไล่อ่านว่าเกิดจากอะไร

PDF View

ถ้าเราต้องการแสดงผล PDF ก็ให้ Click ที่ปุ่มถัดจากปุ่ม Build สีเขียว ที่มีรูปแว่นขยาย ก็จะได้เหมือนรูปด้านบน หลังจากนี้ถ้าเราแก้ไขคำสั่ง LaTeX แล้ว save มันก็จะทำการ Build ให้อัตโนมัติและแสดงผล PDF ให้ทันทีด้วยเช่นกัน

สำหรับค่า defualt จากตัวอย่างด้านบนตอนสั่ง build จะใช้ engine pdfLaTeX นะครับ

ภาษาไทย

ถ้าเราเขียนเอกสารภาษาอังกฤษก็สบายหน่อยเพราะตัวอย่างข้างบนก็เพียงพอแล้วแต่ถ้าเราจะใช้ภาษาไทยใน LaTeX ละเราต้องทำอย่างไร และ ต้องรู้อะไรบ้าง

เลือก Engine

การใช้ LaTeX Engine ที่นิยมหลักๆ ก็จะมี

pdfLaTeX
XeLaTeX
LuaLaTeX

pdfLaTeX

โครงการภาษาไทยสำหรับ LaTeX หรือ ThaiLaTeX เป็นโครงการแรกๆ ที่ Contribute สภาวะแวดล้อมการใช้งานภาษาไทยเข้าไป อ่านรายละเอียดได้ที่

https://linux.thai.net/projects/thailatex

ซึ่งหลัก ๆ เป็นการกำหนดสภาวะแวดล้อมภาษาไทยให้ pdfLaTeX เนื่องจาก pdfLaTeX ค่อนข้างล้าสมัยการใช้ fonts ก็มีข้อจำกัดไม่สามารถใช้ fonts ใหม่ๆ อย่าง OpenType ได้การตัดคำก็ต้องทำเองก่อนจะทำการ Build Project การ shapping สระ และ วรรณยุกต์ก็ยังต้องใช้แบบเก่า

มาดูตัวอย่างการใช้ภาษาไทยด้วย pdfLaTeX กันครับ

pdfLaTeX — Thai LaTeX

ตัวอย่างคำสั่ง

\documentclass{article}
\usepackage[thai]{babel}
\usepackage[utf8x]{inputenc}
\usepackage{fonts-tlwg}
\begin{document}
สวัสดีชาวโลก
\end{document}

ตัวอย่าง Thai LaTeX กับ pdfLaTeX

ตั้งแต่บรรทัดที่ 2–4 เป็นสิ่งจำเป็นที่ต้องประกาศเสมอไม่งั้นจะใช้งานภาษาไทยไม่ถูกต้อง

FONTS TLWG

Fonts ภาษาไทยหลักที่ bundle ไปกับ TeX Live ก็จะมีชุดของ TLWG (Thai Linux Working Group) ดังนี้

\documentclass{article}
\usepackage[thai]{babel}
\usepackage[utf8x]{inputenc}
\usepackage{fonts-tlwg}
\begin{document}

\begin{itemize}
  \item \fontfamily{kinnari} \selectfont Kinnari สวัสดีชาวโลก
  \item \fontfamily{garuda} \selectfont Garuda สวัสดีชาวโลก
  \item \fontfamily{norasi} \selectfont Norasi สวัสดีชาวโลก
  \item \fontfamily{laksaman} \selectfont Laksaman สวัสดีชาวโลก
  \item \fontfamily{purisa} \selectfont Purisa สวัสดีชาวโลก
  \item \fontfamily{loma} \selectfont Loma สวัสดีชาวโลก
  \item \fontfamily{sawasdee} \selectfont Sawasdee สวัสดีชาวโลก
  \item \fontfamily{ttype} \selectfont Ttype สวัสดีชาวโลก
  \item \fontfamily{ttypist} \selectfont TTypist สวัสดีชาวโลก
  \item \fontfamily{umpush} \selectfont Umpush สวัสดีชาวโลก
  \item \fontfamily{waree} \selectfont Waree สวัสดีชาวโลก
\end{itemize}

\end{document}

fonts-tlwg

การเลือก Default Font

ปกติถ้าเราใช้ Thai LaTeX font ที่ถูกใช้คือ

Norasi สำหรับ Roman Font
Garuda สำหรับ Sans Serif Font
TlwgTypist สำหรับ Type Writer

แต่ถ้าเราจะเลือก font ตัวอื่นในรายการด้านบนให้เราประกาศใน

\usepackage{fonts-tlwg}

โดยการกำหนด option ดังนี้

\usepackage[fontname]{fonts-tlwg}

เช่น

\documentclass{article}
\usepackage[thai]{babel}
\usepackage[utf8x]{inputenc}
\usepackage[purisa]{fonts-tlwg}
\begin{document}
เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน
จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่นฆ่าบีฑาใคร
ไม่ถือโทษโกรธแช่งซัดฮึดฮัดด่า หัดอภัยเหมือนกีฬาอัชฌาสัย
ปฏิบัติประพฤติกฎกำหนดใจ พูดจาให้จ๊ะๆ จ๋า น่าฟังเอยฯ

ธรรมคุณหนุนความดีฑีฆรัตน์ สรรพสัตว์วัฏวจรถอนวิถี
อริยสัจตรัสสังโยคโลกโมฬี ดังกุมภีร์ผลาญชิวหาบีฑาทนต์
ฟังฉัตรทองของประเสริฐเลิศวิเศษ ฝ่ายต้นเหตุฎรงกรณ์อุดรผล
ยินสถานฌานสมาอารยะชน พึงซ่อนกลปรนนิบัตินิวัฒน์แฮฯ
\end{document}

Purisa

Laksaman

อ่านเพิ่มเติมได้ที่

https://raw.githubusercontent.com/tlwg/fonts-tlwg/master/latex/README.latex

การตัดคำ

without word/line break

สังเกตว่าการตัดคำและบรรทัดยังแปลกๆ มีการใส่ hyphen ยังไม่ถูกต้องนัก ใน TeX Live Docker image ผมใส่ swath ไปให้แล้วเราสามารถสั่งตัดคำได้เลยโดยสั่งดังนี้

swath -f latex -u u,u < original.tex > processed.tex

จากคำสั่งด้านบน

-f latex กำหนด format เป็น LaTeX
-u u,u encoding แบบ utf-8 to utf-8 ถ้าสมัยก่อนอาจจะต้องใข้ TIS-620 แต่ปัจจุบันเรา process เป็น UTF-8 ได้เลย
< original.tex คือ file ต้นฉบับที่นำเข้า
> processed.tex คือ นำออก file จากผลที่ประมวลผลเรียบร้อยแล้ว

หลังจากนั้นเราก็นำ file ที่ตัดคำแล้วไป build ต่อ

LaTeX Source ที่ถูกตัดคำเรียบร้อยแล้ว

ผลของการตัดบรรทัด และใส่ Hyphen ได้ถูกต้องขึ้น

จากตัวอย่าง pdfLaTeX จะเห็นว่าวิธีการยังค่อนข้างซับซ้อนยังต้องมีการตัดคำก่อนที่จะ process และ fonts ที่ใช้ยังเป็นแบบ Type1 การนำ fonts ของระบบหรือ fonts ภายนอกมาใช้ยากมาก

XeLaTeX, LuaLaTeX

ทางเลือกที่คนนิยมใช้กันในปัจจุบันคือ XeLaTeX ส่วน LuaLaTeX ผมยังไม่เคยได้ลองแต่เห็นหลายคนบอกว่าคล้ายๆ กัน คือใช้ FontSpec เหมือนกัน และ เกิดมาเพื่อประมวลผลแบบ UTF-8 และที่สำคัญคือมีการใช้ ICU ในการตัดคำซึ่งสนับสนุนหลากหลายภาษารวมทั้งภาษาไทยด้วย

สร้าง Workspace ใหม่

สร้าง Folder ใหม่ใน /root/data ชื่อ latex2 ทำใน terminal

mkdir /root/data/latex2

เปิด หน้าต่างใหม่ด้วยคำสั่ง

code /root/data/latex2

สร้าง Build Tools และ Recipes

ค่าปกติในการ Build LaTeX ของ VSCode LaTeX Workshop Extension คือ pdfLaTeX ส่วน XeLaTeX ไม่ได้จัดเตรียมไว้ให้ การตั้งค่า Extension ทำได้หลายระดับมีตั้งแต่

เฉพาะ Workspace
เฉพาะใน Container หรือ SSH
ตั้งเป็นค่าของเราระดับ USER ก็ได้

ถ้าเราเขียนหลายแบบก็อาจจะแยกเฉพาะ Workspace ก็ได้ให้เปิด

VSCode Setting → Workspace

แล้วค้นหาคำว่า

latex tools

Recipes & Tools

ให้ Click ที่ Edit in settings.json ของ

Latex-workshop -> Latex: Tools

แล้วเพิ่ม Block ใหม่โดย Copy จาก lualatex

{
      "name": "xelatexmk",
      "command": "latexmk",
      "args": [
        "-synctex=1",
        "-interaction=nonstopmode",
        "-file-line-error",
        "-xelatex",
        "-outdir=%OUTDIR%",
        "%DOC%"
      ],
      "env": {}
  }

ให้เปลี่ยนชื่อ เป็น xelatexmk และ เปลี่ยน args จาก -lualatex เป็น -xelatex

save แล้วปิดหน้าต่าง settings.json ไป

แล้วกลับไป Click ที่ Edit in settings.json ของ

Latex-workshop -> Latex: Recipes

ให้ Copy ฺBlock ของ latexmk (lualatex) แล้วเปลี่ยนให้ตรงกับที่เรากำหนดไว้ใน Tools

{
      "name": "latexmk (xelatex)",
      "tools": [
        "xelatexmk"
      ]
 }

ตั้งให้ใช้ Recipe ล่าสุดในการ Build Project

ให้ค้นหา Setting

latex recipe

เปลี่ยนจาก first เป็น lastUsed

ให้ใช้ Recipe ล่าสุดเสมอ

ถ้าไม่ตั้งแบบนี้มันจะใช้ Recipe อันแรกสุดเสมอ เมื่อเพิ่มค่าต่างๆ ครบแล้วให้ทำการ reload หน้าต่างใหม่อีกครั้ง

Reload Window

ให้เปิด Command Palette จากเมนู หรือจะกด Shotcut ก็

View --> Command Palette

แล้วค้นหาคำว่า

restart

เลือก Restart Extension Host แล้วกด Reload Window หรือจะปิด-เปิด VSCode ใหม่ก็ได้

อย่าลืมว่าถ้าเราตั้งค่าในระดับ Workspace ถ้าเราสร้าง Workspace ใหม่เราก็ต้องตั้งค่าเหล่านี้ใหม่ทุกครั้ง หรืออาจจะ copy .vscode ใน folder ไปก็ได้

Config ของ VSCode ในระดับ Workspace

First XeLaTeX

มาลองเขียน XeLaTeX แรกกัน

สร้าง file1.tex โดย Copy คำสั่งมาจากตัวอย่างแรกของ pdfLaTeX

\documentclass{article}
\title{My First \LaTeX{} Document}
\author{MrChoke}
\date{\today}
\begin{document}
   \maketitle
   Hello \LaTeX{} world!
\end{document}

หลังจากนั้นให้ Click ที่ Icon TeX บน Side Bar ด้านซ้าย

LaTeX WorkShop Extension

ให้ขยายคำสั่ง Build LaTeX project คำสั่งแรกปุ่ม play สีเขียว

Recipe ต่างๆ สำหรับการ Build Project

เราจะเห็นคำสั่งต่างๆ สำหรับการ Build Project ให้สังเกตตรง Recipe โดยปกติเวลาเราสั่งให้ Build มันจะเลือกคำสั่งแรกซึ่งเป็น Recipe: latexmk หรือ pdfLaTeX นั่นเองก่อนหน้านี้เราได้จัดเตรียม latexmk ให้ Build XeLaTeX ไว้แล้วจะเห็นใน Recipe ที่ 4 หรือถ้าใครจะ Build LuaLaTeX ก็เลือกจากตรงนี้เหมือนกันครับ ตรงนี้ให้ Click เลือก XeLaTeX ต้องระวังนิดหนึ่งคือก่อน Click ต้องให้ file ที่เราจะ Build ถูก Focus เสมอนั่นคือให้ Click file ก่อนแล้ว Click Build

Check

รู้ได้ยังไงว่า Build สำเร็จ ?

ให้กลับไปที่หน้า Explorer แล้วดูว่ามี file pdf ถูกสร้างขึ้นมาหรือไม่

หลังจากนั้นก็ลอง Click แสดง pdf ตรง icon มุมขวาบนข้างปุ่ม Build สีเขียว

ปุ่มคำสั่งของ LaTeX Workshop Extension

PDF ที่ได้จาก XeTeX

เรารู้ได้อย่างไรว่า Extension ใช้ Engine อะไร Build ให้เรา ?

หลายคนคงสงสัยว่าที่ Build มานั้นใช้ XeLaTeX จริงหรือเปล่า ผมแนะนำอีกอย่างคือการดู Output ของ Extension ให้เลือกเมนู

View --> Output

แล้วเลือกดู LaTeX Workshop หรือ จะดู LaTeX Compiler ก็แล้วแต่เราจะสนใจนะครับ

Output ต่างๆ

Output

ถ้าเราสังเกตก็จะเห็นบรรทัดคำสั่ง หรือ Recipe ที่เราสั่งรูปด้านบนก็จะบอกว่าเป็น XeLaTeX

นอกจากนั้นการวิเคราะห์ log ของ LaTeX เองก็จะช่วยแก้ปัญหาต่างๆ ได้ดูโดยเลือกเปิด file นามสกุล log ที่มีชื่อเดียวกับ LaTeX ของเรา

file log

XeLaTeX กับภาษาไทย

อย่างที่เคยเกริ่นไปก่อนหน้านี้ว่า XeLaTeX นั้นเกิดมาหลังและสนับสนุน UTF-8 , OpenType และ TrueType Font ตั้งแต่แรกอยู่แล้วการใช้งานพวกนี้ก็ถือว่าง่าย

ข้อดี

สนับสนุน UTF-8,Unicode
TrueType , OpenType
สามารถใช้ Fonts นอกเหนือจากที่มีใน TeX Live ได้ คือสามารถใช้ fonts ของระบบได้เลย และ สามารถ copy fonts มาวางไว้กับ source code ได้ด้วย

ข้อเสีย

จากข้อดีข้างบนถ้าคุยกับคนใช้ LaTeX จริงๆ จังๆ เขาอาจจะมองว่าเป็นสิ่งที่อาจจะทำให้เสียความเป็น LaTeX ได้เพราะตอนส่ง source code ให้กันอาจจะลืม Copy Font ให้ไปด้วยเพราะไม่รู้ว่า Font ที่ใช้ ไม่ได้อยู่ใน TeX Live ก็จะเป็นปัญหาคล้ายๆ Microsoft Word ที่แสดงผลผิดพลาดถ้าต้นทางและปลายทางใช้ font ไม่เหมือนกันเป็นต้น
ณ ปัจจุบัน TeX Live 2021 มี fonts ไทยไปด้วยทั้ง Type1 และ OpenType Font แต่การตั้งค่าให้ Fontspec ใช้งานได้ผู้ใช้ยังต้องออกแรงเองอยู่ คือต้องประกาศเพิ่มเติมถึงจะใช้ได้ หลายคนจึงนิยมใช้ font ที่หามาเอง หรือ font ที่อยู่ในระบบปฎิบัติการ ก็อาจจะเกิดปัญหาตามมาเมื่อส่งมอบ source code ไปให้คนอื่น

Fonts ไทย

fonts-tlwg

fonts-tlwg มีอยู่แล้วใน TeX Live ที่ติดตั้งแบบทั้งหมด หรือ จะเลือกติดตั้งเพิ่มเติมภายหลังก็ได้การใช้งาน font ใน XeLaTeX จะใช้ package fontspec ซึ่งจะต้องมีการประกาศ font เสียก่อนทำได้หลายแบบ ก่อนอื่นให้ copy file2.tex จากตัวอย่างแรกมาก่อน แล้วแก้ดังนี้

\documentclass{article}
\usepackage{fontspec}
\begin{document}
สวัสดีชาวโลก
\end{document}

แล้วลองสั่ง build ด้วย XeLaTeX Recipes จะไม่มีอะไร error แต่เมื่อสั่ง preview pdf จะไม่เห็นข้อความใด ๆ เลย

ไม่มี output

ทีนี้เราลองสั่งเพิ่มเข้าไปหนึ่งบรรทัดคือ

\setmainfont{Laksaman.otf}

แล้วลอง Build ใหม่อีกรอบก็จะมีข้อความขึ้นมา

Output ภาษาไทย

ข้างบนเป็นตัวอย่างหนึ่งที่ง่ายๆ ในการใช้ font แต่เราต้องรู้ชื่อ file font ด้วยนะไม่งั้นมันจะหาไม่ถูก แล้ว fonts-tlwg มี font อะไรบ้างละ ?

fonts-tlwg ที่มากับ TeX Live จะเก็บใน

texmf-dist/fonts/opentype/public/fonts-tlwg/

ถ้า Docker Image ของผมจะอยู่ที่

/usr/local/texlive/2021/texmf-dist/fonts/opentype/public/fonts-tlwg/

รายชื่อ Files

Garuda-BoldOblique.otf
Garuda-Bold.otf
Garuda-Oblique.otf
Garuda.otf
Kinnari-BoldItalic.otf
Kinnari-BoldOblique.otf
Kinnari-Bold.otf
Kinnari-Italic.otf
Kinnari-Oblique.otf
Kinnari.otf
Laksaman-BoldItalic.otf
Laksaman-Bold.otf
Laksaman-Italic.otf
Laksaman.otf
Loma-BoldOblique.otf
Loma-Bold.otf
Loma-Oblique.otf
Loma.otf
Norasi-BoldItalic.otf
Norasi-BoldOblique.otf
Norasi-Bold.otf
Norasi-Italic.otf
Norasi-Oblique.otf
Norasi.otf
Purisa-BoldOblique.otf
Purisa-Bold.otf
Purisa-Oblique.otf
Purisa.otf
Sawasdee-BoldOblique.otf
Sawasdee-Bold.otf
Sawasdee-Oblique.otf
Sawasdee.otf
TlwgMono-BoldOblique.otf
TlwgMono-Bold.otf
TlwgMono-Oblique.otf
TlwgMono.otf
TlwgTypewriter-BoldOblique.otf
TlwgTypewriter-Bold.otf
TlwgTypewriter-Oblique.otf
TlwgTypewriter.otf
TlwgTypist-BoldOblique.otf
TlwgTypist-Bold.otf
TlwgTypist-Oblique.otf
TlwgTypist.otf
TlwgTypo-BoldOblique.otf
TlwgTypo-Bold.otf
TlwgTypo-Oblique.otf
TlwgTypo.otf
Umpush-BoldOblique.otf
Umpush-Bold.otf
Umpush-LightOblique.otf
Umpush-Light.otf
Umpush-Oblique.otf
Umpush.otf
Waree-BoldOblique.otf
Waree-Bold.otf
Waree-Oblique.otf
Waree.otf

ถ้าสังเกตในตัวอย่างเราจะใช้ font Laksaman.otf ซึ่งเป็น font แบบ Nomal แบบเดียวไม่มีตัวหน้า ตัวเอียงให้ใช้ ลองสั่งดูครับ

จะแสดงเป็นตัวธรรมดาทั้งหมด

fontspec จะมี Options สำหรับการกำหนดค่า font ให้ง่ายขึ้นมาดูตัวอย่าง เพิ่มเติมให้กับ \setmainfont กัน

\setmainfont[
  Extension = .otf ,
  ItalicFont = *-Italic ,
  BoldFont = *-Bold ,
  BoldItalicFont = *-BoldItalic 
]{Laksaman}

การกำหนด Font Shape Options นี้ยังสามารถใช้กับ font ที่เรานำมาใช้เอง โดยการ Copy ชุด fonts มาใส่ใน folder project ของเราแล้วประกาศให้ครบตามนี้แต่อย่าลืมว่าแต่ละ font จะมีไม่เหมือนกันบางตัวไม่มีตัวหนา ไม่มีตัวเอียง หรือ จะมีแบบอื่นเพิ่มขึ้นมาเช่น -Oblique , -Regular, -Light เป็นต้นก็ต้องกำหนดให้ถูกต้อง

ตัวอย่าง Font Shape

BoldFont = ⟨font name⟩
ItalicFont = ⟨font name⟩
BoldItalicFont = ⟨font name⟩
SlantedFont = ⟨font name⟩
BoldSlantedFont = ⟨font name⟩
SmallCapsFont = ⟨font name⟩
UprightFont = ⟨font name⟩

Shaping

ตอนนี้ดูเหมือนจะแสดงภาษาไทยได้แล้วแต่สิ่งที่สำคัญของภาษาไทยอีกอย่างที่เราควรรู้และใส่ใจคือการจัดระดับสระวรรณยุกต์ หรือ Shaping ลองดูตัวอย่าง

\documentclass{article}
\usepackage{fontspec}

\setmainfont[
  Extension = .otf ,
  ItalicFont = *-Italic ,
  BoldFont = *-Bold ,
  BoldItalicFont = *-BoldItalic 
]{Laksaman}

\begin{document}

ป่า ป้า ป๊ะ ป๋า ญู ฐู ฏู ญ ฐ - -- --- `fi' ``ff"

\textbf{ป่า ป้า ป๊ะ ป๋า ญู ฐู ฏู ญ ฐ - -- --- `fi' ``ff"}

\textit{ป่า ป้า ป๊ะ ป๋า ญู ฐู ฏู ญ ฐ - -- --- `fi' ``ff" }

\textbf{\textit{ป่า ป้า ป๊ะ ป๋า ญู ฐู ฏู ญ ฐ - -- --- `fi' ``ff"}}
\end{document}

สระวรรณยุกต์ภาษาไทยไม่สวย

จากตัวอย่างเมื่อเราพิมพ์ข้อความภาษาไทยที่มีสระและวรรณยุกต์หลายระดับจะแสดงผลไม่สวยงามอย่าเพิ่งตกใจเมื่อเราใช้ OpenType หรือ TrueType Fonts จะมี Option Script ให้เราเลือกว่าจะใช้ Script แบบไหนใน Fonts-Tlwg ที่เป็น OpenType มี Script Thai ให้เลือกได้เลย วิธีตรวจสอบว่า fonts ที่เราใช้มี Script อะไรบ้างจะใช้คำสั่ง

otfinfo -s fontname.[ttf,otf]

ลองกำหนด Script

Script = Thai

Script = Thai

ผลที่ได้คือภาษาไทยจัดระดับสระวรรณยุกต์ได้สวยงาม แต่!!! สิ่งที่ต้องสังเกตุอีกอย่างหนึ่งคือ การแสดง Ligatures ของภาษาอังกฤษจะไม่สวยงามแทนเพราะมันต้องใช้ Script = Latin นั่นเองวิธีแก้แบบบัวไม่ให้ช้ำน้ำไม่ให้ขุ่น ให้แสดงสวยงามทั้งสองภาษาคือให้ใช้

Script = Default

Script = Default

มาดูผลเปรียบเทียบกันแบบชัดๆ

ไม่กำหนด Script จะเท่ากับ Script = Latin

Script = Thai

Script = Default

ผู้เชี่ยวชาญหลายท่านยังแนะนำอีก Option คือ

Ligatures=TeX

หรือ จะใช้

Mapping=tex-text

สอง options นี้เลือกตัวใดตัวหนึ่งก็ได้จะทำให้การแสดงผลเกี่ยวกับพวก -, — , — เป็นไปตามแบบของ TeX ทำให้สวยงามขึ้น

การตัดคำ

XeLaTeX จะใช้ lib ของ ICU ในการตัดคำลองมาดูกันว่าเมื่อเทียบกับ pdfLaTeX ที่ใช้ swath ในการตัดคำจะเป็นยังไงบ้าง

Copy จาก file4.tex จากตัวอย่าง pdfLaTeX มาแล้วแก้ไขดังนี้

\documentclass{article}
\usepackage{fontspec}

\setmainfont[
  Extension = .otf ,
  ItalicFont = *-Italic ,
  BoldFont = *-Bold ,
  BoldItalicFont = *-BoldItalic ,
  Script = Default,
  Mapping=tex-text
]{Laksaman}

\begin{document}
เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน
จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่นฆ่าบีฑาใคร
ไม่ถือโทษโกรธแช่งซัดฮึดฮัดด่า หัดอภัยเหมือนกีฬาอัชฌาสัย
ปฏิบัติประพฤติกฎกำหนดใจ พูดจาให้จ๊ะๆ จ๋า น่าฟังเอยฯ

ธรรมคุณหนุนความดีฑีฆรัตน์ สรรพสัตว์วัฏวจรถอนวิถี
อริยสัจตรัสสังโยคโลกโมฬี ดังกุมภีร์ผลาญชิวหาบีฑาทนต์
ฟังฉัตรทองของประเสริฐเลิศวิเศษ ฝ่ายต้นเหตุฎรงกรณ์อุดรผล
ยินสถานฌานสมาอารยะชน พึงซ่อนกลปรนนิบัตินิวัฒน์แฮฯ
\end{document}

เมื่อลอง Build ดู

ข้อความภาษาไทยยาวๆ

จะเห็นว่าตอนนี้ยังไม่มีการตัดคำและบรรทัดที่ถูกต้อง XeLaTeX มีคำสั่งกำหนดภาษาสำหรับการตัดบรรทัดไว้ให้คือ

\XeTeXlinebreaklocale "th"

ค่า “th” คือบอกว่าจะใช้ Locale ของ Thai นั่นเอง อาจจะใช้ “th_TH” หรือ “thai” ก็ได้

เพิ่มคำสั่งในการตัดคำ

เมื่อเรากำหนดคำสั่งให้ตัดบรรทัด (โดยดูจากการตัดคำ) ก็จะดูดีขึ้นแต่ถ้าสังเกตขอบทั้งซ้ายขวายังไม่มีการจัดให้พอดี หรือที่เรียกว่า Justify จริงๆ มันก็ Justify นะแหละแต่มันไม่กล้าแบ่งคำ และ การกระจายช่องว่างที่เหมาะสมนั่นเอง จึงมีคำสั่งอีกคำสั่งที่ช่วยจัดให้การกระจายได้สวยงามขึ้นคือ

\XeTeXlinebreakskip = 0pt plus 1pt\relax

การ Tune การตัดบรรทัดเพิ่มเติม

เมื่อเราทำการ tune การตัดบรรทัดพบว่าดูดีขึ้นมาก ขอบซ้ายขวาตรงดิ่งสวยงาม แต่ถ้าสังเกตดีๆ จะพบว่ามีการแทรกช่องว่างระหว่างคำเล็กน้อยถ้าเทียบกับ pdfLaTeX ก่อนหน้านี้ จากการทดลองพบว่าถ้าจะให้เหมือนกับ pdfLaTeX แป่ะ ๆ ต้องใช้ package polyglossia ช่วยอันนี้ผมเองไม่แน่ใจเรื่องกลไกว่ามันไปทำยังไงถึงทำให้การจัดหน้า ตัดบรรทัดออกมาได้เหมือนกันขนาดนี้

ใช้ polyglossia

ลองเทียบกันแบบจะๆ ดู

pdfLaTeX + swath

XeLaTeX + Polyglossia + thai locale

การใช้ Font นอก

ปกติถ้าเราใช้ font จากในระบบของ TeX Live ก็เพียงพอสำหรับการเขียนตำรา เขียนบทความต่างๆ นอกเสียจากมีการกำหนดชนิด font ของผู้รับตีพิมพ์ ผมจะลองเอา font จาก Windows และ Fonts จาก Internet มาใช้ดูว่าจะแสดงผลได้สวยงามครบถ้วนเหมือนชุด Fonts-Tlwg หรือไม่

Angsana New (TTF)

ตัวแรกผมลอง Angsana New แบบ TrueType Font เท่าที่ดูค่อนข้างเก่ามากมี font script Thai ตัวเดียวด้วย

ผมสร้าง folder ชื่อ fonts ไว้ใน ที่เดียวกับ source code มี Angsana New มี files ทั้งหมด 4 แบบคือ

angsa.ttf angsab.ttf angsai.ttf angsaz.ttf

fontspec ผมกำหนดดังนี้

\setmainfont[
  Path = fonts/,
  Extension = .ttf ,
  UprightFont = angsa,
  ItalicFont = angsai ,
  BoldFont = angsab ,
  BoldItalicFont = angsaz ,
  Script = Thai,
  Mapping=tex-text
]{Angsana New}

Angsana NEW

เนื่องจาก fonts ภาษาไทยส่วนมากขนาดจะเล็กเมื่อเทียบกับ fonts ภาษาอังกฤษ และ fonts-tlwg ที่ถูก scale ให้เท่ากับ fonts ภาษาอังกฤษแล้ว ใน option ผมจะ scale ขึ้นไปให้เท่าๆ กับ Laksaman ตามแบบด้านล่าง

Scale=1.45

Angsana New + Scaled

ผลที่ได้น่าพอใจคือใกล้เคียงกับ Laksaman

Tahoma (TTF)

สำหรับ Tahoma จะเป็น font ที่มี scale เท่ากับ fonts ภาษาอังกฤษอื่นๆ จึงไม่จำเป็นต้อง scale และ มี Script หลายภาษา แต่จะไม่มีค่า Default ดังนั้นตอนเรียกใช้อาจจะต้องแยกว่าจะเรียกแบบ Thai หรือ Latin

\setmainfont[
  Scale=1,
  Path = fonts/,
  Extension = .ttf ,
  UprightFont = tahoma,
  BoldFont = tahomabd ,
  Script = Thai,
  Mapping=tex-text
]{Tahoma}

Angsana New (TTC)

นอกจาก font ที่มีนามสกุลเป็น ttf แล้ว windows ยังใช้ fonts ที่มีนามสกุลว่า ttc หรือ TrueType Collections คือ font เดียวมีครบทุก face นั่นเองแต่ info ยังคงเหมือน Angsana New ที่แยกเป็น ttf ครับคือมี script เดียวคือ Thai

\setmainfont[
  Scale=1.45,
  Path = fonts/,
  UprightFeatures = {FontIndex=0} ,
  BoldFeatures = {FontIndex=1} ,
  ItalicFeatures = {FontIndex=2} ,
  BoldItalicFeatures = {FontIndex=3} ,
  Script = Thai,
  Mapping=tex-text
]{angsana.ttc}

Angsana New TTC

Browallia New (TTC)

อีกตัวอย่างแบบ TTC ของ font Browallia ซึ่งก็เหมือนกับ Angsana New

\setmainfont[
  Scale=1.45,
  Path = fonts/,
  UprightFeatures = {FontIndex=0} ,
  BoldFeatures = {FontIndex=1} ,
  ItalicFeatures = {FontIndex=2} ,
  BoldItalicFeatures = {FontIndex=3} ,
  Script = Thai,
  Mapping=tex-text
]{browalia.ttc}

Browalloa New TTC

Trirong (Google Font TTF)

ลอง Download Font ไทยจาก Google มาลองดูบ้าง ผมสุ่มเอา Font Trirong มาทดสอบดูพบว่ามันมี Face ให้เลือกใช้เยอะมากซึ่งเราสามารถตั้งค่าเอามาใช้แบบละเอียดได้เช่น Black, Light ExtraBold เป็นต้น (ต้องขออ่านคู่มือเพิ่มเติม)

\setmainfont[
  Path = fonts/Trirong/ ,
  Extension = .ttf ,
  UprightFont = *-Light,
  ItalicFont = *-Italic ,
  BoldFont = *-Bold ,
  BoldItalicFont = *-BoldItalic ,
  Script = Default,
  Mapping=tex-text
]{Trirong}

Google Trirong

การเลือกว่าจะจัดชุด font face ก็ขึ้นอยู่กับที่เราเลือกนะ เช่น เราอยากได้แค่เบาๆ ก็อาจจะใช้ UprightFont แบบ Light หรือ เพิ่มขึ้นหน่อยก็ Regular , Nornal หรือ Medium เป็นต้นลองเล่นกันดูครับ ส่วน font นี้มี script แบบ Default ให้ด้วยก็ตั้งค่าง่ายหน่อย

การใช้ Fonts หลาย ๆ แบบในเอกสาร

ใน Fonts-Tlwg มีหลาย Fonts ให้เลือกใช้ถ้าเราต้องการใช้หลายๆ แบบวิธี set แบบด้านบนอาจจะยุ่งอยากและไม่สามารถ Reuse ได้มีผู้เชี่ยวชาญท่านหนึ่งได้ทำตัวอย่างไว้ให้ผมเลยขอนำมาแนะนำต่อละกัน

** ต้นฉบับ (https://github.com/abhabongse/fonts-tlwg/blob/067c1e4f2625604fe31337c9bd2203f634c98560/latex/fonts-tlwg.sty)

Fontspec สามารถประกาศ Features ต่างๆ ไว้ก่อนได้แล้วนำไป Reuse และ ปรับค่า เพิ่มค่าได้ตามต้องการเช่น fonts ในชุด fonts-tlwg เราสามารถประกาศสั้นๆ แบบรวมทุก fonts ดังนี้

\defaultfontfeatures{
  Extension = .otf ,
  Mapping = tex-text,
  Script = Default
  }

% Font families with regular, oblique, bold, and bold-oblique.
\defaultfontfeatures[Garuda,Loma,Purisa,Sawasdee,TlwgMono,TlwgTypewriter,%
TlwgTypist,TlwgTypo,Umpush,Waree]{
ItalicFont = *-Oblique ,
BoldFont = *-Bold ,
BoldItalicFont = *-BoldOblique ,
}

% TlwgMono don't has Script Default
\defaultfontfeatures+[TlwgMono]{Script=Thai}

% Font families with regular, italic, bold, and bold-italic.
\defaultfontfeatures[Laksaman]{
ItalicFont = *-Italic ,
BoldFont = *-Bold ,
BoldItalicFont = *-BoldItalic ,
}
% Font families with regular, italic, oblique, bold, 
% bold-italic, and bold-oblique.
\defaultfontfeatures[Kinnari,Norasi]{
ItalicFont = *-Italic ,
SlantedFont = *-Oblique ,
BoldFont = *-Bold ,
BoldItalicFont = *-BoldItalic ,
BoldSlantedFont = *-BoldOblique ,
}

\setdefaultlanguage{thai}
\XeTeXlinebreaklocale "th"
\XeTeXlinebreakskip = 0pt plus 1pt \relax

\newfontfamily\thaifont{Norasi}
\newfontfamily\thaifontsf{Garuda}
\newfontfamily\thaifonttt{TlwgTypist}

จากตัวอย่างข้างบนเป็นการกำหนด fonts หลักของเอกสาร 3 แบบโดยเราจะใช้ Polyglossia เป็นตัวช่วยในการจัดการให้โดยจะมี

Roman font \textrm \rmfamily → Norasi
SanSerif font \textsf \sffamily → Garuda
TypeWriter font \texttt \ttfamily → Tlwg Typist

ตัวอย่างการแสดงผล

\begin{description}
  \item[Roman] การพิมพ์ภาษาไทย -- English
  \item[\sffamily{}Sans] \sffamily การพิมพ์ภาษาไทย -- English
  \item[\ttfamily{}Typewriter] \ttfamily การพิมพ์ภาษาไทย -- English
\end{description}

Fonts Roman, Sans และ TypeWriter

การแสดง fonts อื่นๆ ที่ไม่ใช่สามแบบนี้จะเราสามารถเรียกใช้ได้หลายแบบ แบบที่แนะนำคือการใช้คำสั่ง

\newfontfamily

เช่นประกาศ fonts ต่างๆ

\newfontfamily\garuda{Garuda}
\newfontfamily\norasi{Norasi}
\newfontfamily\kinnari{Kinnari}
\newfontfamily\laksaman{Laksaman}
\newfontfamily\loma{Loma}
\newfontfamily\purisa{Purisa}
\newfontfamily\sawasdee{Sawasdee}
\newfontfamily\tlwgtypist{TlwgTypist}
\newfontfamily\tlwgtypo{TlwgTypo}
\newfontfamily\tlwgmono{TlwgMono}
\newfontfamily\tlwgtypewriter{TlwgTypewriter}
\newfontfamily\umpush{Umpush}[
  FontFace = {l}{n}{ Font = *-Light },
  FontFace = {l}{it}{ Font = *-LightOblique }
]
\newfontfamily\waree{Waree}

เรียกใช้งาน

\begin{itemize}
  \item \kinnari Kinnari สวัสดีชาวโลก
  \item \garuda Garuda สวัสดีชาวโลก
  \item \norasi Norasi สวัสดีชาวโลก
  \item \laksaman Laksaman สวัสดีชาวโลก
  \item \purisa Purisa สวัสดีชาวโลก
  \item \loma Loma สวัสดีชาวโลก
  \item \sawasdee Sawasdee สวัสดีชาวโลก
  \item \tlwgtypewriter TlwgTypewriter สวัสดีชาวโลก
  \item \tlwgtypist TlwgtTypist สวัสดีชาวโลก
  \item \umpush Umpush สวัสดีชาวโลก
  \item \waree Waree สวัสดีชาวโลก
\end{itemize}

ผล

Fonts ต่างๆของ TLWG

ถ้าสังเกตจะเห็นว่า font Umpush จะมีการกำหนดค่าพิเศษกว่าแบบอื่น คือจะมี fontseries Light และ Light Oblique เพิ่มเข้ามาซึ่งไม่สามารถกำหนดได้ใน \defaultfontfeatures แต่สามารถใช้วิธีในตัวอย่าง หรือ จะใช้วิธีก่อนหน้านี้คือ \setmainfont \setsansfont \setmonofont ก็ได้ถ้าไม่ใช้ PolyGlossia จัดการ fonts ให้

วิธีเรียกใช้ fontsereis และ fontshape

ปกติเราจะใช้ macro เช่น

\begin{description}
  \item[\textbf{ตัวหนา}] \bfseries ปาป่าป้าป๊าป๋า
  \item[\textit{ตัวเอียง}] \itshape ปาป่าป้าป๊าป๋า
\end{description}

ตัวหนา ตัวเอียง

หรือจะใช้ \fontseries{}\fontshape{}\selectfont ก็ได้เช่น

\begin{itemize}
  \item \fontseries{m}\fontshape{n}\selectfont ปาป่าป้าป๊าป๋า
  \item \fontseries{m}\fontshape{it}\selectfont ปาป่าป้าป๊าป๋า
  \item \fontseries{b}\fontshape{n}\selectfont ปาป่าป้าป๊าป๋า
  \item \fontseries{b}\fontshape{it}\selectfont ปาป่าป้าป๊าป๋า
\end{itemize}

รูปแบบหนาเอียงธรรมดา

ส่วน Umpush จะมีเพิ่มมาคือ \fontseries{l}\fontshape{n} และ \fontseries{l}\fontshape{it}

\begin{itemize}
  \item \umpush\fontseries{l}\fontshape{n}\selectfont ปาป่าป้าป๊าป๋า
  \item \umpush\fontseries{m}\fontshape{n}\selectfont ปาป่าป้าป๊าป๋า
  \item \umpush\fontseries{l}\fontshape{it}\selectfont ปาป่าป้าป๊าป๋า
  \item \umpush\fontseries{m}\fontshape{it}\selectfont ปาป่าป้าป๊าป๋า
  \item \umpush\fontseries{b}\fontshape{n}\selectfont ปาป่าป้าป๊าป๋า
  \item \umpush\fontseries{b}\fontshape{it}\selectfont ปาป่าป้าป๊าป๋า
\end{itemize}

Umpush

ปิดท้ายด้วยตัวอย่างการใช้งาน Fonts รูปแบบต่างๆ ซึ่งต้นฉบับมาจากของพี่เทพพิทักษ์

PDF ตัวอย่าง

https://github.com/mrchoke/latex-workshop-medium/raw/main/latex2/file11.pdf

ต้นฉบับ

tlwg/fonts-tlwg

Source Code ที่ใช้ประกอบทั้งหมด

mrchoke/latex-workshop-medium

ถ้ามีเวลาจะมาทดสอบและบันทึกการเรียนรูปใน EP ต่อ ๆ ไปครับ เนื่องจากการเขียนเป็นรูปแบบการบันทึกการทดสอบอาจจะขาดตกบกพร่อง หรือ ผิดพลาดไปบ้างผมยินดีรับฟังคำชี้แนะ เพื่อการปรับแก้ให้สมบูรณ์ยิ่งขึ้น ขอบคุณครับ

เขียน LaTeX ด้วย VSCode และ TeX Live Docker Image — EP1

MrChoke — Thu, 25 Mar 2021 22:52:47 +0000

เขียน LaTeX ด้วย VSCode และ TeX Live Docker Image — EP1

บันทึกการเขียน LaTeX ด้วย VSCode โดยใช้ TeX Live Docker Image และ การใช้ Visual Studio Code Remote — (SSH,Container) และ Visual Studio Code LaTeX Workshop Extension

โดยปกติผมรู้จัก LaTeX มานานแต่ไม่เคยเข้าถึงมันเลย ใช้แค่ระดับทดสอบไม่ได้ใช้จริงจังเป็นกิจวัตรดังนั้นหลายๆ อย่างก็ไม่ค่อยรู้เรื่อง ช่วงนี้ก็นำเอามาใช้งาน เช่นตัวช่วยสร้าง PDF และ ลองเขียนโน้นนี่ไปเรื่อย ปกติเครื่องมือที่ใช้เขียน LaTeX มีหลายตัว แต่ในบันทึกครั้งนี้ผมจะใช้ VSCode + Visual Studio Code Remote — (SSH,Container) Extension+ Visual Studio Code LaTeX Workshop Extension และ TeX Live Docker Image ซึ่งสามารถใช้ได้ทั้งบนเครื่องส่วนตัว และ การตั้งเป็น Server ให้เพื่อนร่วมทีมเข้ามาใช้งานร่วมกันได้

EP1 จะเป็นเรื่องการเตรียม Docker Container นะครับ ส่วน EP 2 จะแนะนำการเขียน LaTeX เบื้องต้น

บันทึกนี้มีอยู่สองสามวิธีค่อยๆ อ่านนะครับอาจจะงงๆ ไปบ้างแต่ถ้าเข้าใจก็จะใช้มันสนุกมาก ถ้าใช้งานปกติใช้ แบบ Remote — Container จะง่ายสุด แต่ถ้าใช้หลายๆ คนบน Server แบบ Remote — Container มันอาจจะยุ่งยากหน่อยเรื่อง docker context เราอาจจะใช้แบบ SSH เข้ามาช่วยก็ได้

Run TeX Live Docker Container

สำหรับ Docker Image ที่ใช้ผมสร้างไว้ใช้เองรายละเอียดอ่านด้านล่างของบทความ

TeX Live Only Image

docker run -itd \
  --hostname texlive \
  --name texlive \
  -v ${PWD}/datas:/root/data \
  mrchoke/texlive

ข้างบนจะใช้ options ดังนี้

hostname จะตั้งหรือไม่ก็ได้แต่ถ้าตั้งไว้ตอน ssh เข้าไป prompt ก็จะขึ้นชื่อแทน hash ของ ID
name จะตั้งหรือไม่ก็ได้ถ้าตั้งก็จะง่ายตอนจัดการเช่น ps ดูก็เข้าใจง่าย จะสั่ง stop start restart หรือ delete ด้วยชื่อก็ง่ายหน่อย
v mount volume เข้าไปเพื่อจะได้จัดการ files งานของเราได้ง่ายเวลาลบ container ทิ้ง files จะได้ไม่หาย (สำหรับ Windows 10 ให้ใช้บน PowerShell ${PWD} ถึงจะทำงานได้ถูกต้อง)
mrchoke/texlive เป็น image ที่ผม publish ไว้ที่ hub.docker

With SSH

docker run -itd \
  --hostname texlive \
  --name texlive \
  -v ${PWD}/datas:/root/data \
  -p 2222:22 \
  mrchoke/texlive:2021-ssh

p ในกรณีที่ run docker เพื่อแชร์กับเพื่อนๆ ให้ bind port 22 มายัง host เพื่อจะได้ ssh เข้าไปได้ตรงนี้ถ้ากำหนด 2222:22 ก็จะ bind ที่ 0.0.0.0 ใครก็ได้สามารถเข้ามายังเครื่องเราได้ถ้าเป็น public server ก็ต้องระวังให้ดีซึ่งเราสามารถ กำหนดเป็น 127.0.0.1:2222:22 หรือ 192.168.0.1:2222:22 ก็แล้วแต่เราจะเข้มงวดการเข้าถึงขนาดไหน แต่ถ้าใช้คนเดียวไม่จำเป็นต้อง bind นะครับเราสามารถใช้ Remote Container Extension เข้ามาได้เลย

With authorized_keys

docker run -itd \
  --hostname texlive \
  --name texlive \
  -v ${PWD}/datas:/root/data \
  -v ${PWD}/.ssh:/root/.ssh \
  -p 2222:22 \
  mrchoke/texlive:2021-ssh

หรือถ้าใครต้องการใช้ ssh-key ในการ login ก็สามารถ mount .ssh ที่มี file authorized_keys เข้าไปใน /root ของ container ก็ได้

ลองตรวจสอบว่า docker สามารถ run ได้สำเร็จหรือไม่

TeX Live Only

docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
f7615fbdb871 mrchoke/texlive “/bin/sh” 6 seconds ago Up 5 seconds texlive

With SSH

docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
24ad39e3cae9 mrchoke/texlive:2021-ssh "/usr/sbin/sshd -D" 4 seconds ago Up 3 seconds 0.0.0.0:2222->22/tcp texlive

ข้อดี — ข้อเสีย

TeX Live Only

ใช้บนเครื่องเราได้เลยไม่ต้องเปิด port เพิ่มเติม exec เข้าไปใช้งานได้ปกติ
เชื่อมต่อกับ VSCode Remote — Container ได้เลยสะดวกมาก
ใช้งานร่วมกันอาจจะต้องใช้ผ่าน git ในการจัดการอาจจะ conflict กันได้ถ้าจัดการแบ่งงานกันไม่ดี
ถ้าใช้บน Server ทางฝั่ง Client ต้องใช้ Docker context ซึ่งอาจจะยุ่งยากไปบ้าง

With SSH

กรณีใช้งานร่วมกันหลายคนบน Server เราสามารถสร้าง user เข้ามาใช้งานใน container ที่เราสร้างขึ้นไม่ยุ่งกับ user บนระบบจริง
กรณีเขียนร่วมกันเข้าไปที่เดียวกันได้เลยแต่ต้องแบ่งกันเขียนเป็นส่วนๆ ไปจะได้ไม่ทับกัน
กรณีใช้ VSCode เข้าไปยัง Server ก็ใช้ผ่าน Remote — SSH ได้เลยสะดวกกว่าแบบ Docker Context
มันเหมือน Linux Server เครื่องหนึ่งดีๆ นี่เอง
ถ้าทำบนระบบที่ public ก็ต้องระวังผู้ไม่หวังดีบุกรุกเพราะความปลอดภัยไม่ได้ตั้งไว้สูง

Remote (SSH,Container)

หลังจาก Start Container เรียบร้อยแล้วเราสามารถเข้าไปยัง container ได้ 3 รูปแบบคือ

docker exec เข้าไปใช้งาน

docker exec -it texlive bash

ใช้ port ที่ bind ไว้ตอน run ครั้งแรก

ssh -p 2222 root@localhost

หรือ ในกรณีเข้าไปยัง server

ssh -p 2222 root@server-ip

ถ้าไม่ได้ใช้ ssh-key ก็ใส่รหัสผ่าน default 123456 แต่ถ้าจะเปลี่ยนรหัสผ่านก็สามารถใช้คำสั่ง

docker exec -it texlive passwd

Visual Studio Code Remote — (SSH,Container)

ซึ่งจะใช้ความสามารถของ VSCode Remote Extension จะกล่าวในหัวข้อถัดไป

Visual Studio Code Remote — (SSH,Container)

VSCode Remote — Container (localhost)

Remote Container Extension

วิธีนี้ไม่จำเป็นต้อง bind port ssh ออกมานะครับ เพราะเราจะใช้ VSCode เข้าไปใช้งาน Container โดยตรงบนเครื่องของเราเอง โดย Click ที่ icon รูป computer บน Side Bar ด้านซ้านมือ

Remote icon

หลังจากนั้นให้ click เลือก Target ของ Remote Extension

มันจะมีสองแบบคือ

Containers
SSH Targets

วิธีนี้ให้เลือก Containers

Remote Extension Container

ถ้าเรา start container ไว้ก็ควรจะเห็นเหมือนในภาพตัวอย่างด้านบนให้เรา Click ขวาบนชื่อ container ที่เราต้องการจะเข้าไปใช้งาน

Click ขวา

และให้เลือก Attach to Container หลังจากนั้นก็จะมีหน้าต่างใหม่เปิดขึ้นมาพร้อมเข้าไปยัง directory ที่เราได้ทำการ mount ไว้ตอนสั่ง run คือ /root/data นั่นเอง

หน้าต่าง VSCode ที่ Remote ไปยัง Docker Container

VSCode Remote — Container (Over SSH)

VSCode Remote — Container

สำหรับการใช้ Remote — Container สามารถใช้งานข้ามเครื่องได้โดยการใช้ความสามารถของ Docker ผ่าน DOKCER_CONTEXT หมายความว่า

เราต้องเปิด Docker ทั้งฝั่ง Client และ Server
เราต้องสามารถ SSH เข้าไปยัง Server ได้
มีสิทธิใช้งาน Docker ได้

วิธีการง่ายๆ คือ เราสั่ง docker run texlive image ไว้ที่ฝั่ง Server แล้วเลือก DOCKER_CONTEXT ขี้ไปที่เครื่อง Server หลังจากนั้น ตัว Extension ก็จะสามารถ attach มาใช้งานเปรียบเสมือนอยู่บนเครื่องเราเอง

Create Docker Context

สร้าง Docker Context สำหรับการเชื่อมต่อไปยัง Server ผ่านทาง SSH

docker context create texlive --docker "host=ssh://mrchoke@192.168.1.17"

texlive คือชื่อของ context ที่สร้างขึ้นมาจะใช้ชื่ออะไรก็ได้
— docker บอก option สำหรับการเชื่อมต่อซึ่งตัวอย่างจะเป็น ssh:// ตามด้วย user และ hostname/IP ถ้า port ไม่ใช้ 22 ก็ให้ใส่เพิ่มหลัง IP ได้ เช่น "host=ssh://mrchoke@192.168.1.17:2222"

ลองตรวจสอบดูครับว่าตอนนี้มี context อะไรอยู่บ้าง

docker context ls
NAME TYPE DESCRIPTION DOCKER ENDPOINT KUBERNETES ENDPOINT ORCHESTRATOR
default * moby Current DOCKER_HOST based configuration unix:///var/run/docker.sock swarm
texlive moby ssh://mrchoke@192.168.1.17

จะเห็นรานการทั้งหมดของ context ซึ่งตัวปัจจุบันที่ใช้อยู่จะมีเครื่องหมาย * อยู่หลังชื่อปกติจะเป็น defualt

การเลือกใช้ context

ทำได้สองแบบคือ

แบบชั่วคราว

ให้ใช้ตัวแปร DOCKER_CONTEXT เลือก context ที่ต้องการ วิธีนี้ต้องพิมพ์แบบนี้ทุกครั้งหน้าคำสั่ง docker ซึ่งจะยุ่งยากแต่เหมาะกับการใช้แบบครั้งคราว

DOCKER_CONTEXT=texlive docker ps

แบบ Global

วิธีนี้สามารถสั่งด้วย command โดยตรงก็ได้ หรือ จะใช้ docker extension ของ VSCode เลือกก็ได้ หลังจากเลือกแล้วทุกครั้งที่สั่งคำสั่ง docker สิ่งที่เห็นคือทางฝั่ง server ที่ context ชี้ไป

docker context use texlive
docker ps

ใช้ VSCode Docker Extension

*** สำหรับเครื่อง Server ที่ติดตั้ง docker ไว้ใน path อื่นนอกเหนือจาก /usr/bin ฝั่ง client จะไม่สามารถหาคำสั่ง docker ได้ต้องตั้งค่า sshd เพิ่มเติมคือให้แก้ไข

/etc/ssh/sshd_config

โดยเพิ่ม หรือ แก้ PermitUserEnvironment ให้เป็น yes

PermitUserEnvironment yes

แล้วกำหนด PATH ใน

~/.ssh/environment

เช่นใน macOS docker จะอยู่ใน /usr/local/bin/docker ก็ให้ตั้ง

PATH=/usr/local/bin:/bin:/usr/bin:/sbin:/usr/sbin

Docker Extension get ข้อมูลไม่ได้

จากที่ทดลองเล่นตัว Docker Extension มันจะดึงข้อมูลทางฝั่ง Server มาไม่ค่อยได้ จะ error เหมือนรูปด้านบน แต่ตัว Remote — Container จะเห็นปกติ แต่ก็มีเอ๋อบ้างบางครั้งนะครับ

VSCode Remote — Container Extension

ถ้าได้แบบรูปด้านบนก็สามารถใช้งานเหมือน container อยู่บนเครื่องตัวเองได้เลยครับ

Visual Studio Code Remote — SSH

VSCode Remote — SSH

Remote SSH

ส่วน Remote — SSH นั้นเราต้องสั่ง run พร้อมกับ bind port ออกมาด้วยนะครับตัวอย่างของผมจะ bind ไว้ที่ 2222 ซึ่งสมมติว่าผมจะ remote ไปยังเครื่อง server ละกันจริงๆ เครื่องตัวเองนั้นแหละ ฮาๆ

SSH Targets

ให้เลือกการเชื่อมต่อแบบ SSH ด้านบนก่อนนะครับ หลังจากนั้นให้กดเครื่องหมาย +

ssh command

ให้ใส่คำสั่งเหมือนกับที่เราสั่งบน terminal ปกติได้เลยจากตัวอย่างเช่น

ssh -p2222 root@localhost

ตรงนี้ถ้าเป็นเครื่อง server ก็ให้ใส่ IP หรือชื่อ Host แทน localhost

เก็บ config ไว้ที่ไหน

หลังจากนั้นก็จะถามว่าจะให้ save config นี้ไว้ที่ไหนวิธีที่ง่ายที่สุดคือตัวเลือกแรกคือให้เก็บไว้ใน .ssh/config ใน HOME ของเราเอง

รายชื่อ SSH Targets

หลังจากที่เราป้อนคำสั่งแล้วจะมีรายชื่อเพิ่มขึ้นมาคือ localhost นั่นเอง รายชื่อตรงนี้เราสามารถเข้าไปจัดการได้โดยตรงใน file .ssh/config สามารถตั้งชื่อให้ได้ หรือจะเพิ่มรายการเข้าไปเองโดยตรงก็ได้เช่นกัน

Connect to Host

หลังจากนั้นให้ Click ขวาบนชื่อ SSH Targets ที่เราต้องการจะ Connect เลือกว่าจะเปิดในหน้าต่างปัจจุบันหรือหน้าต่างใหม่

Confirm การเข้าครั้งแรก

ถ้าเราเข้าครั้งแรกจะมีการให้ confirm ก่อนโดยเลือก Continue

Password

ถ้าไม่ได้ใช้ ssh-key ก็ให้ใส่รหัสผ่าน ถ้า default ก็ใส่ 123456 ถ้าเปลี่ยนรหัสผ่านไปแล้วก็ให้ใส่ที่ตั้งไว้ แต่ถ้าตั้ง ssh-key ก็จะไม่มีหน้าต่างนี้

สถานะมุมขวาล่าง

การ Connect ไปยัง SSH Server ครั้งแรกจะช้าหน่อยเพราะมีการติดตั้ง VSCode Server ก่อน แต่ถ้าครั้งต่อไปก็จะเร็วกว่า นอกจากจะมีการ Upgrade Version ของ VSCode

Connect สำเร็จ

ถ้า Connect สำเร็จก็จะขึ้นหน้าต่างดังรูปด้านบนซึ่งจะมีหน้าต่าง Terminal ด้านล่างให้ด้วยเราสามารถพิมพ์คำสั่งของ Linux ในนี้ได้เลย

Visual Studio Code LaTeX Workshop Extension

หลังจากนี้ให้ติดตั้ง Visual Studio Code LaTeX Workshop Extension เพิ่มทางฝั่ง Remote ทำเหมือนกันทั้ง SSH และ Container

Visual Studio Code LaTeX Workshop Extension

Open Folder

เมื่อติดตั้ง Extension เสร็จพร้อมใช้งานแล้วถ้าเป็น Remote SSH เราต้องเปิด Folder ก่อนส่วน Remote Container จะเปิดให้แล้วตั้งแต่แรก วิธีเปิดก็ Click ที่ icon files บน Side Bar ด้านซ้าย

Open Folder

ช่องเลือก

โดยปกติแล้วจะมีช่องให้เลือกโดยเริ่มใน Home Directory ของ root ตอนสั่ง run ผมได้ mount ไว้ที่ /root/data ก็ให้ click ที่ Folder data ได้เลยครับ

เลือก

Work Space

หลังจากนั้นก็จะปรากฎหน้าต่าง Work Space สำหรับการทำงานขึ้นมาโดยชื่อในช่อง Explore ด้านซ้ายจะเป็น Folder ที่เราเลือกไว้เมื่อตะกี้

EP2 จะแนะนำการใช้งาน pdfLaTeX และ XeLaTeX เบื้องต้นต่อไปครับ

เขียน LaTeX ด้วย VSCode และ TeX Live Docker Image — EP2

TeX Live Docker Image

Docker Hub

เป็น Image ที่ผม Build ไว้ใช้เองสำหรับการเขียนเอกสารซึ่งจะมี Python พ่วงเข้าไปด้วย สามารถดู Dockerfile ได้ที่

mrchoke/texlive

วิธี Build ที่ publish ไว้ใน docker hub ผมใช้ buildx โดยให้ใช้ได้ทั้ง amd64 และ arm64 หมายถึงสามารถใช้บน Docker บนเครื่อง Apple M1 ได้ด้วย

docker buildx build --platform linux/arm64,linux/amd64 -t mrchoke/texlive:2021 -t mrchoke/texlive:2021.1 -t mrchoke/texlive:latest --push .

ปกติการติดตั้ง TeX Live ฉบับเต็มจะใช้เนื้อที่ราวๆ 8 GB ในตัว Image ข้างบนผมจะตัดพวก Doc กับ Src ออกเนื้อที่จะลดลงมาเกือบๆ 50% อยู่ที่ราวๆ 4.5 GB

How To Format NTFS in Big Sur

MrChoke — Mon, 25 Jan 2021 17:34:30 +0000

บังเอิญไล่ไปไล่มาไปเจอ Source Code ของ NTFS ที่ใช้ใน macOS มันมีส่วนของ newfs อยู่เหมือนกับ FAT, exFAT และ APFS แต่คำสั่งหายไปเลยเป็นที่มาบันทึกนี้

จากบทความก่อนหน้าคือการ Read / Write NTFS บน Big Sur

NTFS Read/Write in Big Sur (Intel and M1 ) — Free

แต่มันคาใจว่า mount อ่านเขียนได้แต่ทำไมถึงสร้างไม่ได้ก็ไล่ไปเจอ

Source Browser

มาไล่ดูใน macOS ไม่พบคำสั่ง newfs_ntfs แต่มีคำสั่ง

BootCampFormatter

และเมื่อลองสั่งดูมันก็คือคำสั่ง newfs_ntfs นั่นเอง

วิธี Format เป็น NTFS

ในตัว Disk Utility มันจะไม่ยอมให้ Format เป็น NTFS แต่สามารถสร้างเป็น ExFAT ได้ ซึ่ง ID ของ Partition จะเป็นตัวเดียวกันคือ 07 ดังนั้นตอนแรกก็ให้ fotmat disk เป็น ExFAT ก่อนแล้วค่อยมา format อีกรอบด้วยคำสั่งข้างบน

สมมติของเดิมเป็น FAT

ก็ให้ Click ขวาเลือกแล้ว Erase

เลือกเป็น ExFAT

หลังจากนั้นให้ unmount

เมื่อได้เรียบร้อยก็เปิด terminal ขึ้นมาแล้วพิมพ์คำสั่ง

sudo /System/Library/Filesystems/ntfs.fs/Contents/Resources/BootCampFormatter -v NTFS /dev/disk4s1

โดยเปลี่ยนที่อยู่อุปกรณ์ให้ตรงกับ disk ที่จะ format ซึ่งสามารถดูใน Disk Utility ด้านบนก็ได้ของผมจะเป็น /dev/disk4s1 นั่นเอง

เมื่อ format เสร็จแล้วลอง mount ดูครับ

ตอนนี้เราก็ได้ NTFS เรียบร้อยถ้าจะ mount แบบ Read / Write ก็ให้อ่านบทความด้านบนนะครับ

แต่ทั้งนี้เพื่อความไม่ลำบากก็สามารถใช้ ExFAT แทนได้ซึ่งเราจะไม่ลำบากและใช้ App Disk Utility ได้เลยแต่ถ้าใครทิ้ง NTFS ไม่ได้และไม่มีเครื่อง Windows สำหรับ Format ก็ใช้วิธีนี้ได้ครับไม่ต้องติดตั้งอะไรเพิ่มแต่ลำบากหน่อย

NTFS Read/Write in Big Sur (Intel and M1 ) — Free

MrChoke — Tue, 29 Dec 2020 10:52:34 +0000

NTFS Read/Write in Big Sur (Intel and M1 ) — Free

อ่านเขียน NTFS บน Big Surใช้ได้ทั้ง Intel และ M1 แบบไม่มีค่าใช้จ่ายใดๆ พร้อมตีบวก skill นิดหน่อย ฮาๆ 😛

วิธีนี้เคยเขียนไว้ครั้งหนึ่งแต่ค่อนข้าง Manual ไปหน่อยครั้งนี้จะเพิ่มเป็นแบบ กึ่งๆ auto ละกัน บทความเดิมอ่านได้ที่

Catalina NTFS rw (no extra packages)

เริ่ม

ปกติเมื่อเราเสียบ External แบบ NTFS Big Sur จะ Mount ให้อัตโนมัติแต่มันจะเขียนไม่ได้หลายคนก็พาลกลัวไม่กล้าใช้ Mac ไปเลยก็มี สมมติผมเสียบ USB เข้าไปมันก็จะ ปรากฎอยู่บน Finder หรือ ไม่ก็ Desktop (ทั้งนี้เราก็ต้องตั้งค่าให้มันแสดงด้วยนะ)

Finder Sidebar

Desktop

ถ้าดูให้ลึกลงไปอีกนิดก็เปิด terminal ขึ้นมาครับคำสั่งแรกก็

diskutil list

diskutil list

คำสั่งนี้ใช้ดูว่าบนเครื่องเรามี Storage หรือ Hard disk อะไรบ้างมีกี่ลูก กี่ partitions ข้อมูลตรงนี้เราจำเป็นต้องดูเพื่อนำไปใช้งานในบทความนี้ด้วยหลักๆ คือ มองหา USB ของเราให้เจอก่อนหลังจากนั้นก็ดูข้อมูลดังนี้

ชนิดของ Partition แบบ Windows_NTFS
ชื่อของ Partition ปกติตอน format เราควรตั้งชื่อให้มันหน่อยตอนเสียบ macOS หรือ Linux จะใช้ชื่อนี้แสดงให้เราดูตอนใช้งาน
ชื่อของอุปกรณ์ตัวอย่างจะเป็น disk2 และ partition หมายเลข 1 กลายเป็น disk2s1 และ path เต็มๆ ของมันคือ /dev/disk2s1

เมื่อเราได้ข้อมูลมาแล้วจะดูข้อมูลลึกลงไปอีกก็สามารถใช้คำสั่งดังนี้

diskutil info /dev/disk2s1

diskutil info

ข้อมูลที่เราสนใจหลักๆ มี 3 ส่วนเช่นเคย คือ

ชื่อ เราจะใช้ชื่อนี้แหละในการตั้งค่าจำไว้นะ
Mount Point หรือ Path ที่ระบบเอา USB ของเราไปเชื่อมต่อและเราสามารถเข้าไปใช้งานได้ แต่ถ้าใช้ finder บางทีเราไม่จำเป็นต้องรู้ก็ได้ แต่ถ้ารู้ก็ดีกว่า แก้ปัญหาบางอย่างได้ลึกขึ้น
ค่าที่บอกว่าตอนนี้สามารถอ่านเขียนได้ไหมซึ่งปกติ NTFS เสียบเข้าไปแล้วจะอ่านได้อย่างเดียวตามในรูป

เริ่มลุยกัน

ก่อนที่จะเริ่มให้เราทำการ eject USB ของเราออกเสียก่อน อาจจะใข้ mouse click ที่ finder ก็ได้หรือจะใช้คำสั่งก็ได้

diskutil eject /dev/disk2s1

คราวนี้ก็สร้าง folder ว่างๆ ไว้บน Desktop ซึ่งตั้งให้สื่อกับ USB ของคุณนะ ของผมตั้งง่ายๆ ตามชื่อคือ NTFS

หรือใครจะใช้ terminal สร้างก็ได้นะง่ายดีด้วย

mkdir ~/Desktop/NTFS

เมื่อสร้างเสร็จคราวนี้ให้เราสร้างคำสั่งเพื่อให้มัน mount อัตโนมัติทุกครั้งที่เราเสียบเจ้า USB อันนี้เข้าไป

พิมพ์คำสั่งดังนี้

sudo nano -w /etc/fstab

ระบบมันจะถามรหัสผ่านให้เราใส่รหัสของเราบนเครื่อง Mac นี้นะครับ

หลังจากนั้นก็ให้พิมพ์บรรทัดคำสั่งลงไป

LABEL=NTFS /Users/mrchoke/Desktop/NTFS ntfs rw,auto,nobrowse

โดยให้เปลี่ยนค่าให้ตรงกับของเรานะเช่น LABEL=xxx ตามชื่อเรา และ ส่วนของ path

/Users/xxx/Desktop/yyyy

ก็เปลี่ยนเป็นชื่อ (xxx)เป็น user ของเรา และ ส่วนสุดท้าย (yyy) ก็ตามที่เราจะตั้งให้มัน

หลังจากนั้นก็ให้ save โดยกดตามขั้นตอนดังนี้

Control X

กด y

กด Enter

กด y

กด Enter

ทดสอบกันเลย

ตอนนี้เราก็ลองเอา USB เสียบเข้าไปเลย

ICON เปลี่ยนเป็นรูป Disk

ถ้าเราพิมพ์ไม่พลาดอะไรรูป ICON ของ folder จะเปลี่ยนไปจาก Folder สีฟ้าเป็นรูป Hard Disk สีเทาๆ ตามรูปด้านบนตอนนี้เราก็สามารถใช้งานได้แล้ว click เข้าไปเลย ลองสร้างลองลบข้อมูลได้

สร้าง ลบข้อมูลได้แสดงว่าสำเร็จ

เลิกใช้งาน

ถ้าเราจะถอด USB ออกต้องทำยังไง ก็แค่ Click บน ICON รูป Hard Disk ของมันแล้วเลือก Eject หรือจะ Click พื้นที่ว่างๆ ใน Finder ขณะที่เปิดเข้าใช้งานมันก็ได้

Eject

ถ้าใครจะดู Info ว่าถ้ามันอ่านเขียนได้จะเป็นอย่างไร ก่อน Eject ก็ใช้คำสั่ง info ตามข้างบนอีกครั้ง

หลังจากที่เราแก้ไขค่า fstab

จะเห็นว่า Mount Point จะเปลี่ยนไปตามที่เราตั้งไว้ และ ค่า Read-Only ก็กลายเป็น No เรียบร้อย

ปล. วิธีแบบนี้จะเฉพาะหน่อยคือ USB อันไหนอันนั้น และ Partition ไหน Partition นั้นนอกจากเราจะตั้งชื่อให้เหมือนกัน แต่ก็ใช้พร้อมกันไม่ได้อีก ลองเอาไปใช้กันดูครับ ไม่ต้องเสียตั้งสักบาท นอกจากจะทำ Disk พัง ฮาๆ (อะ ล้อเล่งๆๆ)

Windows 10 Python Virtual Environment

MrChoke — Mon, 28 Dec 2020 04:39:42 +0000

แอบเล่น Python บน Windows 10 บันทึกไว้สักหน่อย

ผมใช้ PowerShell นะครับ ซึ่งปกติน่าจะถูกปิดการใช้งาน Script ไว้เพื่อความปลอดภัย ถ้าจะใช้ Python venv แบบไม่ต้องลงตัวช่วยก็ให้เปิดเสียก่อน โดยการเปิด PowerShell ในสิทธิของ Administrator แล้วสั่งคำสั่ง

set-executionpolicy RemoteSigned

เพื่อความปลอดภัยให้ศึกษาเพิ่มเติมได้ที่

Set-ExecutionPolicy (Microsoft.PowerShell.Security) - PowerShell

เมื่อเปิดการใช้งาน Script เสร็จแล้วก็ให้เปิด PowerShell ในสิทธิปกติแล้วสร้าง Director สำหรับ Project

mkdir python

เข้าไปยัง Directory ที่สร้างแล้วทำการสร้าง Virtual Environment

python -m venv env

เราจะเก็บ modules ต่างๆ ใน directory ชื่อ env แต่ก่อนอื่นต้องทำการ activate Environment นี้เสียก่อน

.\env\Scripts\Activate.ps1

ให้สังเกต (env) ข้างหน้า Command Prompt ถ้าสั่งสำเร็จ ซึ่งใน () นี้จะเป็นชื่อของ Directory ที่เราสร้าง Environment ไว้นั่นเอง

ตอนนี้เราก็สามารถใช้งาน python ในสภาพแวดล้อมที่สร้างขึ้นมาได้แล้ว ลองตรวจสอบว่า python ชี้ไปถูกต้องหรือไม่

Get-Command python

ตอนนี้สามารถติดตั้ง package ต่างๆ ด้วยคำสั่ง pip ได้ตามต้องการ เช่น

pip install -U pip

เป็นการ upgrade pip

หรือจะติดตั้ง opencv

pip install opencv-python

ณ วันที่ผมเขียน OpenCV ตัวล่าสุดจะมีปัญหากับ numpy ตัวล่าสุดวิธีแก้ปัญหาคือให้ drop numpy ลงไป version หนึ่ง

pip install numpy==1.19.3

VSCode

ถ้าจะใช้ VSCode เขียน Script ก็เรียกใช้งานได้เลย

code .

เมื่อเราสร้าง file ที่มีนามสกุล py vscode ก็จะถามเราว่าจะติดตั้ง extension python หรือไม่ก็ติดตั้งไปครับ

เมื่อติดตั้งเสร็จจะมีให้เลือก python version ตรงมุมล่างซ้าย

Click แล้วเลือกไปยัง env ที่เราสร้างไว้

หลังจากนี้ VSCode อาจจะถามให้ติดตั้ง Extension อื่นๆ อีก เช่น Linter ก็ให้ติดตั้งไป

หรือถ้าจะใช้ VSCode run Notebook ก็สามารถทำได้เช่นกัน โดยการ Click ขวาที่ชื่อ file แล้วเลือก

มีอีกตัวก็ Pylance ที่ควรมีไว้สำหรับช่วยในการเขียน

หลักๆ ก็ประมาณนี้เท่าที่นึกออก การใช้ Virtual Environment จะว่ายากก็ยากจะว่าง่ายก็ง่าย ถ้าไม่มีอะไรซับซ้อนวิธีนี้จะกระชับไม่ต้องลงอะไรเพิ่มเติม แต่ถ้ามี dependency ที่ต้องมีการ compile ใหม่วิธีนี้อาจจะเหนื่อยหน่อยก็ใช้ anaconda ช่วยเอา