push -f

Bluesky의 ID

Tue, 10 Mar 2026 00:00:00 GMT

ID

내 프로필은 여기 있다. https://bsky.app/profile/euroka.moe

이 링크는 2개로 나눌 수 있다. bsky.app 앱뷰, euroka.moe 핸들. 그런데...

왜 도메인 형식을 지닐까?
PDS를 변경해도 핸들은 왜 같을까?
핸들을 변경해도 어떻게 게시글 등은 유지될까?

DID

이때 DID가 등장한다. Decentralized ID의 약자로, DID 종류(메서드)에 따라 탈중앙화된 식별자를 고유하게 생성한다. 180개 이상의 DID 종류가 있지만, ATProto에서 사용하는 DID는 두 가지가 있다.

did:web

did:web은 자신의 DID document를 .well-known/did.json 경로에 둔다. did:web:euroka.moe의 경우 https://euroka.moe/.well-known/did.json에 있는 것이다.

[!NOTE] 내 DID는 did:web을 쓰지 않는다! 예시용일 뿐이니 참고 바란다.

장점은,

탈중앙화에 더 가깝다.

DNS를 신뢰해야 한다는 문제가 있지만, 이건 뭐 어쩔 수 없지 않나. 공인되고 검증된 기관이 운영한다는 것에 기대는 게 그나마 나을 것이다.

did가 직관적이다.

did:plc:qjua73d5eq537nio2sucdaj3와 did:web:euroka.moe 중 기억하기 쉬운 것을 고르라 하면 당연히 후자 아닌가?

하지만 단점이 상당하다.

도메인의 .well-known/did.json 접근에만 의존한다.

도메인 만료, 호스팅 업체의 변덕, 레코드 작성 실수, 모든 것은 DID document의 제어권 유실로 이어진다. 그리고 DID document의 제어권 유실은 signing 키나 PDS 변경, 핸들(DID document의 alsoKnownAs 값) 등을 불가능하게 만든다. HTTPS 인증서 주던 CA가 터졌다? 다른 CA에서 인증서 받아오기 전까진, DID document는 다른 사람들에게 보이지 않게 되고, DID document가 없으니 존재하지 않는 자가 된다. 게시글, 팔로우 기록, 등등. 이것들은 존재하지 않는 사람이 한 것으로 나온다.

did:plc

did:plc는 제일 간결하고 탈중앙화는 아니지만 타협적인 방법이다. PLC Dictionary라는 중앙화된 원장에 저장한다. 그리고 이걸 REST API로 모두에게 공개한다. 감사 로그와 키 서명 검증을 통하여 투명성을 확보하지만, 그렇다고 완전히 염려가 없는 것은 아니다. 하지만, 이는 매우 큰 장점이 있다.

도메인의 사용처를 alsoKnownAs를 채우는 데만 쓰는 게 가능하다. PLC Directory가 망하지 않는 이상, 도메인이 털려도 PLC Directory는 털리지 않으니 원래 있던 recovery 키로 alsoKnownAs를 수정하면 그만이다. 이 장점 덕분에 절대 다수의 유저들은 did:plc를 사용한다.

DID의 검증

PDSls 서비스에서 DID document를 보기 쉽게 확인할 수 있다. 여기서 Identity 탭의 Aliases 항목을 보자.

이는 DID document의 alsoKnownAs를 알려주는 곳이다. DNS (TXT record) 항목에서 did:plc:qjua73d5eq537nio2sucdaj3가 적혀임을 알 수 있다. DID document에서 did:plc:qjua...가 euroka.moe를 통제한다고 주장한다. 주장일 뿐이고, 인증되지 않았다. 이제 euroka.moe가 did:plc:qjua...를 통제한다고 주장하면 상호 통제 상태가 되고, 즉 같은 사람에게 제어받는다 생각할 수 있다.

핸들의 ${핸들}/.well-known/atproto-did 파일을 확인해서 검증할 수도 있지만, 이는 예시로 쓸 사용자가 없어 생략한다.

서버 배포를 쌀먹하기 w. Hono

Sat, 07 Mar 2026 00:00:00 GMT

돈벌기

