Notion의 블록들이 사이트에서 어떻게 그려지는지 한자리에 모았습니다. 이 페이지 자체가 Notion으로 쓰였고, 보시는 결과가 folionote의 렌더링입니다.
제목 1은 이렇게 나옵니다
제목 2는 이렇게 나옵니다
제목 3은 이렇게 나옵니다
본문에서 글자색과 배경색(형광펜)을 함께 씁니다. 굵게, 기울임, 취소선, 밑줄,
인라인 코드도 그대로 따라갑니다.목록
- 번호 목록 첫째
- 번호 목록 둘째
- 중첩된 번호 목록
- 번호 목록 셋째
- 불릿 목록
- 중첩도 됩니다
- 한 단계 안쪽
- 두 단계 안쪽
체크리스트는 상태 그대로 보입니다
렌더링 맞추기
아직 안 한 것
토글
토글 안에는 어떤 블록이든 들어갑니다
목록과 코드를 함께 넣어 봤습니다.
- 첫 번째
- 두 번째
TypeScript
const config = { rootNotionPageId: '3bcc0343b4fa81abafd4f7fb22799e14' }콜아웃
파랑 콜아웃입니다. Notion에서 고른 색과 아이콘이 사이트에도 같은 색으로 나옵니다.
노랑 콜아웃입니다. 주의사항을 적을 때 씁니다.
빨강 콜아웃입니다. 하면 안 되는 것을 적습니다.
회색 콜아웃입니다. 참고 링크나 덧붙이는 설명에 어울립니다.
인용과 구분선
인용문은 왼쪽에 세로선이 붙고 본문보다 조금 크게 나옵니다. 여러 줄도 한 블록으로 유지됩니다.
코드 블록
마우스를 올리면 복사 버튼이 나타나고, 언어별 문법 하이라이팅이 붙습니다.
Kotlin
fun main() {
val greeting = "Notion을 웹으로"
println(greeting)
}TypeScript
export default siteConfig({
rootNotionPageId: '3bcc0343b4fa81abafd4f7fb22799e14',
name: 'folionote',
navigationStyle: 'custom'
})Bash
gh repo fork nobel6018/folionote --clone
cd folionote && pnpm install
PORT=3010 pnpm dev수식
이차방정식 의 근은 다음과 같습니다.
이미지와 컬럼
북마크와 임베드
아랫쪽 반응형 임베드 둘과 달리, 링크는 본문 중간에도 이러게 들어갑니다.
표
블록 | 지원 | 메모 |
코드 블록 | O | 하이라이팅과 복사 버튼 |
수식 | O | 인라인과 블록 모두 |