" />
+ - 0:00:00
Notes for current slide
Notes for next slide

Kunoichi ⚔くノ一

A xaringan theme for the R-Ladies ninja



Emi Tanaka  @statsgen



2018-09-08, Updated: 2019-10-25

1 / 27

Kunoichi

⚔

くノ一

2 / 27

Kunoichi

⚔

くノ一

The Japanese word for female ninja

2 / 27

Kunoichi

⚔

くノ一

The Japanese word for female ninja

2 / 27

Now part of latest development version of xaringan


devtools::install_github('yihui/xaringan')


and add

output:
  xaringan::moon_reader:
    css: ["kunoichi", "ninjutsu"]
3 / 27

Split Cells

4 / 27

A kunoichi can use ninjutsu to split columns easily.


Define your classes as*

class: split-two white

Columns are added easily by

.column.bg-main1[.content[
  content of first column
]]
.column.bg-main2[.content[
  content of second column
]]

See the R-markdown source file for this slide here.



* class white changes all the font to white

5 / 27

Use as many columns as you want*.

class: split-three white
.column.bg-main1[.content[
  content of first column
]]
.column[.content[
.split-two[
.column.bg-black[.content.vmiddle.center[
      This column just got chopped in half.
     ]]
.column.bg-indigo[.content.vmiddle.center[
      This column just got chopped in half.
     ]]
]]]
.column.bg-main1[.content[
  content of third column
]]

This column just got chopped in half.

This column just got chopped in half.

* only goes up to split-five


Note: split within split will not work well with later feature.

6 / 27

A kunoichi can also use ninjutsu to split rows easily.

Same classes:

class: split-three white

Just add .row instead of .column

7 / 27

You can have a border between splits:

 class: split-two with-border

Or have it thicker

 class: split-two with-thick-border

And easily change border colors

 class: split-two with-thick-border border-green

Note that to change row-wise border color here, you need to change .split-three to .split-three.border-green.

8 / 27

Define the layout and for sequence hide the appropriate cell.

You can have a border between splits:

 class: split-two with-border

Or have it thicker

 class: split-two with-thick-border

And easily change border colors

 class: split-two with-thick-border border-green

Note that to change row-wise border color here, you need to change .split-three to .split-three.border-green.

8 / 27

Define the layout and for sequence hide the appropriate cell.

You can have a border between splits:

 class: split-two with-border

Or have it thicker

 class: split-two with-thick-border

And easily change border colors

 class: split-two with-thick-border border-green

Note that to change row-wise border color here, you need to change .split-three to .split-three.border-green.

8 / 27

Define the layout and for sequence hide the appropriate cell.

A kunoichi can use ninpo to easily transform colors.

class: split-three white
.column.bg-red[.content[
  content of first column
  ]]
.column.bg-blue[.content[
  content of second column
]]
.column.bg-green[.content[
  content of third column
]]

You can easily change text color as well

.bg-white[
.red[this will be red]
.green[this will be green]
]

Output:

this will be red this will be green

Some available colors are:

.brown .gray .blue-gray


.white .black


Other list of predefined colors here.

kunoichi theme comes with four pre-defined shades of purple:


.bg-main1



.bg-main2



.bg-main3



.bg-main4

9 / 27

Row-1, Col-1

.red

Row-2, Col-1

.pink

Row-3, Col-1

.purple

Row-4, Col-1

.deep-purple

Row-1, Col-2

.cyan

Row-2, Col-2

.light-blue

Row-3, Col-2

.blue

Row-4, Col-2

.indigo

Row-1, Col-3

.teal

Row-2, Col-3

.green

Row-3, Col-3

.light-green

Row-4, Col-3

.lime

Row-1, Col-4

.deep-orange

Row-2, Col-4

.orange

Row-3, Col-4

.amber

Row-4, Col-4

.yellow

Material UI colors

10 / 27

Row-1, Col-1

.bg-red

Row-2, Col-1

.bg-pink

Row-3, Col-1

.bg-purple

Row-4, Col-1

.bg-deep-purple

Row-1, Col-2

.bg-cyan

Row-2, Col-2

.bg-light-blue

Row-3, Col-2

.bg-blue

Row-4, Col-2

.bg-indigo

Row-1, Col-3

.bg-teal

