---
title: '[v2] Get started to slide with PastLeo theme'
tags: slide
type: slide
slideOptions:
spotlight:
enabled: true
size: 80
presentingCursor: "default"
toggleSpotlightOnMouseDown: false
spotlightOnKeyPressAndHold: 90 # 按著 'z' 啟動聚光燈
initialPresentationMode: true
disablingUserSelect: false
fadeInAndOut: 500
allottedMinutes: 5 # 簡報時間分鐘數

# 複製這段 meta YAML 到頂端，並且在 meta YAML 下方加上 {%hackmd BJqmTNgxD %} 引入 style

#  => 無邊框, 陰影圖片

# flex 左右排版:
# <div class="d-flex">
# <div class="flex-1">
#
# 內容，佔 1/3
#
# </div>
# <div class="flex-2">
#
# 內容，佔 2/3
#
# </div>
# </div>

---

<style id='reveal-style'>
.reveal {
background: #ecffe4;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal li {
color: #004a1b;
text-transform: none;
font-family: "Noto Sans", Helvetica, sans-serif;
}
.reveal a { color: #beg005a98; }
.reveal img { max-height: 50vh; }
.reveal img[alt$=.] {
background: none;
border: none;
box-shadow: none;
}
.reveal .notes { display: none; }
#doc .notes {
border: 1px solid #7cf5a4;
background: black;
color: #7cf5a4;
padding: 25px 10px 0px;
opacity: 0.8;
}

.reveal pre, .reveal code {
font-family: "Source Code Pro", monospace;
color: black;
}
.reveal pre {
font-size: 0.75em;
}
.reveal code {
background: #fff;
padding: 0.5rem;
border-radius: 0.25em;
}
</style>

<style id='reveal-ext'>
.reveal img[alt$=\.] {
background: none;
border: none;
box-shadow: none;
}
.reveal .d-flex {
display: flex;
align-items: center;
}
.reveal .flex-1 {
flex: 1;
}
.reveal .flex-2 {
flex: 2;
}
.reveal .flex-3 {
flex: 3;
}
</style>

<style id='xcode-highlight'>
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #fff;
color: black;
}

.hljs-function,
.token.function,
.hljs-punctuation,
.token.punctuation,
.hljs-operator,
.token.operator,
.hljs-constant,
.token.constant
{
color: black;
}

.hljs-comment,
.token.comment,
.hljs-quote,
.token.quote
{
color: #006a00;
}

.hljs-keyword,
.token.keyword,
.hljs-selector-tag,
.token.selector-tag,
.hljs-literal,
.token.literal
{
color: #aa0d91;
}

.hljs-name,
.token.name
{
color: #008;
}

.hljs-variable,
.token.variable,
.hljs-template-variable,
.token.template-variable
{
color: #660;
}

.hljs-string,
.token.string
{
color: #c41a16;
}

.hljs-regexp,
.token.regexp,
.hljs-link,
.token.link
{
color: #080;
}

.hljs-title,
.token.title,
.hljs-tag,
.token.tag,
.hljs-symbol,
.token.symbol,
.hljs-bullet,
.token.bullet,
.hljs-number,
.token.number,
.hljs-meta,
.token.meta
{
color: #1c00cf;
}

.hljs-section,
.token.section,
.hljs-class .hljs-title,
.token.class-name,
.hljs-type,
.token.type,
.hljs-attr,
.token.attr,
.hljs-built_in,
.token.built_in,
.hljs-builtin-name,
.token.builtin-name,
.hljs-params,
.token.params
{
color: #5c2699;
}

.hljs-attribute,
.token.attribute,
.hljs-subst,
.token.subst
{
color: #000;
}

.hljs-formula,
.token.formula
{
background-color: #eee;
font-style: italic;
}

.hljs-addition
.token.addition
{
background-color: #baeeba;
}

.hljs-deletion,
.token.deletion
{
background-color: #ffc8bd;
}

.hljs-selector-id,
.token.selector-id,
.hljs-selector-class,
.token.selector-class
{
color: #9b703f;
}

.hljs-doctag,
.token.doctag,
.hljs-strong,
.token.strong
{
font-weight: bold;
}

.hljs-emphasis
.token.emphasis
{
font-style: italic;
}
</style>

<style id='progress'>
.progress > div {
background-color: #7da06f !important;
}
</style>