Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@lambdaef(ΛF)

MarkdownからPDFを生成する環境構築手順（VSCode＋Markdown PDF）

Posted at

はじめに

VSCodeでMarkdownをPDF化するには、拡張機能 Markdown PDF を用いる方法が最も手軽である。本記事では以下の順序に従い、設定とカスタマイズを行いながら、安定したスタイルのPDFを出力する手順を整理する。

1. 拡張機能をインストールする

  1. VSCode左側の拡張機能アイコンをクリックする
  2. 検索欄に Markdown PDF と入力する
  3. インストールを押す
  4. 内部コンポーネント（Chromium）の準備完了後、必要に応じてVSCodeを再起動する

これによりMarkdownをPDFへ変換する環境が整う。

2. settings.json に設定を追加する

Markdown PDFを使いやすくするため、次の設定をsettings.jsonに追記する。

{
  "markdown-pdf.styles": [
    "./style.css"
  ],
  "markdown-pdf.includeDefaultStyles": false,
  "markdown-pdf.displayHeaderFooter": false,
  "markdown-pdf.margin.top": "1cm",
  "markdown-pdf.outputDirectory": "output"
}

各項目の意図は次のとおりである。

設定 内容
styles 自作CSSを読み込む
includeDefaultStyles VSCodeの既定CSSを無効化
displayHeaderFooter PDFのヘッダー/フッターを非表示
margin.top 上部余白1cm
outputDirectory output/フォルダに出力

3. GitHub風のstyle.cssを用意する

Markdown PDFはデフォルトでは体裁が素朴であるため、CSSを用いて見た目を整えるとよい。ここではGitHub Markdown CSSをベースとする。

3-1. CSSを取得する

以下リポジトリより github-markdown.css を取得し、style.css として配置する。
https://github.com/sindresorhus/github-markdown-css

3-2. 必要な調整を行う

  • .markdown- を削除する
    Markdown PDFは.markdown-bodyなどのクラスを付与しないため、CSS中の.markdown-を空文字に置換する。

  • コードブロックの折返し設定
    white-space: pre; を white-space: pre-wrap; に変更することで、長いコード行がPDF内で正しく折り返される。

  • ダークテーマ用配色をライトテーマに統一
    body, [data-theme="dark"] { ... } の内容を
    body, [data-theme="light"] { ... } の内容に置き換える。
    印刷物ではライトテーマが適しているためである。

4. PDFを出力する

  1. 変換対象の.mdファイルを開く
  2. エディタ内で右クリック
  3. Markdown PDF: Export (pdf) を選択する

参考

css全文

以下は、前述の調整を反映したstyle.cssである。