돈이 없다. 이것은 학생의 숙명이다. 프리티어를 떠도는 노마드의 삶이다. 그런데 코딩을 하면 배포할 일이 생긴다. 당연한 거 아닌가. 배포를 그럼 git clone하라고 할 수도 없지 않나.

FaaS/서버리스

서버리스의 장점은 그것이다. 24/7이 필요하긴 한데, 굳이 막 항상 사람이 들어오는 건 아닌 사이트 많지 않나? 그런 상황이 많다. 서버리스는 그 상황에 딱 맞는다. 트래픽 없다? 서버 내릴게. 서버 내려? 돈 안뺄게.

Azure Functions

Azure Functions는 마이크로소프트의 서버리스 플랫폼이다.

장점:

언어 독립적이다, 안 되면 커스텀 핸들러로 어떻게든 된다
SLA가 있다(무료티어 포함)
무료 티어도 있고 학생 크레딧을 쓸 수 있다

단점:

하드캡이 없다. 카드 넣어야 한다
콜드 스타트가 좀 걸린다
저장공간은 또 다른 서비스 써야 한다
~~꽤 고립적이다~~ Hono가 지원

Cloudflare Workers

Cloudflare Workers는 JS를 지원하는 FaaS이다.

장점:

빠른 콜드 스타트(0ms!!!!)
무료티어 넘어가면 청구 없이 터진다(Paid 플랜 업그레이드하지 않으면)
CI/CD를 CF에서 제공한다(=Github Action 요금 낼 필요 없다, 워크플로우 짤 필요 없다)
분당 1000회 무료 티어
다른 WinterTC 계열 서비스 대비 더 넉넉하다

단점:

JS와 WASM 컴파일을 지원하는 일부 언어만 가능하다
Github Action은 어짜피 퍼블릭레포 무제한 무료라 굳이...?
런타임은 Node.JS와 거리가 멀다, DOM 없다
CPU 타임이 제한적이다(무료플랜 10ms/콜)

Deno Deploy

Deno Deploy는 Cloudflare Workers와 유사한 FaaS 호스팅 서비스다.

장점:

Cloudflare Workers 대비 넉넉한 CPU 타임(15h/월)
빠른 콜드 스타트
셋업하기 쉽다(import { Hono } from "jsr:hono", TypeScript OOTB 지원 등)
제일 JS스럽고, 배워야 할 자체 개념이 적다

단점:

JS/TS만 지원한다
카드 등록이 필요하다(업그레이드하기 전까진 billing X)
Cloudflare Workers 대비 물리적 인프라가 떨어진다
다들 Cloudflare 계정은 있지만 Deno Deploy는 없는 경우도 있다

Hono

"신"

Hono는 각종 FaaS 프로바이더를 위한 프레임워크다. 지원하는 실행 환경은...

Node.js
Deno(Deno Deploy 포함)
Bun
WebAssembly
Service Worker

이러하다. 또 호스팅은 이 플랫폼들을 지원한다.

Cloudflare Workers, Cloudflare Pages
Fastly Compute
Vercel, Netlify
Next.js
AWS Lambda, Lambda@Edge
Azure Functions
Google Cloud Run
Supabase Functions
Ali Function Compute

이 무슨 개얼탱없는 라인업이란 말인가. 당장 써야지. 원래 FaaS 서비스들은 꽤 벤더 종속적이다. 벤더에서 제공한 API를 쓰게 되는데, 이러면 다른 곳으로 마이그레이션하기 상당히 어렵다.

// Cloudflare Workers, ES Modules 문법
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const name = url.searchParams.get('name');

    if (name) {
      return new Response(`Hello, ${name}! Welcome to Cloudflare Workers.`, {
        status: 200,
        headers: {
          'Content-Type': 'text/plain; charset=utf-8',
        },
      });
    } else {
      return new Response('Hello World! This is Cloudflare Workers.', {
        status: 200,
        headers: {
          'Content-Type': 'text/plain; charset=utf-8',
        },
      });
    }
  },
};

