아올다 블로그 작성 가이드

이 포스트는 블로그 작성 시 사용할 수 있는 모든 기능과 컴포넌트를 정리한 가이드입니다.

기본 마크다운 문법

텍스트 서식

굵은 글씨, 기울임 글씨, ~~취소선~~, 그리고 인라인 코드를 사용할 수 있습니다.

인용문은 이렇게 작성합니다.

여러 줄로도 사용 가능합니다.

첫 번째 항목
두 번째 항목
세 번째 항목

순서 없는 목록 A
순서 없는 목록 B
- 중첩 목록

표

기능	설명	지원 여부
마크다운	기본 마크다운 문법	지원
MDX	JSX 컴포넌트 사용	지원
KaTeX	수식 렌더링	지원

링크와 이미지

외부 링크 예시로 이동할 수 있으며, 이미지도 삽입 가능합니다.

약어

TIL처럼 약어에 마우스를 올리면 설명을 볼 수 있습니다.

키보드 컴포넌트

Ctrl + C로 복사, Ctrl + V로 붙여넣기와 같이 키보드 컴포넌트를 사용할 수 있습니다.

동작	Windows/Linux	Mac
복사	`Ctrl` + `C`	`Cmd` + `C`
붙여넣기	`Ctrl` + `V`	`Cmd` + `V`
실행취소	`Ctrl` + `Z`	`Cmd` + `Z`
저장	`Ctrl` + `S`	`Cmd` + `S`

코드 블록 (Expressive Code)

인라인 문법 강조도 지원됩니다: console.log("안녕하세요")

기본 코드 블록

function greet(name: string): string {
  return `안녕하세요, ${name}님!`
}

console.log(greet('아올다'))

Diff 하이라이트 (줄 단위)

ins와 del 속성으로 추가/삭제된 줄을 표시할 수 있습니다.

1
const config = {
2
  theme: 'light',
3
  theme: 'dark',
4
}

Diff 하이라이트 (diff 언어)

diff 언어와 lang 속성을 조합하면 +/- 접두사로 diff를 표현할 수 있습니다.

1
app.configure("api-key-string");
2
await app.configure({ key: "api-key-string", version: "2.0" });
3

4
app.on('event', callback);
5
app.on('event', { handler: callback, options: { once: true } });

줄 하이라이트 및 접기

1
def fibonacci(n):
2
    if n <= 0:
3
        return 0
4
    elif n == 1:
5
        return 1
5 collapsed lines
6
    # 재귀적으로 피보나치 수를 계산합니다
7
    # 이 방식은 시간복잡도가 O(2^n)입니다
8
    # 메모이제이션을 사용하면 O(n)으로 개선할 수 있습니다
9
    # 아래는 단순 재귀 구현입니다
10
    # 큰 수에서는 비효율적입니다
11
    return fibonacci(n - 1) + fibonacci(n - 2)

키워드 하이라이트 및 주석 블록

키워드를 따옴표로 감싸면 해당 단어가 강조되고, ins="키워드", del="키워드"로 키워드 단위 diff도 가능합니다. {"주석":줄범위} 문법으로 주석 블록을 추가할 수 있습니다.

100
// <- 이 코드블록은 100번째 줄부터 시작합니다!
101

102
// 이 줄은 diff 추가로 표시됩니다
103
// 이 줄은 diff 삭제로 표시됩니다
104
// 이 줄은 하이라이트됩니다
105

106
// "added" 키워드는 초록색으로 표시됩니다
107
// "deleted" 키워드는 빨간색으로 표시됩니다
108
// "awesome" 키워드는 파란색으로 표시됩니다
109

110
// 주석을 달고 싶은 코드 위에 빈 줄을 삽입하세요 (겹침 방지)
111

112
function demonstrateFeatures() {
113
  console.log('Hello world!')
114
  return true
115
}
116