body {
  --base-size-4: 0.25rem;
  --base-size-8: 0.5rem;
  --base-size-16: 1rem;
  --base-size-24: 1.5rem;
  --base-size-40: 2.5rem;
  --base-text-weight-normal: 400;
  --base-text-weight-medium: 500;
  --base-text-weight-semibold: 600;
  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  --fgColor-accent: Highlight;
}
@media (prefers-color-scheme: dark) {
  body, [data-theme="dark"] {
    /* dark */
    color-scheme: light;
    --focus-outlineColor: #0969da;
    --fgColor-default: #1f2328;
    --fgColor-muted: #59636e;
    --fgColor-accent: #0969da;
    --fgColor-success: #1a7f37;
    --fgColor-attention: #9a6700;
    --fgColor-danger: #d1242f;
    --fgColor-done: #8250df;
    --bgColor-default: #ffffff;
    --bgColor-muted: #f6f8fa;
    --bgColor-neutral-muted: #818b981f;
    --bgColor-attention-muted: #fff8c5;
    --borderColor-default: #d1d9e0;
    --borderColor-muted: #d1d9e0b3;
    --borderColor-neutral-muted: #d1d9e0b3;
    --borderColor-accent-emphasis: #0969da;
    --borderColor-success-emphasis: #1a7f37;
    --borderColor-attention-emphasis: #9a6700;
    --borderColor-danger-emphasis: #cf222e;
    --borderColor-done-emphasis: #8250df;
    --color-prettylights-syntax-comment: #59636e;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
    --color-prettylights-syntax-entity: #6639ba;
    --color-prettylights-syntax-storage-modifier-import: #1f2328;
    --color-prettylights-syntax-entity-tag: #0550ae;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-brackethighlighter-angle: #59636e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #1f2328;
    --color-prettylights-syntax-markup-bold: #1f2328;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #d1d9e0;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
  }
}
@media (prefers-color-scheme: light) {
  body, [data-theme="light"] {
    /* light */
    color-scheme: light;
    --focus-outlineColor: #0969da;
    --fgColor-default: #1f2328;
    --fgColor-muted: #59636e;
    --fgColor-accent: #0969da;
    --fgColor-success: #1a7f37;
    --fgColor-attention: #9a6700;
    --fgColor-danger: #d1242f;
    --fgColor-done: #8250df;
    --bgColor-default: #ffffff;
    --bgColor-muted: #f6f8fa;
    --bgColor-neutral-muted: #818b981f;
    --bgColor-attention-muted: #fff8c5;
    --borderColor-default: #d1d9e0;
    --borderColor-muted: #d1d9e0b3;
    --borderColor-neutral-muted: #d1d9e0b3;
    --borderColor-accent-emphasis: #0969da;
    --borderColor-success-emphasis: #1a7f37;
    --borderColor-attention-emphasis: #9a6700;
    --borderColor-danger-emphasis: #cf222e;
    --borderColor-done-emphasis: #8250df;
    --color-prettylights-syntax-comment: #59636e;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
    --color-prettylights-syntax-entity: #6639ba;
    --color-prettylights-syntax-storage-modifier-import: #1f2328;
    --color-prettylights-syntax-entity-tag: #0550ae;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-brackethighlighter-angle: #59636e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #1f2328;
    --color-prettylights-syntax-markup-bold: #1f2328;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #d1d9e0;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
  }
}

body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  color: var(--fgColor-default);
  background-color: var(--bgColor-default);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

body .octicon {
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom;
}

body h1:hover .anchor .octicon-link:before,
body h2:hover .anchor .octicon-link:before,
body h3:hover .anchor .octicon-link:before,
body h4:hover .anchor .octicon-link:before,
body h5:hover .anchor .octicon-link:before,
body h6:hover .anchor .octicon-link:before {
  width: 16px;
  height: 16px;
  content: ' ';
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
}

body details,
body figcaption,
body figure {
  display: block;
}

body summary {
  display: list-item;
}

body [hidden] {
  display: none !important;
}

body a {
  background-color: transparent;
  color: var(--fgColor-accent);
  text-decoration: none;
}

body abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

body b,
body strong {
  font-weight: var(--base-text-weight-semibold, 600);
}

body dfn {
  font-style: italic;
}

body h1 {
  margin: .67em 0;
  font-weight: var(--base-text-weight-semibold, 600);
  padding-bottom: .3em;
  font-size: 2em;
  border-bottom: 1px solid var(--borderColor-muted);
}

body mark {
  background-color: var(--bgColor-attention-muted);
  color: var(--fgColor-default);
}

body small {
  font-size: 90%;
}

body sub,
body sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

body sub {
  bottom: -0.25em;
}

body sup {
  top: -0.5em;
}

body img {
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
}

body code,
body kbd,
body pre,
body samp {
  font-family: monospace;
  font-size: 1em;
}

body figure {
  margin: 1em var(--base-size-40);
}

body hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid var(--borderColor-muted);
  height: .25em;
  padding: 0;
  margin: var(--base-size-24) 0;
  background-color: var(--borderColor-default);
  border: 0;
}

body input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

body [type=button],
body [type=reset],
body [type=submit] {
  -webkit-appearance: button;
  appearance: button;
}

