📝 Markdown Editor & Viewer

✨ Windows 마크다운 에디터 ✨

🚀 다운로드 • 📖 기능 • 🎨 스크린샷 • ⚙️ 설치 • 📚 문서

멋진 WinUI 3 아크릴 효과, 실시간 미리보기, 완벽한 마크다운 지원을 제공하는 현대적이고 기능이 풍부한 Windows용 마크다운 에디터입니다.

🌟 주요 특징

🎨 아름다운 UI/UX

반투명 아크릴 효과가 적용된 WinUI 3 스타일 디자인
부드러운 전환 효과의 라이트 & 다크 모드 지원
현대적인 창 컨트롤이 있는 커스텀 타이틀바
모든 화면 크기에 최적화된 반응형 레이아웃

⚡ 강력한 기능

즉시 마크다운 렌더링되는 실시간 미리보기
마크다운 문법을 위한 스마트 자동완성
Highlight.js 기반 구문 강조
상대/절대 경로 지원하는 이미지 지원

✨ 기능

📝 에디터

클릭하여 펼치기

🎯 듀얼 모드: 뷰어와 에디터 모드 간 원활한 전환
⚡ 라이브 프리뷰: 변경사항을 실시간으로 확인
🔮 자동완성: 지능형 마크다운 문법 제안
🎨 구문 강조: 190개 이상의 언어를 지원하는 아름다운 코드 블록
📏 줄 번호: 줄 번호 표시/숨김 토글
🔄 자동 줄 바꿈: 편안한 읽기 경험
💾 자동 저장: 작업 내용을 절대 잃지 않음
🌐 HTML 내보내기: 마크다운을 독립 실행 가능한 HTML 파일로 내보내기
⌨️ 키보드 단축키: 생산성 향상

📋 마크다운 지원

전체 마크다운 규격

✅ 지원되는 문법

카테고리	요소
제목	H1 ~ H6
강조	굵게, 기울임, 취소선
코드	인라인 코드, 구문 강조가 있는 코드 블록
링크	URL, 참조 링크, 자동 링크
이미지	인라인 이미지, 참조 이미지, 이미지 URL
목록	순서 목록, 비순서 목록, 중첩 목록
작업	체크박스가 있는 작업 목록
인용	중첩 가능한 인용구
표	GitHub Flavored Markdown 표
HTML	인라인 HTML 태그
스크립트	선택적 JavaScript 실행
구분선	수평선

🖼️ 이미지 처리

