本講義用スライドのテンプレート

　ここでは本講義で使用したスライドのYAMLヘッダーとスタイル（.scssファイル）を紹介する。スライドのQuartoファイルをintro_slide.qmdとし、他の回にも使うYAMLヘッダーやスタイルはそれぞれslide-style.ymlとslide-style.scssという名でstyleフォルダーに格納されているとする¹。

intro_slide.qmdの例

---
title: "1/ Quartoとは"
modified-date: today
format: 
  revealjs:
    footer: "Quartoとは"
    mermaid:
      theme: neutral
metadata-files: 
  - "style/slide-style.yml"
---

style/slide-style.ymlの例

subtitle: "Quartoを使った研究成果と分析プロセスの共有"
author: "宋財泫（関西大学）"
lang: ja
knitr: 
  opts_chunk: 
    dev: ragg_png
    dev.args:
      background: transparent
    dpi: 300
    fig.align: "center"
    fig.width: 6
    fig.height: 3
    echo: false
    message: false
    warning: false
    error: true
format:
  revealjs:
    theme: [default, style/slide-style.scss]
    width: 1200
    height: 900
    link-external-newwindow: true
    slide-number: "c/t"
    html-table-processing: none
    code-line-numbers: false
    code-annotations: select
    auto-stretch: false
    chalkboard: true

style/slide-style.scssの例

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=Noto+Sans+JP:wght@700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css");

/*-- scss:defaults --*/

$font-family-sans-serif: "Noto Sans JP", Helvetica, sans-serif !default;
$font-family-monospace: "M PLUS 1 Code", "Noto Sans JP", monospace !default;
$presentation-h-font12: "Noto Sans JP", sans-serif !default; 
$presentation-h-font36: "Noto Sans JP", sans-serif !default; 

$font-color: #131516;
$background: #F0F5F9;
$accent: #0072BB;
$accent2: #E82825;
$right-arrow: "\2981"; // Unicode character for right arrow

$presentation-heading-color: $font-color !default;
$presentation-heading-font-weight: lighter;
$presentation-font-size-root: 32px;

$body-color: $font-color !default;
$link-color: $accent !default;
$selection-bg: #26351c !default;

/*-- scss:rules --*/

#title-slide {
  text-align: left;

  .title {
    color: #131516;
    font-size: 3em;
    font-weight: light;
  }

  .subtitle {
    font-weight: lighter;
    color: #131516 !important;
    font-size: 1.5em !important;
    font-style: normal !important;
    margin-top: 0em !important;
    font-weight: lighter !important;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color:#D57D2B;
  }

  .author,
  .quarto-title-author-name {
    color: $body-color;
    font-weight: lighter;
  }

  .quarto-title-authors {
    display: flex;
    justify-content: left;

    .quarto-title-author {
      padding-left: 0em;
      padding-right: 0em;
      width: 100%;
    }
  }

}

.reveal {
  background: $background;
  
  p {
    margin-top: 0.5em;
  }
  
  a {
    line-height: 1.5em;
  }
  
  code {
    font-size: 1em;
  }
  
  :not(pre) > code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.1em 0.3em;
    border-radius: 4px;
    font-family: $font-family-monospace;
    font-size: 0.9em;
    border-width: 1px;
    border-style: solid;
    border-color:  rgba(0, 0, 0, 0.2);
  }
  
  code.sourceCode {
    border-left-style: solid;
    border-left-width: 5px;
    border-left-color: #0072BB;
    font-size: 1.5em !important;
  }

  
  .title-slide {
    background: #0072bb;
    
    h1 {
      font-size: 3em !important;
      font-weight: lighter !important;
      text-align: left;
      
      strong {
        font-size: 1.75em;
        font-weight: bolder;
        padding-left: 50px;
        padding-right: 50px;
        border-right-style: solid;
        border-right-width: 5px;
      }
    }
  }
  
  h2 {
    color: #0072bb;
    font-size: 1.5em;
    font-weight: bold;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #D57D2B;
  }
  
  h3, h4 {
    font-weight: bolder;
  }
  
  .slide {
    aside {
      font-size: 0.55em;
    }
  }
  
  .footer {
    color: $accent;
  }
  
  .slide-number {
    color: $accent;
    bottom: 6px !important;
    right: 10px !important;
    top: unset !important;
  }
  
  blockquote > p {
    font-size: 0.9em;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    text-align: justify;
    text-justify: auto;
  }
  
  sup::after {
    content: ")";
  }
  
  ol.aside-footnotes li::marker {
    content: counter(list-item) ") ";
  }
}

ul, ol {
  box-sizing: border-box;
}

li {
    overflow-wrap: anywhere;
    word-break: normal;
    box-sizing: border-box;
    
    text-align: justify; 
    text-justify: inter-ideograph;
}

.reveal pre code {
  background: #F0F5F9 !important;
  max-height: 600px !important;
  font-size: 1.75em !important;
}

figcaption {
  text-align: center;
}

.alert {
  color: $accent2;
}

.tomato {
  color: tomato;
}

.royalblue {
  color: royalblue;
}

.fg {
  color: var(--col, $font-color);
}

.bg {
  background-color: var(--col, #F0F5F9);
  padding: 0.1em;
  border-radius: 5px;
  display: inline-block;
}

.reveal table {
    margin-left: auto !important;
    margin-right: auto !important;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.85em;
    
    th, td {
      border: none;
      padding: .25em;
      text-align: left;
    }
}

.reveal table thead th,
.reveal .slides table tr:last-child td,
.reveal .slides table {
  border-bottom: 2px solid #BCBCBC;
}

.reveal table thead th {
  font-weight: bold;
}

.reveal table caption {
  color: $font-color;
  font-variant: small-caps;
}

.right {
  text-align: right;
  width: 100%;
}

.center {
  text-align: center;
  width: 100%;
}

.small {
  font-size: 0.8em;
}

.uri {
  font-family: $font-family-monospace;
}

脚注

1. 具体的にはintro_slide.qmdが格納されているフォルダーの中にstyleフォルダーが入っていることを意味する。