body [type=checkbox],
body [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

body [type=number]::-webkit-inner-spin-button,
body [type=number]::-webkit-outer-spin-button {
  height: auto;
}

body [type=search]::-webkit-search-cancel-button,
body [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

body ::-webkit-input-placeholder {
  color: inherit;
  opacity: .54;
}

body ::-webkit-file-upload-button {
  -webkit-appearance: button;
  appearance: button;
  font: inherit;
}

body a:hover {
  text-decoration: underline;
}

body ::placeholder {
  color: var(--fgColor-muted);
  opacity: 1;
}

body hr::before {
  display: table;
  content: "";
}

body hr::after {
  display: table;
  clear: both;
  content: "";
}

body table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  font-variant: tabular-nums;
}

body td,
body th {
  padding: 0;
}

body details summary {
  cursor: pointer;
}

body a:focus,
body [role=button]:focus,
body input[type=radio]:focus,
body input[type=checkbox]:focus {
  outline: 2px solid var(--focus-outlineColor);
  outline-offset: -2px;
  box-shadow: none;
}

body a:focus:not(:focus-visible),
body [role=button]:focus:not(:focus-visible),
body input[type=radio]:focus:not(:focus-visible),
body input[type=checkbox]:focus:not(:focus-visible) {
  outline: solid 1px transparent;
}

body a:focus-visible,
body [role=button]:focus-visible,
body input[type=radio]:focus-visible,
body input[type=checkbox]:focus-visible {
  outline: 2px solid var(--focus-outlineColor);
  outline-offset: -2px;
  box-shadow: none;
}

body a:not([class]):focus,
body a:not([class]):focus-visible,
body input[type=radio]:focus,
body input[type=radio]:focus-visible,
body input[type=checkbox]:focus,
body input[type=checkbox]:focus-visible {
  outline-offset: 0;
}

body kbd {
  display: inline-block;
  padding: var(--base-size-4);
  font: 11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
  line-height: 10px;
  color: var(--fgColor-default);
  vertical-align: middle;
  background-color: var(--bgColor-muted);
  border: solid 1px var(--borderColor-neutral-muted);
  border-bottom-color: var(--borderColor-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  margin-top: var(--base-size-24);
  margin-bottom: var(--base-size-16);
  font-weight: var(--base-text-weight-semibold, 600);
  line-height: 1.25;
}

body h2 {
  font-weight: var(--base-text-weight-semibold, 600);
  padding-bottom: .3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--borderColor-muted);
}

body h3 {
  font-weight: var(--base-text-weight-semibold, 600);
  font-size: 1.25em;
}

body h4 {
  font-weight: var(--base-text-weight-semibold, 600);
  font-size: 1em;
}

body h5 {
  font-weight: var(--base-text-weight-semibold, 600);
  font-size: .875em;
}

body h6 {
  font-weight: var(--base-text-weight-semibold, 600);
  font-size: .85em;
  color: var(--fgColor-muted);
}

body p {
  margin-top: 0;
  margin-bottom: 10px;
}

body blockquote {
  margin: 0;
  padding: 0 1em;
  color: var(--fgColor-muted);
  border-left: .25em solid var(--borderColor-default);
}

body ul,
body ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}

body ol ol,
body ul ol {
  list-style-type: lower-roman;
}

body ul ul ol,
body ul ol ol,
body ol ul ol,
body ol ol ol {
  list-style-type: lower-alpha;
}

body dd {
  margin-left: 0;
}

body tt,
body code,
body samp {
  font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
  font-size: 12px;
}

body pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
  font-size: 12px;
  word-wrap: normal;
}

body .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

body input::-webkit-outer-spin-button,
body input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

body .mr-2 {
  margin-right: var(--base-size-8, 8px) !important;
}

body::before {
  display: table;
  content: "";
}