Row-2, Col-3

.bg-green

Row-3, Col-3

.bg-light-green

Row-4, Col-3

.bg-lime

Row-1, Col-4

.bg-deep-orange

Row-2, Col-4

.bg-orange

Row-3, Col-4

.bg-amber

Row-4, Col-4

.bg-yellow

Material UI colors

11 / 27

I contemplated naming split as bunshin, the Japanese word for clone.

]

But I figured it wasn't a clone.

I also wouldn't make you remember words from a reference you may not know.

I lie.

12 / 27

I contemplated naming split as bunshin, the Japanese word for clone.

]

But I figured it wasn't a clone.

I also wouldn't make you remember words from a reference you may not know.

I lie.

12 / 27

I contemplated naming split as bunshin, the Japanese word for clone.

]

But I figured it wasn't a clone.

I also wouldn't make you remember words from a reference you may not know.

I lie.

12 / 27

I contemplated naming split as bunshin, the Japanese word for clone.

]

But I figured it wasn't a clone.

I also wouldn't make you remember words from a reference you may not know.

I lie.

12 / 27

I contemplated naming split as bunshin, the Japanese word for clone.

]

But I figured it wasn't a clone.

I also wouldn't make you remember words from a reference you may not know.

I lie.

This is

class: shuriken-200

12 / 27

I contemplated naming split as bunshin, the Japanese word for clone.

]

But I figured it wasn't a clone.

I also wouldn't make you remember words from a reference you may not know.

I lie.

This is

class: shuriken-reverse-200

13 / 27

This is .blade1

]

This is .blade2

This is .blade3

This is .blade4

This is .hole

class: shuriken-100

with

white

with-thick-border

border-double

14 / 27

To build this slide, define your shuriken class. Then your slide content should contain

      .blade1[.content[]]      .blade4[.content[]]
      .blade2[.content[]]      .hole[.content[]]
      .blade3[.content[]]

To write vertically

.blade2[.content.vertical-rl[]]
.blade2[.content.sideways-rl[]]

Vertical writing may need manual fixes however.

A future update may fix this but if you have a solution, feel free to put in a pull request .

To write vertically the other way

            ↓

class: shuriken-300

15 / 27

Cell Sequential Reveal

16 / 27

Making split cells is great but to reveal it one slide at a time, I copied the content of the slide multiple times and deleted cell content that I wanted to hide. That's what I did for the slide here.

When I made changes to one slide, I had to make the changes for other slides.


It was painful.


Using the power of ninjutsu this is made much easier.

Using ninjutsu, you only need to maintain one layout slide.


It is a matter of then defining certain classes to reveal cells in subsequent slides.

Do you want to learn this power?

17 / 27

Making split cells is great but to reveal it one slide at a time, I copied the content of the slide multiple times and deleted cell content that I wanted to hide. That's what I did for the slide here.

When I made changes to one slide, I had to make the changes for other slides.


It was painful.


Using the power of ninjutsu this is made much easier.

Using ninjutsu, you only need to maintain one layout slide.


It is a matter of then defining certain classes to reveal cells in subsequent slides.

Do you want to learn this power?

17 / 27

Making split cells is great but to reveal it one slide at a time, I copied the content of the slide multiple times and deleted cell content that I wanted to hide. That's what I did for the slide here.

When I made changes to one slide, I had to make the changes for other slides.


It was painful.


Using the power of ninjutsu this is made much easier.

Using ninjutsu, you only need to maintain one layout slide.


It is a matter of then defining certain classes to reveal cells in subsequent slides.

Do you want to learn this power?

17 / 27

Layout Slide



This is where you should write out full the content of your slides.

First you need to define your full slide structure.

layout: true
class: split-four 
.column.bg-main1[.content.vmiddle.center[
# Content 1
]]
.column.bg-main2[.content.vmiddle.center[
# Content 2
]]
.column.bg-main3[.content.vmiddle.center[
# Content 3
]]
.column.bg-main4[.content.vmiddle.center[
# Content 4
]]

Note: .vmiddle.center centers the content vertically and horizontally.

Note: you need to have a .content container, otherwise hide may not work

18 / 27

Revealing slide content from left to right column

In the subsequent slides define the classes as you want to show it

