기술 동인지를 쓰고 있습니다.

기술 서전에 내기 위해 기술 동인지를 쓰고 있습니다.
모든 책은 Markdown에서 작성되었습니다.

멜트라 테크놀로지스 - BOOTH

멜트라 테크놀로지스 | 기술 문서

모든 책을 읽을 수 있도록 하고 Marktown에 CSS 조판을 도입하여 외형을 풍부하게 만듭니다.
아래 샘플 이미지 위가 CSS 조판 미도입, 아래가 도입되었습니다.



제목의 디자인, 여백의 크기 등에 차이가 있습니다.

VS Code로 Markdown 원고 작성 준비

다음 기사에 쓰기에 편리한 확장 기능을 정리하고 있습니다.

VSCode와 Markdown에서 기술 동인지 써서 확장 기능이라든지 정리 - Qiita

CSS 조판의 도입 방법

이 기사를 참고로했습니다.
【Visual Studio Code】Markdown PDF 스타일(CSS)을 바꾸는 방법 - Nekonote

거친 흐름으로는
VS Code로 작업 공간 만들기 → CSS 파일 만들기 → 작업 공간 설명 파일에 CSS 파일의 경로와 여백 설정을 작성합니다.
…라는 느낌입니다.

작업 공간 설정에 대해 다음과 같이 썼습니다.

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "markdown-pdf.styles": [
            "./style.css"
        ],
        "markdown-pdf.margin.top": "2.5cm",
        "markdown-pdf.margin.bottom": "3.5cm",
        "markdown-pdf.margin.right": "2cm",
        "markdown-pdf.margin.left": "2cm",
    }
}

CSS 파일 작성

여러가지 조합하고 있으면 결국 이렇게 되었습니다.

body {
  font-family: "游明朝体";
  font-size: 11pt;
}

h1 {
  font-family: "游ゴシック体";
  padding-bottom: 0.3em;
  line-height: 1.2;
  border-bottom: 2px solid #A4CA68;
  position: relative;
  padding-left: 18px;
  font-weight: bold;
}

h1:before {
  background: #A4CA68;
  content: "";
  height: 28px;
  width: 8px;
  left: 0;
  position: absolute;
  top: 3px;
}

h2 {
  font-family: "游ゴシック体";
  padding-bottom: 0.3em;
  line-height: 1.2;
  position: relative;
  padding-left: 18px;
  font-weight: bold;
}

h2:before {
  background: #A4CA68;
  content: "";
  height: 20px;
  width: 5px;
  left: 0px;
  position: absolute;
  top: 3px;
}

h3 {
  font-family: "游ゴシック体";
  text-decoration: none;
  font-weight: bold;
}

ol {
  counter-reset: li;
  list-style: none;
}

ol li {
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom: 0.5em;
}

ol>li::before {
  content: counter(li) ".";
  counter-increment: li;
  font-weight: bold;
}

p {
  text-indent: 1em;
}

.no-jisage p {
  text-indent: 0em;
}

code {
  margin: 0 2px;
  padding: 1px 5px;
  white-space: nowrap;
  background-color: #f8f8f8;
  border-radius: 3px;
  color: #4271ae !important;
  border: 1px solid #cccccc;
}

pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
  color: #000 !important;
}

blockquote p {
  text-indent: 0em;
}

.img-wrapper {
  text-align: center;
}

.img {
  width: 80%;
}

.img--border {
  border: #AAA solid 1px;
}

.caption {
  font-size: 7.5pt;
  line-height: 1.5;
}

엄선된 포인트는 다음과 같습니다.

표제는 고딕체, 본문은 명조체와 다른 폰트를 지정했습니다.

표제(특히 제일 큰 표제)에 장식을 붙여 악센트로 했습니다.

정렬된 목록에 부여된 숫자를 굵게 표시했습니다.
또, 리스트가 2행에 건너갔을 때에 2행째 이후를 기호아래에 오도록(듯이) 조정하고 있습니다.

각 단락의 서두는 글자 내렸습니다. 인용문에서는 글자 내리지 않는 설정으로 하고 있습니다.
의도적으로 들여 쓰기를 원하지 않을 때는 no-jisage 클래스를 지정하면 ok (이름은 적당)

# 奥付
<div class="no-jisage">
<p><strong>本のタイトル</strong><br>
本のサブタイトル</p>
<p>XXXX年X月XX日 初版発行</p>
<p>著者 : @reona396</p>
</div>

이미지와 캡션 클래스를 준비하여 사용하기 쉬워졌습니다. 흰색으로 배경에 녹는 이미지는 img--border를 붙이면 테두리가 붙습니다.

# サンプル
画像掲載のサンプルです。
長い文章、とても長い文章。長い文章、とても長い文章。長い文章、とても長い文章。
長い文章、とても長い文章。長い文章、とても長い文章。長い文章、とても長い文章。

<div class="img-wrapper">
<img src="./artwork.png" class="img"><br>
<div class="caption">これはキャプションのサンプルです。</div>
</div>

A5 사이즈 동인지 설정

2021년 발행분까지는 A4사이즈로 발행하고 있었습니다만, 2022년 발행분부터는 A5사이즈로 출력하고 있습니다.

VScode 확장 Markdonw PDF 설정

Footer Template

<div style="font-size: 8px; margin: 0 auto 2.5mm;"> <span class='pageNumber'></span> </div>

Format ... A5

Height ... 210mm

Bottom...2cm

Left ... 16.9mm

Right ... 16.9mm

Top ... 2cm

Width ... 148mm

작업 공간

{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "markdown-pdf.styles": [
      "./style.css"
    ],
    "markdown-pdf.format": "A5",
  }
}

CSS

베이스는 위에 게재한 CSS와 같고, 문자 사이즈를 변경했습니다.

body {
  ...
  font-size: 9pt;
}