body::after {
  display: table;
  clear: both;
  content: "";
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

body .absent {
  color: var(--fgColor-danger);
}

body .anchor {
  float: left;
  padding-right: var(--base-size-4);
  margin-left: -20px;
  line-height: 1;
}

body .anchor:focus {
  outline: none;
}

body p,
body blockquote,
body ul,
body ol,
body dl,
body table,
body pre,
body details {
  margin-top: 0;
  margin-bottom: var(--base-size-16);
}

body blockquote>:first-child {
  margin-top: 0;
}

body blockquote>:last-child {
  margin-bottom: 0;
}

body h1 .octicon-link,
body h2 .octicon-link,
body h3 .octicon-link,
body h4 .octicon-link,
body h5 .octicon-link,
body h6 .octicon-link {
  color: var(--fgColor-default);
  vertical-align: middle;
  visibility: hidden;
}

body h1:hover .anchor,
body h2:hover .anchor,
body h3:hover .anchor,
body h4:hover .anchor,
body h5:hover .anchor,
body h6:hover .anchor {
  text-decoration: none;
}

body h1:hover .anchor .octicon-link,
body h2:hover .anchor .octicon-link,
body h3:hover .anchor .octicon-link,
body h4:hover .anchor .octicon-link,
body h5:hover .anchor .octicon-link,
body h6:hover .anchor .octicon-link {
  visibility: visible;
}

body h1 tt,
body h1 code,
body h2 tt,
body h2 code,
body h3 tt,
body h3 code,
body h4 tt,
body h4 code,
body h5 tt,
body h5 code,
body h6 tt,
body h6 code {
  padding: 0 .2em;
  font-size: inherit;
}

body summary h1,
body summary h2,
body summary h3,
body summary h4,
body summary h5,
body summary h6 {
  display: inline-block;
}

body summary h1 .anchor,
body summary h2 .anchor,
body summary h3 .anchor,
body summary h4 .anchor,
body summary h5 .anchor,
body summary h6 .anchor {
  margin-left: -40px;
}

body summary h1,
body summary h2 {
  padding-bottom: 0;
  border-bottom: 0;
}

body ul.no-list,
body ol.no-list {
  padding: 0;
  list-style-type: none;
}

body ol[type="a s"] {
  list-style-type: lower-alpha;
}

body ol[type="A s"] {
  list-style-type: upper-alpha;
}

body ol[type="i s"] {
  list-style-type: lower-roman;
}

body ol[type="I s"] {
  list-style-type: upper-roman;
}

body ol[type="1"] {
  list-style-type: decimal;
}

body div>ol:not([type]) {
  list-style-type: decimal;
}

body ul ul,
body ul ol,
body ol ol,
body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

body li>p {
  margin-top: var(--base-size-16);
}

body li+li {
  margin-top: .25em;
}

body dl {
  padding: 0;
}

body dl dt {
  padding: 0;
  margin-top: var(--base-size-16);
  font-size: 1em;
  font-style: italic;
  font-weight: var(--base-text-weight-semibold, 600);
}

body dl dd {
  padding: 0 var(--base-size-16);
  margin-bottom: var(--base-size-16);
}

body table th {
  font-weight: var(--base-text-weight-semibold, 600);
}

body table th,
body table td {
  padding: 6px 13px;
  border: 1px solid var(--borderColor-default);
}

body table td>:last-child {
  margin-bottom: 0;
}

body table tr {
  background-color: var(--bgColor-default);
  border-top: 1px solid var(--borderColor-muted);
}

body table tr:nth-child(2n) {
  background-color: var(--bgColor-muted);
}

body table img {
  background-color: transparent;
}

body img[align=right] {
  padding-left: 20px;
}

body img[align=left] {
  padding-right: 20px;
}

body .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}

body span.frame {
  display: block;
  overflow: hidden;
}

body span.frame>span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid var(--borderColor-default);
}

body span.frame span img {
  display: block;
  float: left;
}

body span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: var(--fgColor-default);
}

body span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}

body span.align-center>span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}

body span.align-center span img {
  margin: 0 auto;
  text-align: center;
}

body span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}

body span.align-right>span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}

body span.align-right span img {
  margin: 0;
  text-align: right;
}

