8.6 KiB
8.6 KiB
단축키 및 작성 약어
이 문서는 sori.studio에서 직접 구현한 단축키, 슬래시 명령, Markdown 약식 문법을 정리한다. 브라우저 기본 단축키는 제외한다.
기본 표기
Cmd/Ctrl: macOS는Cmd, Windows/Linux는Ctrl.Enter: 선택 또는 확정.Escape: 열려 있는 패널, 메뉴, 모달을 닫음.
공개 화면
| 입력 | 동작 | 위치 |
|---|---|---|
/ |
통합 검색 모달 열기 | 공개 화면 전체. 입력창, textarea, select, contenteditable 포커스 중에는 무시 |
Escape |
통합 검색 모달 닫기 | 통합 검색 모달 열림 상태 |
Escape |
사용자 메뉴 닫기 | 사용자 메뉴 열림 상태 |
Escape |
모바일 왼쪽 메뉴 닫기 | 모바일 왼쪽 메뉴 열림 상태 |
게시글 작성 에디터
공통
| 입력 | 동작 | 위치 |
|---|---|---|
Cmd/Ctrl+E |
작성 모드와 미리보기 모드 전환 | 게시글/페이지 Markdown 에디터 |
Cmd/Ctrl+Z |
에디터 자체 실행 취소 | 게시글/페이지 Markdown 에디터 |
Cmd/Ctrl+Shift+Z |
에디터 자체 다시 실행 | 게시글/페이지 Markdown 에디터 |
Cmd/Ctrl+Y |
에디터 자체 다시 실행 | 게시글/페이지 Markdown 에디터 |
Escape |
미디어 선택 모달 닫기 | 미디어 선택 모달 열림 상태 |
소스 작성 모드
| 입력 | 동작 |
|---|---|
Cmd/Ctrl+K |
선택 텍스트를 [선택 텍스트](https://) 인라인 링크로 감싸고 URL 부분 선택 |
Cmd/Ctrl+B |
선택 텍스트를 **굵은 글씨**로 감싸기 |
Cmd/Ctrl+I |
선택 텍스트를 *기울임*으로 감싸기 |
Cmd/Ctrl+Shift+K |
선택된 줄 삭제 |
| 이미지 파일 드롭 | 이미지 1개는 이미지 블록, 여러 개는 갤러리 블록으로 업로드 삽입 |
미리보기/라이브 편집 모드
| 입력 | 동작 |
|---|---|
Cmd/Ctrl+K |
선택 텍스트를 [선택 텍스트](https://) 인라인 링크로 삽입 |
Cmd/Ctrl+Shift+K |
현재 줄 또는 선택 카드 블록 삭제 |
Cmd/Ctrl+A |
라이브 문서 전체 선택 |
Backspace / Delete |
선택된 카드형 블록 삭제 |
ArrowUp / ArrowDown |
편집 커서를 이전/다음 블록으로 이동 |
카드형 블록에서 Enter |
해당 블록 아래에 새 줄 삽입 |
카드형 블록에서 ArrowUp / ArrowDown |
이전/다음 블록으로 이동 |
슬래시 명령 메뉴
본문 줄에서 /를 입력하면 슬래시 명령 메뉴가 열린다.
| 입력 | 동작 |
|---|---|
/ |
슬래시 명령 메뉴 열기 |
/검색어 |
명령 검색 |
ArrowUp / ArrowDown |
명령 선택 이동 |
Enter |
선택 명령 실행 |
Escape |
슬래시 명령 취소 |
슬래시 명령 목록
| 명령 | 삽입/동작 | 설명 |
|---|---|---|
/이미지, /image, /img, /photo |
미디어 선택 | 단일 이미지 삽입 |
/갤러리, /gallery, /images |
미디어 선택 | 여러 이미지 갤러리 삽입 |
/h1, /heading1 |
# |
제목 1. 게시물 제목 외에는 비권장 |
/h2, /heading, /subtitle, /제목 |
## |
제목 2 |
/h3, /heading, /제목 |
### |
제목 3 |
/h4, /heading, /제목 |
#### |
제목 4 |
/인용, /quote, /blockquote |
> |
인용문 |
/목록, /list, /bullet, /ul |
- |
불릿 목록 |
/표, /table, /테이블 |
기본 3열 Markdown 표 | 표 삽입 |
/코드, /code, /pre |
코드 블록 | 줄번호 숨김 기본값 |
/구분선, /divider, /hr, /line |
--- |
가로 구분선 |
/콜아웃, /callout, /notice, /info |
:::callout ... ::: |
강조 안내 블록 |
/토글, /toggle, /details |
:::toggle ... ::: |
접기/펼치기 블록 |
/html, /markup, /tablehtml, /html표 |
:::html ... ::: |
HTML 코드 블록 |
/링크, /link, /url, /embed, /youtube |
:::link ... ::: |
URL 링크/임베드 카드. 인라인 링크가 아님 |
/iframe, /frame, /아이프레임 |
:::iframe ... ::: |
외부 iframe 코드 |
/비디오, /video, /movie, /mp4 |
미디어 선택 | 업로드 비디오 카드 |
/오디오, /audio, /music, /mp3 |
미디어 선택 | 오디오 플레이어 카드 |
/파일, /file, /download, /pdf |
미디어 선택 | 다운로드 파일 카드 |
Markdown 약식 문법
인라인
| 문법 | 결과 |
|---|---|
[여기](https://example.com) |
여기에 링크 적용 |
[내부 링크](/pages/about) |
사이트 내부 경로 링크 |
**텍스트** |
굵게 |
*텍스트* |
기울임 |
`code` |
인라인 코드 |
::red[텍스트] |
빨간색 인라인 텍스트 |
::blue[텍스트] |
파란색 인라인 텍스트 |
::green[텍스트] |
초록색 인라인 텍스트 |
::yellow[텍스트] |
노란색 인라인 텍스트 |
::purple[텍스트] |
보라색 인라인 텍스트 |
::gray[텍스트] |
회색 인라인 텍스트 |
$H_2O$ |
아래첨자 |
$x^2$ |
위첨자 |
블록
| 문법 | 결과 |
|---|---|
# 제목 |
제목 1 |
## 제목 |
제목 2 |
### 제목 |
제목 3 |
#### 제목 |
제목 4 |
> 인용 |
인용문 |
> [!bg=blue] |
파란 인용 막대 옵션 |
> {bg=red} |
빨간 인용 막대 옵션 |
- 항목 |
불릿 목록 |
1. 항목 |
번호 목록 |
--- |
구분선 |
 |
이미지 |
| 표준 Markdown 표 | 표 |
코드 블록
```javascript
console.log('hello')
```
| 옵션 | 설명 |
|---|---|
| ```javascript | 언어 지정 |
| ```javascript line-numbers | 줄번호 표시 |
| ```javascript linenos | 줄번호 표시 |
| ```javascript no-line-numbers | 줄번호 숨김 |
| ```javascript no-linenos | 줄번호 숨김 |
콜아웃
:::callout emoji=💡 bg=blue title="안내"
본문
:::
| 옵션 | 설명 |
|---|---|
emoji=none |
아이콘 숨김 |
emoji=💡 |
아이콘 표시 |
bg=gray |
회색 배경 |
bg=blue |
파란 배경 |
bg=green |
초록 배경 |
bg=yellow |
노란 배경 |
bg=red |
빨간 배경 |
bg=purple |
보라 배경 |
title="제목" |
콜아웃 제목 |
토글
:::toggle open 더 보기
내용
:::
| 옵션 | 설명 |
|---|---|
open, opened, default-open |
기본 펼침 |
closed, close, default-closed |
기본 닫힘 |
링크/임베드 카드
:::link
https://example.com
:::
| 옵션 | 설명 |
|---|---|
url=https://example.com |
URL |
title=제목 |
카드 제목 |
description=설명 또는 desc=설명 |
카드 설명 |
thumbnail=이미지URL 또는 image=이미지URL |
썸네일 |
비디오/오디오/파일 카드
:::video
url=/uploads/posts/video.mp4
title=영상 제목
:::
| 옵션 | 설명 |
|---|---|
url= 또는 src= |
파일 URL |
title= |
제목 |
description= 또는 desc= |
설명 |
poster= 또는 thumbnail= |
비디오 포스터 |
caption= |
캡션 |
name=, filename=, file= |
파일명 |
size= |
파일 크기 표시 |
iframe
:::iframe
<iframe src="https://example.com"></iframe>
:::
HTML
:::html
<div class="custom">HTML</div>
:::
페이지 작성
| 입력 | 동작 | 위치 |
|---|---|---|
빈 HTML 문서 입력창에서 ! 입력 후 Tab |
기본 HTML 문서 골격 삽입 | 페이지 HTML 문서 모드 |
페이지 섹션 입력에서 ArrowUp / ArrowDown |
섹션 추천 이동 | 페이지 설정 |
페이지 섹션 입력에서 Enter |
선택한 섹션 적용 | 페이지 설정 |
페이지 섹션 입력에서 Escape |
섹션 추천 닫기 | 페이지 설정 |
빈 페이지 섹션 입력에서 Backspace |
선택된 섹션 제거 | 페이지 설정 |
게시글 설정
| 입력 | 동작 | 위치 |
|---|---|---|
태그 입력에서 ArrowUp / ArrowDown |
태그 추천 이동 | 게시글 설정 |
태그 입력에서 Enter |
추천 태그 선택 또는 입력 태그 추가 | 게시글 설정 |
태그 입력에서 , |
입력 태그 추가 | 게시글 설정 |
태그 입력에서 Escape |
태그 추천 닫기 | 게시글 설정 |
빈 태그 입력에서 Backspace |
마지막 선택 태그 제거 | 게시글 설정 |
미디어 보기
| 입력 | 동작 | 위치 |
|---|---|---|
Escape |
이미지 라이트박스 닫기 | 공개 게시글 이미지 확대 보기 |
ArrowLeft |
이전 이미지 | 이미지 라이트박스 |
ArrowRight |
다음 이미지 | 이미지 라이트박스 |