자사에서 신규 개발을 담당하게 되었습니다.
거기서 사양서나 설계서등의 문서를 git로 관리하고 싶다고 하는 일도 있어,
Excel이나 Word가 아닌 Markdown에서 만들고 싶습니다.

하지만 사실은 한 번도 Markdown을 쓴 적이 없다. .
(※라는 것은 Qiita도 첫 투고・・・!)

라는 상황이므로, 실제로 문서를 쓰기 시작할 때까지의 순서의 비망록입니다.

이번에 사용하는 편집기는 VScode입니다.

Markdown 치트 시트 시스템

아래의 기사를 참고하겠습니다.

블로그에서 자주 사용하는 Markdown 쓰는 법을 잊었을 때 보는 것.

Qiita 마크다운 기법 일람표・치트 시트

Markdown 기법 치트 시트

Markdown 파일 만들기 및 편집

VSCode에서 미리보기를 표시하면서 작성 및 편집합니다.

명령↓

명령 팔레트: Markdown: 미리 보기 옆에 표시(Markdown: Open Preview to the side)
키보드: [Ctrl]+[K]→[V](Win/Linux), [Command]+[K]→[V](macOS)

또는 편집기 오른쪽 상단의 미리보기 옆에 표시를 누릅니다.

참고: VS Code에서 Markdown을 미리 보는 방법?

Markdown 확장 기능 도입

이하 기사를 참고로 했습니다.
VisualStudioCode에서 Markdown을 쓸 때 넣어두고 싶은 편리한 확장 기능 5선

Markdown All in One

Markdown 형식의 파일을 작성할 때 사용할 수 있는 바로 가기 키가 증가합니다.

사용할 수 있는 키는 그다지 많지 않다고 생각한다・・・

예:


키
결과


ctrl+b
굵게

ctrl+i
기울임꼴

ctrl + shift + ]
표제 레벨 상승

ctrl+shift+[
헤딩 레벨 낮추기

md 파일을 열 때 자동으로 사이드바에 미리보기 표시

설정을 열고 자동으로 미리보기 옆에 표시를 선택합니다. 매우 편리!

목차 생성 (TOC 생성)

제목 목록을 만든 다음 [F1]을 누르고 다음 명령을 입력합니다.



그러면 목차를 할 수 있습니다. 제대로 목차로부터 각 항목에 링크하고 있다!

문장량이 많은 문서를 쓸 때 사용할 수 있을 것 같다

작성한 md 파일을 자동으로 HTML 파일로 출력

md 파일과 동일한 디렉토리에 생성합니다.


이번에는 작성한 문서를 HTML이 아닌 PDF 변환하므로 사용하지 않을지도 모른다.

설치: Markdown All in One

Markdown PDF

md 파일을 PDF 또는 HTML로 변환하여 내보내기

출력할 파일을 마우스 오른쪽 버튼으로 클릭한 메뉴에서 다음 명령을 실행합니다.

PDF 출력

Markdown PDF: Export (pdf)

HTML 출력

Markdown PDF: Export (html)

그 외에도 PNG, JPEG 파일로 변환 가능.

출력 대상 path 변경

setting.json을 엽니다.

"markdown-pdf.outputDirectory": "出力先path"

를 추가합니다.

설치: Markdown PDF

Excel to Markdown table

Excel에서 만든 테이블을 복사하고 Shift+Alt+V로 붙여 넣으면 md 형식으로 테이블을 작성합니다.

테이블 데이터를 다룰 때 매우 편리합니다.

설치: Excel to Markdown table

문서 작성 절차

디렉토리 구성

root/
   ├pdf/ 
   │   ├要件定義/
   │   │     └ 要件定義書.pdf
   │   ├基本設計
   │   │     ├ 画面遷移図.pdf
   │   │     ├ 画面一覧.pdf
   │   │     ├ テーブル定義書.pdf
   │   │     └ 機能一覧.pdf
   │     etc..
   │
   └md/
      ├要件定義/
      │     └ 要件定義書.md
      ├基本設計
      │     ├ 画面遷移図.md
      │     ├ 画面一覧.md
      │     ├ テーブル定義書.md
      │     └ 機能一覧.md
　　    etc..

요구사항 정의서라면md/要件定義/에 要求定義書.md를 만들고 Markdown PDF

Markdown PDF: Export (html)

를 실행하면 pdf/要件定義/에 要求定義書.pdf가 만들어집니다.

※출력처는 이하에 설정되어 있습니다

"markdown-pdf.outputDirectory": "../../pdf/要件定義"

작성하는 문서의 공정이 바뀔 때마다 path를 바꾸는 것은 조금 번거로울지도・・・어쩔 수 없다?

이미지 로드 정보

img 태그로 이미지를 로드할 때 이미지 URL을 생성해야 합니다.

GitHub에서 README.md에 이미지를 사용하고 싶습니다.

위 기사를 참고하여 리포지토리에 이미지를 업로드하고 생성된 URL을 지정합니다.

<img src="生成された画像URL" alt="画像" width=50%>

이런 식으로 해보자

저는 엔지니어 경력 반년 정도로 설계서나 사양서를 쓴 경험이 없기 때문에,
열심히 공부하면서 써 갑니다・・・!