https://github.com/0disoft/dc-code-paste
DCInside 글쓰기에 최적화된 코드/문서 HTML 변환 도구
https://github.com/0disoft/dc-code-paste
clipboard code-highlighting dcinside markdown shiki svelte tiptap
Last synced: 12 days ago
JSON representation
DCInside 글쓰기에 최적화된 코드/문서 HTML 변환 도구
- Host: GitHub
- URL: https://github.com/0disoft/dc-code-paste
- Owner: 0disoft
- Created: 2026-06-03T14:45:44.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-06-13T11:36:51.000Z (25 days ago)
- Last Synced: 2026-06-13T13:18:19.572Z (25 days ago)
- Topics: clipboard, code-highlighting, dcinside, markdown, shiki, svelte, tiptap
- Language: TypeScript
- Homepage: https://0disoft.github.io/dc-code-paste/
- Size: 368 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dc-code-paste
DCInside 글쓰기 화면에 붙여넣을 리치 텍스트 HTML을 만드는 정적 웹 도구.
**→ https://0disoft.github.io/dc-code-paste/**
---
## 주요 기능
- 글쓰기 에디터 + 실시간 미리보기
- 코드블록 (파일명, 언어, 라인 하이라이트, 추가/삭제/강조 줄 표시)
- 콜아웃, 요약, 튜토리얼, 비교, references, CTA 블록
- Markdown 가져오기 및 적용
- **AI 글 작성** — API 키와 모델을 설정하면 요청 한 번으로 Markdown 초안을 생성하고 에디터에 바로 적용
- LLM 가이드 복사 (외부 LLM 연동용)
- 프리셋 저장
- 초안 히스토리
- 라이트/다크 테마
- 브라우저 종료 후에도 localStorage로 자동 복원
---
## 기본 사용 흐름
1. 왼쪽 편집기에서 글을 작성한다.
2. 오른쪽 미리보기에서 결과를 확인한다.
3. `디씨 복사` 버튼을 클릭한다.
4. DCInside 글쓰기 에디터에 붙여넣는다.
> **주의:** 이 도구는 DCInside 에디터에 **리치 텍스트로 붙여넣는** 도구다.
> HTML 원문을 DCInside HTML 모드에 직접 입력하는 방식과 다르다.
> 미리보기 패널을 `HTML`로 전환하면 `원문 복사`로 raw HTML 소스도 복사할 수 있지만,
> 일반적인 사용은 `디씨 복사` → 에디터 붙여넣기다.
---
## AI로 글 작성하기
상단 툴바의 `AI` 버튼을 클릭하면 AI 작성 패널이 열린다.
1. **제공자**를 선택한다.
2. **모델**을 입력하거나 자동완성 목록에서 선택한다.
3. **API 키**를 입력한다. 키는 브라우저에 저장되지 않는다.
4. **요청**에 원하는 글 주제나 지시를 입력한다.
5. `생성하기`를 클릭하면 LLM이 Markdown을 생성하고, 완료되면 Markdown 패널에 자동으로 넣어준다.
6. Markdown 패널에서 `적용하기`를 클릭하면 에디터에 반영된다.
### 지원 제공자
| 제공자 | 비고 |
| ------------------ | ----------------------------------------------------------------- |
| OpenRouter | API 키 없이도 공개 모델 목록 조회 가능. 주간 인기 80개 필터 제공. |
| OpenCode Go | minimax, kimi, glm, deepseek, qwen, mimo, hy3 계열 모델 내장 |
| Umans | 로컬 Responses adapter 사용. API 키는 선택 사항. |
| OpenAI | Responses API 사용 |
| Claude (Anthropic) | |
| Gemini | |
| DeepSeek | |
| Mistral | |
| Groq | |
| Cerebras | |
| xAI | |
| Perplexity | |
OpenRouter를 사용하면 API 키 하나로 여러 모델을 전환할 수 있어 편리하다.
---
## LLM 가이드 복사로 외부 LLM 연동하기
앱 내 AI 기능 대신 ChatGPT, Claude, Gemini 웹 등 외부 LLM을 직접 사용하려면:
1. `가이드` 버튼을 클릭해 작성 규칙을 복사한다.
2. 원하는 LLM에 규칙과 작성할 주제를 함께 전달한다.
3. LLM이 출력한 Markdown을 복사한다.
4. dc-code-paste에서 `MD` 버튼을 클릭한다.
5. 입력창에 Markdown을 붙여넣고 `적용하기`를 클릭한다.
6. 편집기와 미리보기에 변환된 글이 표시된다.
7. 내용을 확인하거나 편집한 뒤 `디씨 복사`로 DCInside에 붙여넣는다.
`:::hero`, `:::summary`, `:::tip`, `:::warning` 같은 블록 태그와 코드블록은
반드시 `MD` 패널을 통해 적용해야 한다.
LLM 결과를 편집기에 직접 붙여넣는 방식으로는 블록 태그가 해석되지 않는다.
---
## 로컬 실행
```sh
bun install
bun run dev
```
---
## 주요 명령어
```sh
bun run check # Svelte 타입 검사
bun run typecheck:go # tsgo 네이티브 타입 검사
bun run lint # Oxlint
bun run format:check # Oxfmt
bun run test # Vitest 단위 테스트
bun run test:e2e # Playwright E2E 테스트
bun run build # 정적 빌드
```
---
## DCInside 붙여넣기 주의사항
릴리스 전 아래 항목을 브라우저에서 직접 확인한다.
1. 기본 샘플 아티클(단락, 제목, 팁박스, 경고박스, 참조박스, 링크박스, 인용, 목록, 구분선, 코드블록 포함)로 시작한다.
2. `디씨 복사` → DCInside 일반 에디터에 붙여넣기 → 스타일 유지 확인.
3. 미리보기 패널을 `HTML`로 전환 → `원문 복사` → DCInside HTML 모드에 붙여넣기 → HTML 모드 해제 후 동일하게 렌더링되는지 확인.
4. 코드 색상, 박스 여백, 링크, 본문 폰트 크기가 미리보기와 충분히 일치하는지 확인.
5. 텍스트 편집 후 새로고침 → 초안이 복원되는지 확인.
6. `초기화` → 새로고침 → 빈 아티클이 오는지 확인.
7. `DC 테이블` 모드에서 내보낸 HTML에 `table`, `td`, `bgcolor` 속성이 있는지 확인.