Preview Test Slide

@yKicchan

Markdown

Markdown

# Header 1

## Header 2

### Header 3

#### Header 4

Markdown

List item

  • Unordered List
  • Unordered List
  • Unordered List
  1. Oredered List
  2. Oredered List
  3. Oredered List
Markdown

Nested List

  • Parent List
    • Children
    • Children
  • Parent List
    • Children
    • Children
Markdown

Table

header header header header
body body body body
body body body body
body body body body
Markdown

Quote

Block quote
Block quote

Markdown

https://example.com

link

Markdown

Font

bold
italic
mistaken
inline code

Markdown

Code Block

const example = "string";
type Props = { key: string; value: number; };
const props: Props = { key: "k", value: 123 };

function doSomething() {
  console.log(example);
}
Markdown

Image

w:64
w:128
w:256

Markdown

Table & Image

key value
class bg
size w:512
position right

Custom CSS Class

Custom CSS Class

.c

Columns

Columns

Custom CSS Class

.fit

No fitting

Fitted

Custom CSS Class

Margin

.m-0

.mt-1

.mb-1

.ml-1

.mr-1

Custom CSS Class

Font size .text-XX

xl5
xl4

xl3
xl2
xl1
xl

lg
sm
xs
xs2
xs3

Custom CSS Class

Colors

.white

.gray

.red

.purple

.blue

.light-blue

.green

.yellow

Custom CSS Class

Colors

.black

.gray

.red

.purple

.blue

.light-blue

.green

.yellow

Custom CSS Class

CodeBlock name=filename

interface P {
  value: string;
  onSubmit: (v: string) => void;
}

export const Component: FC<P> = ({ value, onSubmit }) => (
  <button type="button" onClick={() => onSubmit(value)}>
    {value}
  </button>
);
Custom CSS Class

Alert

This is note text
by .note

This is important text
by .important

by .tip

by .warning

by .caution

Plugins

Plugins

Container

  • :::c: columns
  • :::_: dummy
:::c

content

content

:::
<div class="c">
  <p>content</p>
  <p>content</p>
</div>
Plugins

Attributes

  • {.any-class}
  • {any-attr=value}
- content{.one}
- content{attr=two}
{.zero}
<ul class="zero">
  <li class="one">content</li>
  <li attr="two"">content</li>
</ul>
Plugins

Mark

==mark==
<mark>mark</mark>
Plugins

Ins

++ins++
<ins>ins</ins>
Plugins

PlantUML

@startuml
participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7
Foo -> Foo1 : To actor 
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml
uml diagram
Plugins

DOT

digraph example1 {
    1 -> 2 -> { 4, 5 };
    1 -> 3 -> { 6, 7 };
}
uml diagram