// Azure Functions
export async function serve(context, req) {
  context.log('HTTP trigger function processed a request.');

  const name = req.query.name || (req.body && req.body.name);

  if (name) {
    context.res = {
      status: 200,
      body: `Hello, ${name}! Welcome to Azure Functions.`
    };
  } else {
    context.res = {
      status: 200,
      body: 'Hello World! This is Azure Functions.'
    };
  }
};
export default serve;

네이티브 API를 쓰면 벌써 코드가 다르다. CF Workers는 함수를 객체에 담아 export default하고, 그 함수는 Response 객체를 리턴한다. 하지면 Azure Functions는 함수가 context.res를 수정한다.

그런데 그때, Hono가 등장한다...

import { Hono } from 'hono';

type Env = {
  Bindings: Record<string, unknown>;
};

const app = new Hono<Env>();

// POST 요청 처리 예제
app.post('/api/hello', async (c) => {
  const body = await c.req.json<{ name?: string }>();
  const name = body.name || 'World';

  return c.json({
    message: `Hello, ${name}!`,
    method: 'POST',
    framework: 'Hono',
  });
});

export default app;

이거, 어디선가 본 패턴이지 않은가?

import express, { Request, Response } from 'express';

const app = express();

app.use(express.json());

app.post('/api/hello', (req: Request, res: Response) => {
  const body = req.body as { name?: string };
  const name = body.name || 'World';

  res.json({
    message: `Hello, ${name}!`,
    method: 'POST',
    framework: 'Express',
  });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

export default app;

Express.js와 매우 유사하다. 선언적이고, 자유분방하다. 게다가 타입스크립트를 염두하고 만들어졌기 때문에,

//...
const app=new Hono()
    .post("/post", ...)
    .get("/get", ...);
export default app;

이와 같은 방식으로 메서드 체인을 걸면, app의 타입 자체에 라우트 정보가 작성된다. 이는 RPC나 테스팅 시 매우 유용하다.

개인 사용을 위해 Hono용 템플릿을 작성해두었다.

안녕 세계

Sat, 21 Feb 2026 00:00:00 GMT

안녕! 👋 오늘부터 블로그를 시작합니다.

작은 스크립트 파일은 Deno를 쓰는 것에 대하여

Sat, 21 Feb 2026 00:00:00 GMT

Node.js에서의 타입스크립트

Node.js에서 타입스크립트를 쓰려면, 3가지 방법이 있다.

타입스크립트용 REPL을 사용한다.
- tsx 패키지를 설치해야 한다.
- tsx 명령어로 타입스크립트 코드를 실행시킨다.
타입스크립트 프로젝트를 생성한다.
- tsconfig.json 파일을 만들어야 한다.
- esbuild나 tsc로 타입스크립트를 자바스크립트로 컴파일해야 한다.
- 그렇기에, package.json과 node_modules도 필요하다.
- 컴파일된 자바스크립트 파일을 실행해야 한다.
Node.js를 믿는다.
- 일단 타입스크립트 파일을 실행시킨다.
- Node.js의 --strip-types를 믿고 실행한다.
- strip 가능한 코드가 아니라면서, 에러가 난다.
- 이제 --experimental-transform-types를 쓴다.
- 매번 플래그 넘겨주려니까 귀찮다.
- 결국 tsx를 설치한다.

> 서기관 셰럼, 이건 좀 너무한다고 생각함.

그럼 타입스크립트 왜씀?

타입스크립트는 자바스크립트보다 빌드 타임에 많은 정보를 알게 된다. 이곳에서 오는 크나큰 장점이 있다.

자동완성

JS는 object의 프로퍼티가 무엇인지 알 수 없다. 그래서 자동완성이 안된다.

TS는 정보를 .ts 파일이나 .d.ts 파일에 모두 담아놓는다. number에는 toFixed가 있고, string에는 toUpperCase가 있다는 것을 알고 있다. toUpperCase는 파라미터를 아무것도 받지 않은 ()=>string 타입의 함수임을 lib.d.ts에 적어놓는다.

JS는 이상한 기교가 있다. 빈 배열과 느낌표, 더하기, 이상한 기호 몇 개로 모든 코드를 만들 수 있다.

[]+[] // ""
[]+{} // "[object Object]"
{}+[] // 0
{}+{} // NaN

이 무슨 쓰레기 언어란 말인가. 타입스크립트 안 쓸 이유가 없지 않나?

> 정체성의 유령도 한물 두물 세물 간 자바스크립트를 버리고 타입스크립트에 어울리는...

빨간약

하지만 타입스크립트는 딱 하나의 문제점이 있다. 결국 실행을 못 한다.

> 으에엥 타입스크립트 네르지 마세요

그러면 타입스크립트 코드를 자바스크립트 코드로 변환하고, 실행하고, 그걸 반복하면 되지 않을까? 가능하다. Node.js의 --strip-types가 비슷하게 한다. 하지만 이는 const enum과 같은 일부 기능을 지원하지 않는다. --experimental-transform-types 플래그를 써야 한다. 하지만 이름에서 알 수 있듯이 이는 실험적이다. 언제 터져도 이상하지 않다는 것이다.

그렇게 엄청 간단하지는 않은 스크립트

예시로, hello.ts라는 파일을 만들어보자.

console.log("Hello, world!");

이는 충분히 간단하다. tsx로도 실행할 수 있다. 하지만, 조금 복잡한 스크립트는 어떨까?

// openai.ts
const prompt='"크아앙"\n투명드래곤이 울부짖었다.\n\n이 다음 소설의 내용을 이어서 써줘.';

const response = await fetch("https://api.openai.com/v1/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`,
  },
  body: JSON.stringify({
    model: "gpt-5-mini",
    messages: [{ role: "user", content: prompt }],
  }),
});
const data = await response.json();