---
class: show-1000
---
class: show-1100
count: false
---
class: show-1110
count: false
---
count: false

Setting count:false stops from incrementing the slide number.

Set layout:false for the next slide to stop layout template!

19 / 27

Column reveal can be whatever order you like.

This shows the inner two columns only first then the outer columns only in the next slide.

---
class: show-0110
---
class: show-1001
count: false

Or equivalently you can use

---
class: hide-col1 hide-col4
---
class: hide-col2 hide-col3
count: false
20 / 27

This slide can be set-up using the structure on the right.

The cells are hidden using

class: hide-row3-col1 hide-row4-col1 hide-row5-col1

If you can see this cell but not below cells then this is:

class: hide-row4-col1 hide-row5-col1

Be sure to check out the corresponding R markdown source file for a better idea of how to use it for yourself.

There is no need to define the class when revealing all but add count: false to stop slide count increment.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
21 / 27

This slide can be set-up using the structure on the right.

The cells are hidden using

class: hide-row3-col1 hide-row4-col1 hide-row5-col1

If you can see this cell but not below cells then this is:

class: hide-row4-col1 hide-row5-col1

Be sure to check out the corresponding R markdown source file for a better idea of how to use it for yourself.

There is no need to define the class when revealing all but add count: false to stop slide count increment.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
21 / 27

This slide can be set-up using the structure on the right.

The cells are hidden using

class: hide-row3-col1 hide-row4-col1 hide-row5-col1

If you can see this cell but not below cells then this is:

class: hide-row4-col1 hide-row5-col1

Be sure to check out the corresponding R markdown source file for a better idea of how to use it for yourself.

There is no need to define the class when revealing all but add count: false to stop slide count increment.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
21 / 27

This slide can be set-up using the structure on the right.

The cells are hidden using

class: hide-row3-col1 hide-row4-col1 hide-row5-col1

If you can see this cell but not below cells then this is:

class: hide-row4-col1 hide-row5-col1

Be sure to check out the corresponding R markdown source file for a better idea of how to use it for yourself.

There is no need to define the class when revealing all but add count: false to stop slide count increment.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
21 / 27

This slide can be set-up using the structure on the right.

The cells are hidden using

class: hide-row3-col1 hide-row4-col1 hide-row5-col1

If you can see this cell but not below cells then this is:

class: hide-row4-col1 hide-row5-col1

Be sure to check out the corresponding R markdown source file for a better idea of how to use it for yourself.

There is no need to define the class when revealing all but add count: false to stop slide count increment.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
21 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
22 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
22 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
22 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
22 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
22 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
23 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
23 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
23 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
23 / 27

Now let's show the gray and fade features.

You can use it the same as hide but replace with fade or gray

You can combine both as needed.

Do check out the corresponding R markdown source file for a better idea of how to use it for yourself.

Enjoy using ninjutsu.

class: split-two with-border
.column.bg-main1[
  .split-five[
  .row.bg-main1[.content[
    Row 1, Column 1 content.
  ]]
  .row.bg-main2[.content[
    Row 2, Column 1 content.
  ]]
  .row.bg-main3[.content[
    Row 3, Column 1 content.
  ]]
  .row.bg-main4[.content[
    Row 4, Column 1 content.
  ]]
  .row.bg-main5[.content[
    Row 5, Column 1 content.
  ]]
]]
.column[.content[
  Second column content.
]]
23 / 27

There is

support

Next up

upto

five-by-five

images.

cells.

24 / 27

Image insertion

25 / 27

Image insertion can be tricky and a good solution is still in development.

Here is some working solution to embed images.

Here we insert

.row[.content.nopadding[
.img-fill[![](bkgs/bg1.jpg)]
]]

We need the nopadding so it knows that images should not be padded.

Here we have

.row[.content.nopadding[
.fig90[![](bkgs/bg1.jpg)]
]]

There may be some manual fixing needed for some cases although these should work well for most cases.

26 / 27

Soon to come

  • ninpo for animated transition slides
  • explanation of shinobi theme with blue-centric colours and right overlay in title slide (hint: replace kunoichi with shinobi in the css)
  • and others...

(or you may be able to figure out the features looking at the code)

You'll find future updates here or
you'll hear about it here.

27 / 27

Kunoichi

⚔

くノ一

2 / 27
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow