Single Mode Example
한 개의 md파일에서 테스트.
남중구 (핀프라)
nowage@gmail.com
기본 텍스트 스타일
- 이것은 기본 리스트 아이템입니다.
- 굵은 글씨와 *이탤릭체*를 지원합니다.
인라인 코드도 사용할 수 있습니다.- > 인용문(Blockquote) 스타일입니다.
중첩 리스트
- 레벨 1
- 레벨 2
- 레벨 3
- 레벨 4
- 레벨 3
- 레벨 2
번호 있는 리스트
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 중첩된 항목 1
- 중첩된 항목 2
JavaScript 코드 예시
function helloWorld() {
console.log("Hello, m2Slide!");
const number = 42;
return number * 2;
}Python 코드 예시
def fibonacci(n):
if n <= 1:
return n
else:
return fibonacci(n-1) + fibonacci(n-2)
print(fibonacci(10))플로우차트 (Flowchart)
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Great!]
B -- No --> D[Debug]
D --> B
시퀀스 다이어그램 (Sequence Diagram)
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
클래스 다이어그램 (Class Diagram)
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal : +isMammal()
Animal : +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
개요
- 테스트 용도
- 중간 노드임.
이미지 Only
기본 이미지 배치 (Scenery)
- 이미지 아래 텍스트
리스트 Only
- 매출이 상승하고 있습니다.
- 1분기 대비 2분기 20% 성장
- 3분기 예측치 달성 무난
- 이미지가 있을 때 텍스트가 어떻게 배치되는지 확인
리스트 Only[서브 Chapter 테스트용.]
- 매출이 상승하고 있습니다.
- 1분기 대비 2분기 20% 성장
- 3분기 예측치 달성 무난
- 이미지가 있을 때 텍스트가 어떻게 배치되는지 확인
이미지와 리스트 (Chart)
- 매출이 상승하고 있습니다.
- 1분기 대비 2분기 20% 성장
- 3분기 예측치 달성 무난
- 이미지가 있을 때 텍스트가 어떻게 배치되는지 확인
2분할 레이아웃 - 1단계
- 왼쪽 텍스트 영역
-HTML DIV 태그를 사용하여
-원하는 레이아웃을 직접 구성할 수 있습니다.
-flexbox 스타일을 활용하세요.
2분할 레이아웃 - 1단계 [좌이미지]
- 왼쪽 텍스트 영역
-HTML DIV 태그를 사용하여
-원하는 레이아웃을 직접 구성할 수 있습니다.
-flexbox 스타일을 활용하세요.
2분할 레이아웃 - 2단계
- 왼쪽 텍스트 영역
-HTML DIV 태그를 사용하여
-원하는 레이아웃을 직접 구성할 수 있습니다.
-flexbox 스타일을 활용하세요.
2분할 레이아웃 (좌: 텍스트 / 우: 이미지) - Pandoc 펜스 div
- 왼쪽 텍스트 영역
- HTML DIV 태그를 사용하여
- 원하는 레이아웃을 직접 구성할 수 있습니다.
- flexbox 스타일을 활용하세요.
3분할 레이아웃 (카드 형태) - Pandoc 펜스 div
- 왼쪽 텍스트 영역
- HTML DIV 태그를 사용하여
- 원하는 레이아웃을 직접 구성할 수 있습니다.
- flexbox 스타일을 활용하세요.
2분할 레이아웃 (좌: 텍스트 / 우: 이미지) - dev
왼쪽 텍스트 영역
- HTML DIV 태그를 사용하여
- 원하는 레이아웃을 직접 구성할 수 있습니다.
- flexbox 스타일을 활용하세요.
3분할 레이아웃 (카드 형태) - div
Card 1
첫 번째 카드의 내용입니다.
Card 2
두 번째 카드의 내용입니다.
Card 3
세 번째 카드의 내용입니다.
기본 테이블
| 헤더 1 | 헤더 2 | 헤더 3 |
|---|---|---|
| 왼쪽 정렬 | 중앙 정렬 | 오른쪽 정렬 |
| 데이터 1 | 데이터 2 | 데이터 3 |
| 내용 A | 내용 B | 내용 C |
이미지가 포함된 테이블
| 아이콘 | 이름 | 설명 |
|---|---|---|
 | Robot | AI Assistant |
| User | Human Operator |
| System | Control Unit |
- 테이블 셀 내부에 마크다운 이미지 문법을 사용하여 아이콘을 넣을 수 있습니다.
네비게이션
- ESC: 전체 슬라이드 오버뷰
- Space/화살표: 슬라이드 이동
- 슬라이드 하단 프로그레스 바 확인
마무리
- m2Slide를 사용하여 멋진 프레젠테이션을 만드세요.
- Markdown으로 쉽고 빠르게 작성할 수 있습니다.