body span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}

body span.float-left span {
  margin: 13px 0 0;
}

body span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}

body span.float-right>span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}

body code,
body tt {
  padding: .2em .4em;
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
  background-color: var(--bgColor-neutral-muted);
  border-radius: 6px;
}

body code br,
body tt br {
  display: none;
}

body del code {
  text-decoration: inherit;
}

body samp {
  font-size: 85%;
}

body pre code {
  font-size: 100%;
}

body pre>code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre-wrap;
  background: transparent;
  border: 0;
}

body .highlight {
  margin-bottom: var(--base-size-16);
}

body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

body .highlight pre,
body pre {
  padding: var(--base-size-16);
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  color: var(--fgColor-default);
  background-color: var(--bgColor-muted);
  border-radius: 6px;
}

body pre code,
body pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

body .csv-data td,
body .csv-data th {
  padding: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

body .csv-data .blob-num {
  padding: 10px var(--base-size-8) 9px;
  text-align: right;
  background: var(--bgColor-default);
  border: 0;
}

body .csv-data tr {
  border-top: 0;
}

body .csv-data th {
  font-weight: var(--base-text-weight-semibold, 600);
  background: var(--bgColor-muted);
  border-top: 0;
}

body [data-footnote-ref]::before {
  content: "[";
}

body [data-footnote-ref]::after {
  content: "]";
}

body .footnotes {
  font-size: 12px;
  color: var(--fgColor-muted);
  border-top: 1px solid var(--borderColor-default);
}

body .footnotes ol {
  padding-left: var(--base-size-16);
}

body .footnotes ol ul {
  display: inline-block;
  padding-left: var(--base-size-16);
  margin-top: var(--base-size-16);
}

body .footnotes li {
  position: relative;
}

body .footnotes li:target::before {
  position: absolute;
  top: calc(var(--base-size-8)*-1);
  right: calc(var(--base-size-8)*-1);
  bottom: calc(var(--base-size-8)*-1);
  left: calc(var(--base-size-24)*-1);
  pointer-events: none;
  content: "";
  border: 2px solid var(--borderColor-accent-emphasis);
  border-radius: 6px;
}

body .footnotes li:target {
  color: var(--fgColor-default);
}

body .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}

body body:has(:modal) {
  padding-right: var(--dialog-scrollgutter) !important;
}

body .pl-c {
  color: var(--color-prettylights-syntax-comment);
}

body .pl-c1,
body .pl-s .pl-v {
  color: var(--color-prettylights-syntax-constant);
}

body .pl-e,
body .pl-en {
  color: var(--color-prettylights-syntax-entity);
}

body .pl-smi,
body .pl-s .pl-s1 {
  color: var(--color-prettylights-syntax-storage-modifier-import);
}

body .pl-ent {
  color: var(--color-prettylights-syntax-entity-tag);
}

body .pl-k {
  color: var(--color-prettylights-syntax-keyword);
}

body .pl-s,
body .pl-pds,
body .pl-s .pl-pse .pl-s1,
body .pl-sr,
body .pl-sr .pl-cce,
body .pl-sr .pl-sre,
body .pl-sr .pl-sra {
  color: var(--color-prettylights-syntax-string);
}

body .pl-v,
body .pl-smw {
  color: var(--color-prettylights-syntax-variable);
}

body .pl-bu {
  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
}

body .pl-ii {
  color: var(--color-prettylights-syntax-invalid-illegal-text);
  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
}

body .pl-c2 {
  color: var(--color-prettylights-syntax-carriage-return-text);
  background-color: var(--color-prettylights-syntax-carriage-return-bg);
}

body .pl-sr .pl-cce {
  font-weight: bold;
  color: var(--color-prettylights-syntax-string-regexp);
}

body .pl-ml {
  color: var(--color-prettylights-syntax-markup-list);
}

body .pl-mh,
body .pl-mh .pl-en,
body .pl-ms {
  font-weight: bold;
  color: var(--color-prettylights-syntax-markup-heading);
}