5 collapsed lines
117
// 아래 줄들은 접을 수 있습니다
118
interface HiddenConfig {
119
  name: string
120
  age: number
121
  email: string
122
}

터미널 프레임

$ npm install astro
$ npm run dev

수식 (KaTeX)

인라인 수식: $E = mc^2$

블록 수식:

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

행렬도 표현 가능합니다:

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

Callout 컴포넌트

Callout은 세 가지 props를 지원합니다.

Prop	설명	기본값
`title`	Callout의 제목	`undefined`
`variant`	Callout의 종류	`"note"`
`defaultOpen`	`<details>` 기본 열림 여부	`true`

일반 Callout 목록

Variant	용도
Note	일반적인 정보나 참고 사항
Tip	유용한 조언이나 단축키
Warning	잠재적인 문제나 주의사항
Danger	치명적이거나 위험한 사항
Important	독자의 이해에 중요한 사항

학술용 Callout 목록

Variant	용도
Definition	용어나 개념의 정의
Theorem	증명된 수학적/논리적 명제
Lemma	정리 증명에 사용되는 보조 정리
Proof	정리나 보조 정리의 논리적 증명
Corollary	정리에서 직접 따르는 결과
Proposition	정리보다 약한 중요한 명제
Axiom	증명 없이 받아들이는 기본 가정
Conjecture	참이라고 믿어지는 미증명 명제
Notation	수학적 표기법 설명
Remark	추가적인 코멘트나 관찰
Intuition	개념의 직관적 이해
Recall	이전에 다룬 내용 상기
Explanation	심층적인 설명이나 해설
Example	구체적인 예시나 유추
Exercise	연습 문제나 과제
Problem	풀이가 필요한 문제
Answer	간단한 답변
Solution	상세한 풀이 과정
Summary	핵심 내용 요약

일반 Callout 예시

Note (참고)

일반적인 정보를 전달할 때 사용합니다.

Tip (팁)

Ctrl + Alt + F (Windows/Linux) 또는 Cmd + Option + F (Mac)로 코드를 빠르게 포맷할 수 있습니다.

동작	Windows/Linux	Mac
검색	`Ctrl` + `F`	`Cmd` + `F`
바꾸기	`Ctrl` + `H`	`Cmd` + `H`
모두 저장	`Ctrl` + `Alt` + `S`	`Cmd` + `Option` + `S`

Warning (주의)

이 API는 Internet Explorer에서 지원되지 않으며, 구형 브라우저에서 제한적으로 동작합니다.

1
if (!Object.fromEntries) {
2
  Object.fromEntries = function (entries) {
3
    const obj = {}
4
    for (const [key, value] of entries) {
5
      obj[key] = value
6
    }
7
    return obj
8
  }
9
}

Danger (위험)

이 명령어를 실행하면 현재 디렉토리의 모든 파일이 영구적으로 삭제됩니다.

rm -rf ./*

이 작업은 되돌릴 수 없습니다.

Important (API 변경사항)

v2.0에서 중요한 API 변경이 있습니다.

configure() 메서드가 Promise를 반환합니다
인증에 API 키 객체가 필요합니다

1
app.configure("api-key-string");
2
await app.configure({ key: "api-key-string", version: "2.0" });
3

4
app.on('event', callback);
5
app.on('event', { handler: callback, options: { once: true } });

중첩 Callout 예시

Exercise (곱의 미분법)

$f(x) = x^3 \sin(x)$ 의 도함수를 구하세요.

Answer

\frac{d}{dx}[x^3 \sin(x)] = 3x^2 \sin(x) + x^3 \cos(x)

접힌 Callout

Summary (이 포스트의 요약)

이 포스트에서는 마크다운 서식, <kbd> 키보드 입력, Expressive Code 코드 블록(diff, 키워드 하이라이트, 주석 블록, 캡션 등), KaTeX 수식, 그리고 전체 Callout 컴포넌트 목록을 다루었습니다.