Code Block UI 데모

블로그에서 사용가능한 요소들을 시연하기 위한 샘플 포스트입니다.

목차

프론트 매터에 toc: true 옵션이 켜져 있으면 포스트의 오른편에 따라오는 목차가 생성됩니다.

이미지

아래 예제들은 포스트 디렉토리의 원본 이미지를 기준으로 작성합니다. test1.png처럼 쓰면 빌드 후 /assets/posts/.../test1-post.webp가 본문용 이미지로 표시되고, 클릭 시 원본 이미지 정보와 다운로드 버튼이 포함된 모달이 열립니다.

단일 이미지

슬라이드쇼

이미지 그리드

코드블록

아래는 다양한 옵션이 적용된 코드블록 예제입니다. 사용가능한 옵션들은 다음과 같습니다:

• ’# title: [제목]’ : 코드블록 상단에 제목을 표시합니다.
• ’# line: [줄 번호]’ : 코드블록의 첫 줄 번호를 지정합니다.
• ’# noline’ : 해당 줄부터 다음 ‘# line’ 옵션이 나올 때까지 줄 번호를 표시하지 않습니다.
• ’# ellipsis’ : 해당 줄부터 다음 ‘# line’ 옵션이 나올 때까지 줄 번호 대신 ‘…‘을 표시합니다.
• ’# collapse’ : 코드블록을 기본적으로 접힌 상태로 만듭니다.

# title: Default (linenos on, start 1)
# line: 1
#include <iostream>

int main() {
    std::cout << "Hello" << std::endl;
    return 0;
}

# title: Offset start=100
# line: 100
int add(int a, int b) {
    return a + b;
}

int main() {
    int x = add(1, 2);
    return x;
}

# title: Line numbers off
struct Vec2 {
    float x;
    float y;
};

int main() {
    Vec2 v{1.0f, 2.0f};
    return 0;
}

# title: Custom start=56
# line: 56
// Demonstrate that the header language label can be overridden.

class Foo {
public:
    void run() const {}
};

Inline lineno markers example

This example shows how you can place inline line-number markers inside the code to change numbering mid-block. The marker syntax now requires # at the line start:

• # title: My Title
• # line: N to set the next line’s number
• # noline to suspend numbering until the next # line:
• # ellipsis to show ... in the gutter

The marker line itself does not receive a line number.

# title: Inline lineno demo
# collapse
// noline and ellipsis markers are shown below to demonstrate behavior
#include <iostream>

int main() {
    std::cout << "First section" << std::endl; // regular lines start at 1
}
# noline

# ellipsis

# line: 100
// now numbering should continue from 100
int f() { return 42; }
# noline

# ellipsis

# line: 200
// now numbering should continue from 200
int g() { return 43; }

Download UI Demo

다운로드를 위한 UI입니다. uri 옵션에 다운로드할 파일의 경로를 지정하면 됩니다. name 옵션을 추가로 지정하면 다운로드할 때 파일 이름이 name으로 지정됩니다. name이 없으면 uri의 마지막 부분이 파일 이름으로 사용됩니다.