body .pl-mi {
  font-style: italic;
  color: var(--color-prettylights-syntax-markup-italic);
}

body .pl-mb {
  font-weight: bold;
  color: var(--color-prettylights-syntax-markup-bold);
}

body .pl-md {
  color: var(--color-prettylights-syntax-markup-deleted-text);
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}

body .pl-mi1 {
  color: var(--color-prettylights-syntax-markup-inserted-text);
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}

body .pl-mc {
  color: var(--color-prettylights-syntax-markup-changed-text);
  background-color: var(--color-prettylights-syntax-markup-changed-bg);
}

body .pl-mi2 {
  color: var(--color-prettylights-syntax-markup-ignored-text);
  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
}

body .pl-mdr {
  font-weight: bold;
  color: var(--color-prettylights-syntax-meta-diff-range);
}

body .pl-ba {
  color: var(--color-prettylights-syntax-brackethighlighter-angle);
}

body .pl-sg {
  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
}

body .pl-corl {
  text-decoration: underline;
  color: var(--color-prettylights-syntax-constant-other-reference-link);
}

body [role=button]:focus:not(:focus-visible),
body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),
body button:focus:not(:focus-visible),
body summary:focus:not(:focus-visible),
body a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

body [tabindex="0"]:focus:not(:focus-visible),
body details-dialog:focus:not(:focus-visible) {
  outline: none;
}

body g-emoji {
  display: inline-block;
  min-width: 1ch;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 1em;
  font-style: normal !important;
  font-weight: var(--base-text-weight-normal, 400);
  line-height: 1;
  vertical-align: -0.075em;
}

body g-emoji img {
  width: 1em;
  height: 1em;
}

body .task-list-item {
  list-style-type: none;
}

body .task-list-item label {
  font-weight: var(--base-text-weight-normal, 400);
}

body .task-list-item.enabled label {
  cursor: pointer;
}

body .task-list-item+.task-list-item {
  margin-top: var(--base-size-4);
}

body .task-list-item .handle {
  display: none;
}

body .task-list-item-checkbox {
  margin: 0 .2em .25em -1.4em;
  vertical-align: middle;
}

body ul:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em .25em .2em;
}

body ol:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em .25em .2em;
}

body .contains-task-list:hover .task-list-item-convert-container,
body .contains-task-list:focus-within .task-list-item-convert-container {
  display: block;
  width: auto;
  height: 24px;
  overflow: visible;
  clip: auto;
}

body ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
}

body alert {
  padding: var(--base-size-8) var(--base-size-16);
  margin-bottom: var(--base-size-16);
  color: inherit;
  border-left: .25em solid var(--borderColor-default);
}

body alert>:first-child {
  margin-top: 0;
}

body alert>:last-child {
  margin-bottom: 0;
}

body alert alert-title {
  display: flex;
  font-weight: var(--base-text-weight-medium, 500);
  align-items: center;
  line-height: 1;
}

body alertalert-note {
  border-left-color: var(--borderColor-accent-emphasis);
}

body alertalert-note alert-title {
  color: var(--fgColor-accent);
}

body alertalert-important {
  border-left-color: var(--borderColor-done-emphasis);
}

body alertalert-important alert-title {
  color: var(--fgColor-done);
}

body alertalert-warning {
  border-left-color: var(--borderColor-attention-emphasis);
}

body alertalert-warning alert-title {
  color: var(--fgColor-attention);
}

body alertalert-tip {
  border-left-color: var(--borderColor-success-emphasis);
}

body alertalert-tip alert-title {
  color: var(--fgColor-success);
}

body alertalert-caution {
  border-left-color: var(--borderColor-danger-emphasis);
}

body alertalert-caution alert-title {
  color: var(--fgColor-danger);
}

body>*:first-child>.heading-element:first-child {
  margin-top: 0 !important;
}

body .highlight pre:has(+.zeroclipboard-container) {
  min-height: 52px;
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?