📁 상대 경로: ![alt](./images/photo.jpg)
🌐 절대 경로: ![alt](C:/Users/photo.jpg)
🔗 URL 이미지: ![alt](https://example.com/image.png)
🏷️ HTML 이미지: <img src="path" alt="description">

⚙️ 설정

🔒	스크립트 실행 제어 마크다운 내 JavaScript 활성화/비활성화
🔮	자동완성 토글 스마트 제안 켜기/끄기
📏	줄 번호 줄 번호 표시/숨김
🔄	줄 바꿈 자동 줄 바꿈 활성화
🌓	테마 전환 라이트 모드와 다크 모드 간 토글

🎨 스크린샷

라이트 모드 - 뷰어

다크 모드 - 에디터

설정 패널

🚀 다운로드

시스템 요구사항

🪟 OS: Windows 10 이상 (64비트)
💻 RAM: 최소 4 GB, 권장 8 GB
💾 저장공간: 400 MB 여유 공간
🖥️ 디스플레이: 1280x720 이상 해상도

⚙️ 설치

📦 일반 사용자용

설치 파일 다운로드: MarkdownEditor-Setup-1.0.0.exe
관리자 권한으로 설치 프로그램 실행
설치 디렉터리 선택
선택적 기능 선택:
- ✅ 바탕화면 바로가기 생성
- ✅ .md 파일 연결
애플리케이션 실행

🛠️ 개발자용

소스에서 빌드하기

사전 요구사항

# 필수
Node.js >= 16.0.0
npm >= 8.0.0

# 선택사항 (설치 프로그램 빌드용)
Inno Setup >= 6.0.0
ImageMagick (이미지 변환용)

저장소 복제

git clone https://github.com/neramc/markdown.git
cd markdown-editor

의존성 설치

npm install

개발 모드

npm start

애플리케이션 빌드

# Electron 앱 빌드
npm run build

# 출력: dist/win-unpacked/

설치 프로그램 생성

방법 1: 자동 빌드 스크립트 (권장)

# Windows 배치 스크립트
build-innosetup.bat

방법 2: 수동 빌드

# 1. Inno Setup 설치
choco install innosetup

# 2. Electron 앱 빌드
npm run build

# 3. 설치 프로그램 컴파일
"C:\Program Files (x86)\Inno Setup 6\ISCC.exe" installer.iss

출력

dist/
├── win-unpacked/                          # 포터블 앱
└── MarkdownEditor-Setup-1.6.3.exe         # 설치 프로그램

📁 프로젝트 구조

markdown-editor/
│
├── 📄 main.js                   # Electron 메인 프로세스
├── 🌐 index.html                # 애플리케이션 UI 구조
├── 🎨 styles.css                # WinUI 3 스타일링
├── ⚙️ renderer.js               # 렌더러 프로세스 로직
│
├── 📦 package.json              # 프로젝트 설정
├── 🔧 installer.iss             # Inno Setup 스크립트
├── 🚀 build-innosetup.bat       # 자동 빌드 스크립트
│
├── 🖼️ icon.ico                  # 애플리케이션 아이콘
├── 🖼️ installer-header.bmp      # 설치 프로그램 헤더 (55x58)
├── 🖼️ installer-sidebar.bmp     # 설치 프로그램 사이드바 (164x314)
│
├── 📜 LICENSE.txt               # Apache 2.0 라이센스
├── 📖 README.md                 # 영문 문서
├── 📖 README.kr.md              # 한글 문서 (이 파일)
└── 🚫 .gitignore                # Git 무시 파일

🎯 사용법

⌨️ 키보드 단축키

단축키	동작
`Ctrl + O`	파일 열기
`Ctrl + S`	파일 저장
`Ctrl + Shift + S`	다른 이름으로 저장
`Ctrl + Space`	자동완성 트리거
`F11`	전체화면 토글

🔄 모드 전환

👁️ 뷰어 모드: 렌더링된 마크다운 읽기 및 미리보기
✏️ 에디터 모드: 실시간 미리보기와 함께 마크다운 작성 및 편집
🌐 HTML 내보내기: 작업물을 스타일이 포함된 독립 실행 HTML 파일로 내보내기

📝 마크다운 예제

기본 문법 예제

제목

# H1 제목
## H2 제목
### H3 제목

강조

**굵은 텍스트**
*기울임 텍스트*
~~취소선~~
`인라인 코드`

링크 & 이미지

[링크 텍스트](https://example.com)
![이미지 설명](./images/photo.jpg)

목록

- 비순서 항목 1
- 비순서 항목 2
  - 중첩된 항목

1. 순서 항목 1
2. 순서 항목 2

작업 목록

- [ ] 미완료 작업
- [x] 완료된 작업

코드 블록

```javascript
function hello() {
  console.log("안녕하세요!");
}
```

표

| 열 1 | 열 2 | 열 3 |
|----------|----------|----------|
| 값 1  | 값 2  | 값 3  |

인용구

> 이것은 인용구입니다
> 여러 줄에 걸쳐 작성할 수 있습니다

🛠️ 기술 스택

기술	용도	버전
	데스크톱 프레임워크	28.0+
	런타임 환경	16.0+
	프로그래밍 언어	ES6+
	코드 에디터	5.65
	마크다운 파서	11.0+
	구문 강조	11.9+
	설치 프로그램 빌더	6.0+

🎨 커스터마이징

🖼️ 설치 프로그램 이미지

Inno Setup 설치 프로그램용으로 다음 이미지를 준비하세요:

헤더 이미지 (작은 로고)

크기: 55 × 58 픽셀
형식: BMP
위치: 설치 프로그램 우측 상단

사이드바 이미지 (세로 배너)

크기: 164 × 314 픽셀
형식: BMP
위치: 설치 프로그램 좌측

이미지 변환

# ImageMagick 설치
choco install imagemagick

# 헤더 변환 (55x58)
magick convert your-banner.png -resize 55x58! installer-header.bmp

# 사이드바 변환 (164x314)
magick convert your-banner.png -resize 164x314! installer-sidebar.bmp

🎨 테마 설정

애플리케이션은 커스텀 테마를 지원합니다. styles.css를 편집하여 커스터마이징하세요:

색상
글꼴 크기
간격
아크릴 효과
창 크롬

🤝 기여하기

기여는 언제나 환영합니다! 다음과 같이 도울 수 있습니다:

🐛 버그 리포트

버그를 발견하셨나요? 다음 정보와 함께 이슈를 열어주세요:

버그 설명
재현 단계
예상 동작
스크린샷 (해당되는 경우)
시스템 정보

💡 기능 요청

아이디어가 있으신가요? 기능 요청을 제출하세요!

🔧 풀 리퀘스트

저장소 포크
기능 브랜치 생성 (git checkout -b feature/AmazingFeature)
변경사항 커밋 (git commit -m 'Add some AmazingFeature')
브랜치에 푸시 (git push origin feature/AmazingFeature)
Pull Request 열기

📋 로드맵

❓ 자주 묻는 질문

.md 파일을 이 에디터와 연결하는 방법은?

설치 중에 ".md 파일 연결" 옵션을 선택하세요. 놓쳤다면, 아무 .md 파일에서 마우스 우클릭 → "연결 프로그램" → "다른 앱 선택" → Markdown Editor 선택 → "항상 이 앱 사용" 체크.

사용자 정의 글꼴을 사용할 수 있나요?

네! styles.css의 font-family 속성을 편집하고 애플리케이션을 다시 빌드하세요.

스크립트 실행이 안전한가요?

스크립트 실행은 기본적으로 비활성화되어 있습니다. 신뢰할 수 있는 마크다운 파일에 대해서만 활성화하세요. 앱은 스크립트를 샌드박스 처리하지만 완전한 보안을 보장할 수는 없습니다.

보안 취약점은 어떻게 보고하나요?

공개 이슈를 여는 대신 보안 문제는 security@yourproject.com으로 이메일을 보내주세요.

📄 라이센스

이 프로젝트는 Apache License 2.0 하에 라이센스가 부여됩니다 - 자세한 내용은 LICENSE.txt 파일을 참조하세요.

Copyright 2024 Markdown Editor Team

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

🙏 감사의 말

Electron - 크로스 플랫폼 데스크톱 앱
CodeMirror - 다목적 텍스트 에디터
Marked - 마크다운 파서 및 컴파일러
Highlight.js - 구문 강조
Inno Setup - Windows용 설치 프로그램
Microsoft - WinUI 3 디자인 영감

📊 통계

💖 지원

이 프로젝트가 도움이 되었다면 다음과 같이 지원해주세요:

⭐ 이 저장소에 스타 주기
🔀 포크하고 기여하기
🐛 이슈 리포트하기
💬 입소문 내기

❤️로 만든 Markdown Editor

⭐ GitHub에서 스타를 주세요 — 도움이 됩니다!

🔝 맨 위로

Name		Name	Last commit message	Last commit date
Latest commit History 56 Commits
.gitignore		.gitignore
.mailmap		.mailmap
BUILT.md		BUILT.md
LICENSE		LICENSE
README.md		README.md
debug.bat		debug.bat
icon.ico		icon.ico
index.html		index.html
installer-header.bmp		installer-header.bmp
installer-sidebar.bmp		installer-sidebar.bmp
installer.iss		installer.iss
main.js		main.js
markdown-worker.js		markdown-worker.js
package-lock.json		package-lock.json
package.json		package.json
renderer.js		renderer.js
setup.bat		setup.bat
styles.css		styles.css

Folders and files

Latest commit

History

Repository files navigation