이 페이지는 Wiki.js에서 지원하는 모든 마크다운 요소의 렌더링을 확인하기 위한 테스트 페이지입니다.
This page is a test page to verify the rendering of all markdown elements supported by Wiki.js.
¶ 가장 큰 제목 H1
가장 큰 제목 하위에 오는 H1 아래의 텍스트입니다.
¶ 1. 제목 / Headings
아래는 H2부터 H6까지의 제목입니다. (H1은 페이지 타이틀로 자동 렌더링됩니다.)
Below are headings from H2 to H6. (H1 is automatically rendered as the page title.)
¶ H3 제목 / H3 Heading
가장 H3 아래의 텍스트입니다.
¶ H4 제목 / H4 Heading
가장 H4 아래의 텍스트입니다.
¶ H5 제목 / H5 Heading
가장 H5 아래의 텍스트입니다.
¶ H6 제목 / H6 Heading
가장 H6 아래의 텍스트입니다.
¶ 2. 본문 텍스트 / Paragraph Text
이것은 첫 번째 문단입니다. Wiki.js에서 일반 텍스트가 어떻게 렌더링되는지 확인합니다.
This is the first paragraph. We check how plain text is rendered in Wiki.js.
이것은 두 번째 문단입니다. 문단 사이의 간격을 확인할 수 있습니다. 마크다운에서 빈 줄 하나가 문단을 구분합니다.
This is the second paragraph. You can check the spacing between paragraphs. A single blank line separates paragraphs in Markdown.
이것은 세 번째 문단입니다. 여러 문단을 연속으로 작성하여 줄 간격과 가독성을 테스트합니다.
This is the third paragraph. Multiple consecutive paragraphs are written to test line spacing and readability.
이것은 네 번째 문단입니다. 긴 텍스트도 확인해봅니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is the fourth paragraph. Let's also check long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
이것은 다섯 번째 문단입니다. 마지막 문단으로 전체적인 흐름을 확인합니다.
This is the fifth paragraph. As the last paragraph, we check the overall flow.
¶ 3. 줄 바꿈 / Line Breaks
이 줄 끝에 공백 두 개가 있습니다.
그래서 같은 문단 내에서 줄이 바뀝니다.
이렇게 연속으로 줄 바꿈을 할 수 있습니다.
네 번째 줄입니다.
다섯 번째 줄입니다.
Two spaces at the end of this line.
So the line breaks within the same paragraph.
You can make consecutive line breaks like this.
This is the fourth line.
This is the fifth line.
¶ 4. 텍스트 서식 / Text Formatting
굵은 텍스트 / Bold text
기울임 텍스트 / Italic text
굵은 기울임 텍스트 / Bold italic text
취소선 텍스트 / Strikethrough text
인라인 코드 / Inline code
이 문장에는 굵은 글씨, 기울임, 취소선, 그리고 인라인 코드가 혼합되어 있습니다.
This sentence has bold, italic, strikethrough, and inline code mixed together.
¶ 5. 아래 첨자 & 위 첨자 / Subscript & Superscript
물의 화학식: H2O
Chemical formula of water: H2O
아인슈타인의 공식: E = mc2
Einstein's formula: E = mc2
이산화탄소: CO2
Carbon dioxide: CO2
X의 세제곱: X3
X cubed: X3
¶ 6. 키보드 키 / Keyboard Keys
복사: Ctrl + C
Copy: Ctrl + C
붙여넣기: Ctrl + V
Paste: Ctrl + V
저장: Ctrl + S
Save: Ctrl + S
macOS 복사: ⌘ Cmd + C
macOS Copy: ⌘ Cmd + C
터미널 종료: Ctrl + Shift + Q
Quit terminal: Ctrl + Shift + Q
¶ 7. 순서 없는 목록 / Unordered Lists
- 첫 번째 항목 / First item
- 두 번째 항목 / Second item
- 세 번째 항목 / Third item
- 네 번째 항목 / Fourth item
- 다섯 번째 항목 / Fifth item
- 여섯 번째 항목 / Sixth item
- 일곱 번째 항목 / Seventh item
¶ 중첩 순서 없는 목록 / Nested Unordered Lists
- 과일 / Fruits
- 사과 / Apple
- 바나나 / Banana
- 노란 바나나 / Yellow banana
- 초록 바나나 / Green banana
- 포도 / Grape
- 채소 / Vegetables
- 당근 / Carrot
- 감자 / Potato
- 감자튀김 / French fries
- 매쉬드 포테이토 / Mashed potato
- 양파 / Onion
- 유제품 / Dairy
- 우유 / Milk
- 치즈 / Cheese
¶ 8. 순서 있는 목록 / Ordered Lists
- 첫 번째 단계 / First step
- 두 번째 단계 / Second step
- 세 번째 단계 / Third step
- 네 번째 단계 / Fourth step
- 다섯 번째 단계 / Fifth step
- 여섯 번째 단계 / Sixth step
- 일곱 번째 단계 / Seventh step
¶ 중첩 순서 있는 목록 / Nested Ordered Lists
- 프로젝트 준비 / Project preparation
- 요구사항 분석 / Requirements analysis
- 기술 스택 선정 / Technology stack selection
- 프론트엔드 / Frontend
- 백엔드 / Backend
- 데이터베이스 / Database
- 일정 수립 / Schedule planning
- 개발 단계 / Development phase
- 설계 / Design
- 구현 / Implementation
- 코어 기능 / Core features
- 부가 기능 / Additional features
- 테스트 / Testing
- 배포 단계 / Deployment phase
- 스테이징 / Staging
- 프로덕션 / Production
¶ 혼합 목록 / Mixed Lists
- 첫 번째 순서 항목 / First ordered item
- 하위 비순서 항목 A / Sub unordered item A
- 하위 비순서 항목 B / Sub unordered item B
- 두 번째 순서 항목 / Second ordered item
- 하위 비순서 항목 C / Sub unordered item C
- 깊은 순서 항목 / Deep ordered item
- 깊은 순서 항목 / Deep ordered item
- 하위 비순서 항목 D / Sub unordered item D
- 하위 비순서 항목 C / Sub unordered item C
¶ 9. 체크박스 목록 / Task Lists
- 완료된 작업 / Completed task
- 이것도 완료 / This is also done
- 미완료 작업 / Pending task
- 아직 안 함 / Not yet done
- 코드 리뷰 / Code review
- 문서 작성 / Documentation
- 배포 / Deployment
¶ 10. 인용문 / Blockquotes
이것은 기본 인용문입니다.
This is a standard blockquote.
여러 줄의 인용문도 가능합니다.
이렇게 줄을 이어서 작성할 수 있습니다.
Multi-line blockquotes are possible.
You can continue lines like this.
중첩된 인용문
이것은 중첩된 인용문입니다.
This is a nested blockquote.세 번째 수준의 인용문입니다.
This is a third level blockquote.
¶ 11. 색상 Callout / Colored Callouts
정보 (Info): 이것은 파란색 정보 callout입니다. 유용한 참고 사항을 전달할 때 사용합니다.
This is a blue informational callout. Used to convey useful notes.
성공 (Success): 이것은 초록색 성공 callout입니다. 완료된 작업이나 성공적인 결과를 표시할 때 사용합니다.
This is a green success callout. Used to indicate completed tasks or successful outcomes.
경고 (Warning): 이것은 노란색 경고 callout입니다. 주의가 필요한 사항을 알릴 때 사용합니다.
This is a yellow warning callout. Used to communicate items that need caution.
위험 (Danger): 이것은 빨간색 위험 callout입니다. 치명적인 오류나 절대 하지 말아야 할 것을 표시할 때 사용합니다.
This is a red danger callout. Used to mark critical errors or things to absolutely avoid.
¶ 12. 링크 / Links
¶ 인라인 링크 / Inline Links
¶ 제목 포함 링크 / Links with Titles
¶ 자동 링크 / Auto Links
¶ 13. 이미지 / Images
¶ 기본 이미지 / Basic Image
¶ 크기 지정 이미지 / Image with Dimensions
¶ 14. 코드 블록 / Code Blocks
¶ 인라인 코드 / Inline Code
변수를 선언하려면 const myVar = "hello" 와 같이 작성합니다.
To declare a variable, write const myVar = "hello".
¶ JavaScript
// 자바스크립트 예제 / JavaScript example
function greet(name) {
const message = `안녕하세요, ${name}님! / Hello, ${name}!`;
console.log(message);
return message;
}
greet('World');
¶ Python
# 파이썬 예제 / Python example
def greet(name: str) -> str:
message = f"안녕하세요, {name}님! / Hello, {name}!"
print(message)
return message
greet("World")
¶ Bash
# 쉘 스크립트 예제 / Shell script example
echo "안녕하세요! / Hello!"
for i in {1..5}; do
echo "반복 $i / Iteration $i"
done
¶ TypeScript
// 타입스크립트 예제 / TypeScript example
interface User {
name: string;
age: number;
email?: string;
}
const user: User = {
name: "홍길동 / Hong Gildong",
age: 30,
};
¶ JSON
{
"이름": "위키",
"name": "wiki",
"version": "2.5",
"features": ["markdown", "mermaid", "plantuml"],
"enabled": true
}
¶ YAML
# YAML 설정 예제 / YAML config example
server:
host: localhost
port: 3000
database:
name: wikijs
connection: postgresql://localhost:5432/wiki
¶ SQL
-- SQL 쿼리 예제 / SQL query example
SELECT u.name AS 이름, u.email AS 이메일, COUNT(p.id) AS 게시글수
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.active = true
GROUP BY u.id
ORDER BY 게시글수 DESC
LIMIT 10;
¶ 언어 지정 없는 코드 블록 / Code Block Without Language
이것은 언어가 지정되지 않은 코드 블록입니다.
This is a code block without a specified language.
문법 강조가 적용되지 않습니다.
No syntax highlighting is applied.
¶ 15. 테이블 / Tables
¶ 기본 테이블 / Basic Table
| 이름 / Name | 나이 / Age | 직업 / Occupation |
|---|---|---|
| 홍길동 / Hong | 30 | 개발자 / Developer |
| 김영희 / Kim | 25 | 디자이너 / Designer |
| 이철수 / Lee | 35 | 매니저 / Manager |
| 박민수 / Park | 28 | 데이터 분석가 / Data Analyst |
| 최지은 / Choi | 32 | DevOps 엔지니어 / DevOps Engineer |
¶ 정렬 테이블 / Aligned Table
| 좌측 정렬 / Left | 중앙 정렬 / Center | 우측 정렬 / Right |
|---|---|---|
| 왼쪽 / Left | 가운데 / Center | 오른쪽 / Right |
| AAA | BBB | CCC |
| 긴 텍스트 예시 / Longer text example | 정렬 확인 / Check alignment | 12,345 |
¶ Dense 테이블 / Dense Table
| 키 / Key | 값 / Value | 설명 / Description |
|---|---|---|
host |
localhost |
서버 호스트 / Server host |
port |
3000 |
서버 포트 / Server port |
db |
wikijs |
데이터베이스 이름 / Database name |
ssl |
true |
SSL 사용 여부 / SSL enabled |
timeout |
30s |
타임아웃 / Timeout |
¶ 16. 수평선 / Horizontal Rules
위의 텍스트 / Text above
중간 텍스트 / Middle text
아래의 텍스트 / Text below
마지막 텍스트 / Last text
¶ 17. 각주 / Footnotes
Wiki.js는 강력한 마크다운 에디터를 제공합니다[1]. CommonMark 스펙을 완전히 지원하며[2], GFM 확장도 포함합니다[3]. 또한 독자적인 확장 문법도 있습니다[4].
Wiki.js provides a powerful markdown editor[1:1]. It fully supports the CommonMark spec[2:1] and includes GFM extensions[3:1]. It also has its own unique extension syntax[4:1].
¶ 18. 이모지 / Emojis
좋아요 축하 
생각 중 
완료 
버그 
이것은 한국어 탭의 내용입니다.
탭을 사용하면 같은 공간에 여러 가지 내용을 표시할 수 있습니다. 부모 제목에 {.tabset}을 추가하고, 자식 제목이 각각 탭이 됩니다.
console.log("한국어 탭입니다");
This is the content of the English tab.
Using tabs, you can display multiple pieces of content in the same space. Add {.tabset} to the parent heading, and each child heading becomes a tab.
console.log("This is the English tab");
これは日本語タブの内容です。
タブを使用すると、同じスペースに複数の内容を表示できます。
console.log("日本語タブです");
¶
¶ 20. 그리드 리스트 / Grid List
- 항목 1: 마크다운 기초 / Item 1: Markdown Basics
- 항목 2: Wiki.js 확장 / Item 2: Wiki.js Extensions
- 항목 3: Mermaid 다이어그램 / Item 3: Mermaid Diagrams
- 항목 4: 콘텐츠 관리 / Item 4: Content Management
- 항목 5: 사용자 권한 / Item 5: User Permissions
- 항목 6: 검색 최적화 / Item 6: Search Optimization
¶ 21. 링크 리스트 / Links List
- Wiki.js 공식 문서docs.requarks.io
Wiki.js의 공식 문서 사이트입니다. / Official documentation site for Wiki.js. - CommonMark 스펙spec.commonmark.org
마크다운의 표준 스펙을 정의합니다. / Defines the standard spec for Markdown. - GitHub Flavored Markdowngithub.github.com
GitHub에서 확장한 마크다운 문법입니다. / GitHub's extended Markdown syntax. - Mermaid 다이어그램mermaid.js.org
텍스트 기반 다이어그램 도구입니다. / A text-based diagramming tool.
¶ 22. Decorate 문법 / Decorate Syntax
아래 인용문에는 목록이 포함되어 있으며, Decorate 문법으로 callout 스타일을 지정합니다.
The blockquote below contains a list, and the Decorate syntax is used to apply a callout style.
주의할 점:
- 항목 1:
{.is-info}는 일반적으로 인용문에 적용됩니다.- 항목 2: 인용문 내 목록이 있으면 모호해질 수 있습니다.
- 항목 3: 이때 Decorate 문법이 유용합니다.
¶ 23. Mermaid 다이어그램 / Mermaid Diagrams
¶ 플로우차트 / Flowchart
¶ 시퀀스 다이어그램 / Sequence Diagram
¶ 클래스 다이어그램 / Class Diagram
¶ 상태 다이어그램 / State Diagram
¶ 간트 차트 / Gantt Chart
¶ 파이 차트 / Pie Chart
¶ ER 다이어그램 / ER Diagram
¶ 유저 여정 / User Journey
¶ Git 그래프 / Git Graph
¶ 24. PlantUML 다이어그램 / PlantUML Diagrams
¶ 25. HTML 인라인 요소 / HTML Inline Elements
형광펜으로 강조된 텍스트 / Highlighted text with mark tag
HTML은 웹 페이지의 구조를 정의합니다.
HTML defines the structure of web pages.
접기/펼치기 클릭 (Click to expand)
이것은 접힌 콘텐츠입니다. 클릭하면 펼쳐집니다.
This is collapsed content. Click to expand.
- 숨겨진 항목 1 / Hidden item 1
- 숨겨진 항목 2 / Hidden item 2
- 숨겨진 항목 3 / Hidden item 3
¶ 26. 복합 콘텐츠 / Complex Combined Content
Below is a complex example combining multiple markdown elements.
¶ Wiki.js
| 기능 / Feature | 지원 여부 / Supported |
|---|---|
| 마크다운 / Markdown | |
| Mermaid | |
| PlantUML | |
| 실시간 편집 / Live Edit | |
| Git 연동 / Git Sync | |
¶ Notion
| 기능 / Feature | 지원 여부 / Supported |
|---|---|
| 마크다운 / Markdown | |
| Mermaid | |
| PlantUML | |
| 실시간 편집 / Live Edit | |
| Git 연동 / Git Sync | |
¶
위 탭에서 두 플랫폼의 기능을 비교할 수 있습니다. Wiki.js가 개발자 친화적인 기능을 더 많이 제공합니다.
You can compare the features of both platforms in the tabs above. Wiki.js provides more developer-friendly features.
¶ 관련 문서
- Wiki.js 공식 문서docs.requarks.io
Wiki.js의 전체 기능과 설정에 대한 공식 문서입니다. - CommonMark 스펙spec.commonmark.org
마크다운의 표준 문법을 정의하는 공식 스펙입니다. - Mermaid Documentationmermaid.js.org
텍스트 기반 다이어그램 도구 Mermaid의 공식 문서입니다.
Wiki.js Markdown Editor - https://docs.requarks.io/editors/markdown ↩︎ ↩︎
CommonMark Spec - https://spec.commonmark.org/ ↩︎ ↩︎
GitHub Flavored Markdown - https://github.github.com/gfm/ ↩︎ ↩︎
Wiki.js 고유 확장 문법에는 Callout, Tabset, Links List 등이 포함됩니다. / Wiki.js unique extensions include Callout, Tabset, Links List, etc. ↩︎ ↩︎