> 한 동인지 작가의 흑역사를 드러내고 있다.

조금 복잡해진다. 이제 스트리밍도 추가해볼까?

// openai.ts
const prompt='"크아앙"\n투명드래곤이 울부짖었다.\n\n이 다음 소설의 내용을 이어서 써줘.';
const response = await fetch("https://api.openai.com/v1/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`,
  },
  body: JSON.stringify({
    model: "gpt-5-mini",
    messages: [{ role: "user", content: prompt }],
    stream: true,
  }),
});
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = new TextDecoder().decode(value);
  console.log(chunk);
}

물론 여기서 저 청크 하나하나도 JSON이니까, JSON.parse를 해야 한다. 메세지 델타들에 대해 조금씩 출력하고, 메세지 끝에 도달했는지 확인하는 로직도 필요하다.

Deno를 쓰세요

tsx는 Node.js다. 라이브러리를 설치하려면, node_modules에 넣어야 한다. 방법은? pnpm add와 package.json 관리, 그리고 기타 귀찮은 파일 관리를 해야 한다.

Deno는 Deno다. 라이브러리를 사용하려면,

import OpenAI from 'jsr:@openai/openai';

이 얼마나 간결한가. Deno로 위 예시를 다시 짜 보자.

import OpenAI from "jsr:@openai/openai";

const client = new OpenAI();

const stream = await client.responses.create({
  model: "gpt-5-mini",
  input: '"크아앙"\n투명드래곤이 울부짖었다.\n\n이 다음 소설의 내용을 이어서 써줘.',
  stream: true,
});

for await (const event of stream) {
  console.log(event);
}

타입스크립트? Deno는 된다.

> 긴긴-팔다리의 출몰에 정신을 잃은 셰럼

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Fabrizz/MMM-OnSpotify"}

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Expressive Code Example

Wed, 10 Apr 2024 00:00:00 GMT

Here, we'll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code

Syntax Highlighting

Regular syntax highlighting

console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

Editor & Terminal Frames

Code editor frames

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Overriding frame types

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers

Marking full lines & line ranges

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Adding labels to line markers

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Adding long labels on their own lines

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Using diff-like syntax

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

Combining syntax highlighting with diff-like syntax

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

Marking individual text inside lines

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Regular expressions

console.log('The words yes and yep will be marked.')

Escaping forward slashes

echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

Word Wrap

Configuring word wrap per block

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Configuring indentation of wrapped lines

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Collapsible Sections

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers

Displaying line numbers per block

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number

console.log('Greetings from line 5!')
console.log('I am on line 6')

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili