Typora를 사용해 Markdown 편집 및 PDF로 내보내는 방법

[break_room]

2022년 7월부터 완전한 베타 버전은 더 이상 작동하지 않습니다.

Windows: 트라이얼 버전을 설치한 후 문서를 열지 않고 원하는 만큼 빈 창을 미리 생성할 수 있습니다. 첫 번째 문서를 열면 더 이상 새 문서를 열 수 없으므로, 프로그램 시작 후 바로 Ctrl+Shift+N으로 빈 창을 생성하고, License Info 창을 닫아주세요. 창은 재사용할 수 없으므로, 처음부터 여러 개의 빈 창을 미리 생성하는 것이 좋습니다.

Linux: Ctrl+O로 새 창을 생성하고, 그 안에 문서를 열면 정상적으로 작동합니다 . 미리 빈 창을 여러 개 준비할 필요가 없습니다.

소개

Typora는 최고의 에디터입니다:

• Markdown 소스 파일 작업에 최적화됨
• PDF로 내보내기 (아래 설정 참조)

사용할 수 있는 장점들:

• 이미지(오프라인 저장 가능!), 코드 하이라이팅, 표 등 다양한 요소를 삽입하여 체크리스트나 노트로 사용 가능
• 형식 맞춤이 최소한의 노력으로 가능
• 문서 내부에서 내용 삽입 및 교차 링크 삽입이 편리
• 웹 페이지처럼 문서를 편집할 수 있어, 내부 이미지를 편집하면 문서 내 이미지도 자동으로 변경됨
• 여러 문서에서 동일한 이미지를 참조할 수 있음
• Typora, Gitlab, GitHub, YouTrack, Proxmox의 Notes 설명 등 다양한 플랫폼과 호환되는 일반적인 형식
• Gitlab, GitHub의 마크다운 형식과 거의 완전히 호환됨 (readme.md 파일은 자동으로 열림)
• 온라인 문서 플랫폼(예: Docsify)과 최대한 호환됨

설치

https://typora.io에서 직접 다운로드하거나, Choco를 통해 설치하세요:

choco install typora --ignore-checksums --execution-timeout=300 --limit-output --no-progress --yes

Vue.js 테마

이 테마는 Docsify와 잘 어울립니다. 문서의 외관, Docsify에서 보이는 모습, 그리고 내보낸 PDF 모두 동일하게 보입니다!

~/.config/Typora/themes/

이 폴더에 다음 파일들을 넣으세요:

vue (폴더)
vue.css
vue_dark.css

전체 테마 아카이브는 여기에 있습니다:
typora_themes.zip|첨부파일 (3.1MB)

여백 설정

여백은 콘텐츠 배치에 영향을 미치며, 한 번 설정한 여백 크기를 변경하면 페이지 분할이 깨질 수 있으므로 변경하지 않는 것이 좋습니다.

문서 작성에 적합한 설정은 다음과 같습니다: 위 10, 아래 5, 왼쪽 10, 오른쪽 5. 이 설정으로는 일부 프린터가 페이지 번호를 출력하지 못할 수 있습니다.

페이지 분할 삽입 (PDF)

페이지 분할을 강제로 삽입하려면, 헤더 앞에 다음 코드를 삽입하세요.

이를 통해 인쇄용 PDF를 생성할 수 있으며, 텍스트가 페이지별로 논리적으로 분리되어 (표는 자동으로 분리됨) 인쇄하기에 적합합니다.

<div style="page-break-after: always;"></div>

:person_tipping_손: 이전 설정과 재작성으로 문서를 주기적으로 내보내어 페이지 분할이 원하는 대로 되는 PDF를 얻으세요:

필요한 경우 위에서 언급한 구분자를 사용하여 페이지 분할을 수정하세요.

이미지 삽입 설정

다음 옵션을 활성화하세요:

이미지를 사용자 폴더로 복사 = ./images/${filename}

이렇게 하면 이미지를 로컬로 연결된 폴더에 복사할 수 있습니다. 일시적인 폴더에서 영구 폴더로 이미지를 이동하려면 이미지 위의 컨텍스트 메뉴에서 폴더로 복사...를 선택하세요. 여기서 폴더 이름은 문서 이름과 동일해야 하며, 문서가 처음 저장될 때 자동으로 생성됩니다.

공백 및 특수 문자에 주의하세요!

Typora는 이러한 경로를 정상적으로 표시하지만, 예를 들어 GitLab은 그렇지 않습니다. 이 경우 Urlencoder를 사용하여 특수 문자를 대체하세요:

     -    %20
!    -    %21
@    -    %40
#    -    %23
$    -    %24
%    -    %25
^    -    %5E
&    -    %26
*    -    %2A
(    -    %28
)    -    %29
<    -    %3C
>    -    %3E

확장 형식 지원

확장 형식 지원을 활성화하세요:

코드 블록의 줄 번호

최신 버전의 프로그램에서 설정에 줄 번호 추가 옵션이 추가되었습니다. 모든 코드 블록에 줄 번호를 추가하려면:

{.language-name .numberLines}

또는 특정 줄 번호부터 시작하려면:

{.language-name .numberLines startFrom="start-value"}

제목 간 줄 간격 제거

Typora 0.11.7 버전부터 “상위 제목 사이 페이지 분할” 옵션이 추가되었습니다. 이 옵션은 항상 비활성화하세요.

페이지 번호 표시(피트)는 권장됩니다:

${pageNo} / ${totalPages}

0.11.7 이전 버전에 대한 설명

이전 버전에서는:
PDF로 내보내기 시 기본적으로 제목 사이에 페이지 분할(page-break)이 추가되어 PDF 페이지가 손상됩니다. 이를 제거하려면:

\u003ckbd\u003e메뉴\u003c/kbd\u003e–\u003ckbd\u003e파일\u003c/kbd\u003e–\u003ckbd\u003e설정\u003c/kbd\u003e–\u003ckbd\u003e스타일\u003c/kbd\u003e–\u003ckbd\u003e테마 폴더 열기\u003c/kbd\u003e

C:\\Users\\xx\\AppData\\Roaming\\Typora\\themes

github.css 파일을 열고 @media_print 블록을 주석 처리하세요. CSS 주석 기호 /*와 */을 사용하여:

/*@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}*/

Typora를 다시 시작하세요.

테이블 페이지 분할

PDF로 내보내는 경우 테이블은 항상 새로운 페이지에서 시작됩니다. 이 행동을 변경하려면 C:\\Users\\...\\AppData\\Roaming\\Typora\\themes\\github.css 파일을 열고 avoid를 auto로 수정하세요:

\u003ckbd\u003e메뉴\u003c/kbd\u003e–\u003ckbd\u003e파일\u003c/kbd\u003e–\u003ckbd\u003e설정\u003c/kbd\u003e–\u003ckbd\u003e스타일\u003c/kbd\u003e–\u003ckbd\u003e테마 폴더 열기\u003c/kbd\u003e

    pre {
        page-break-inside: auto;
}

### 문서

 partially translated documentation: https://way23.ru/typora-%D1%80%D0%B0%D0%B7%D1%80%D1%8B%D0%B2%D1%8B-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86/

### 이모지 삽입

https://github.com/ikatyang/emoji-cheat-sheet

### 마크다운 문법 가이드

[Markdown-Reference.pdf|attachment](upload://bJJtcLkXrjMiDU9xA38FqzPSZJd.pdf) (334.3 KB)

### 다이어그램

https://support.typora.io/Draw-Diagrams-With-Markdown

https://mermaid.js.org/syntax/gantt.html

[typora_diagrams.md|attachment](upload://t9Q87PYdpkvGHOIrRP5wvRWvtWe.md) (12.8 KB)

```mermaid
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 -- State2
    note left of State2 : This is the note to the left.

%%{init: { 
  "theme": "base", 
  "themeVariables": { 
    "pie1": "#8BC34A", "pie2": "#f3d69c", "pie3": "#FF5722",
    "pie4": "#009688", "pie5": "#5C6BC0", "pie6": "#03A9F4",
    "pie7": "#EF4444", "pie8": "#ec070c", "pie9": "#FFC107",
    "pie10": "#ca936d","pie11": "#c9edfa","pie12": "#E91E63"
  } 
} }%%
pie title
    "CI/CD, SETUP, RND (HA/LB)" : 37.3
    "Other (DB, BACKUP, etc.)" : 15.94
    "CONSULT + Поддержка" : 13.3
    "PM, process" : 10.45
    "PERIODIC / SETUP (VM)" : 7.4
    "DOCS" : 5.31
    "PRESALE" : 4.6
    "MONITORING" : 3.85
    "ONBOARD / PREPARE" : 1.82
    "РУЧНЫЕ / FIX" : 0.18
    "RND (Архитектура)" : 0.05

버튼

이미지에 붉은 배경에 흰색 글씨로 "확인 필요"라고 적힌 버튼입니다. (AI가 생성한 이미지의 설명)

문서의 시작 부분에 README.md에 다음 코드를 추가하세요:

<style>
.markdown-section .mybutton, .markdown-section .mybutton:hover {
  cursor: pointer;
  color: #CC0000;
  height: auto;
  display: inline-block;
  border: 2px solid #CC0000;
  border-radius: 4rem;
  margin: 2px 0px 2px 0px;
  padding: 8px 18px 8px 18px;
  line-height: 1.2rem;
  background-color: white;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-weight: bold;
  text-decoration: none;
}
</style>

버튼을 삽입하려면 클래스를 지정한 다음 다음 코드를 사용하세요:

[확인 필요](URL ':class=mybutton')

PDF에서는 버튼이 일반 링크처럼 표시됩니다.