VS Code와 Markdown에서 쓴 기술 동인지에 도입한 CSS 조판
기술 동인지를 쓰고 있습니다.
기술 서전에 내기 위해 기술 동인지를 쓰고 있습니다.
모든 책은 Markdown에서 작성되었습니다.
모든 책을 읽을 수 있도록 하고 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;
}
엄선된 포인트는 다음과 같습니다.
이 기사를 참고로했습니다.
【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;
}
엄선된 포인트는 다음과 같습니다.
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 설정
<div style="font-size: 8px; margin: 0 auto 2.5mm;"> <span class='pageNumber'></span> </div>
작업 공간
{
"folders": [
{
"path": "."
}
],
"settings": {
"markdown-pdf.styles": [
"./style.css"
],
"markdown-pdf.format": "A5",
}
}
CSS
베이스는 위에 게재한 CSS와 같고, 문자 사이즈를 변경했습니다.
body {
...
font-size: 9pt;
}
Reference
이 문제에 관하여(VS Code와 Markdown에서 쓴 기술 동인지에 도입한 CSS 조판), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/reona396/items/8ad9a4ca59f10257e073텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)