ブログの投稿ログ

2021年
9月
8月
7月
6月

Vueで作られたプレゼンツール

0630-00


エンジニアでも社内にてプレゼンをしたり、社外でもLTで登壇するなどといった機会って意外とありますよね!
そんなときに役立つモダンなプレゼンツールを紹介します。

その名もSlideです!
ページの全てをマークダウンで作成できることによって開発者がコンテンツの作成に集中できるように設計されているようです!
エンジニアに嬉しい機能が盛り沢山なので、少し触りの部分を紹介したいと思います。


DEMO

ソースコード

今回はデモとコードを参照しつつ見ていただけると理解しやいかと思います。

Page 1

こちらはマークダウンで表示できることが確認できるページです。
上の方に指定してあるbackgroundのおかげで背景が切り替わるようになっています。

background: https://source.unsplash.com/collection/94734566/1920x1080

Page 2

0630-01

とすることでブロックコードも作成できます。

Page 3

0630-02

{}の中に強調したい行番号を入れるとブロックコードを強調できます。
LTや勉強会でとても役に立ちそうですね!

Page 4

0630-03

のように{monaco}と記入するとテキストボックスが生成されそこでコードがかけるようになっています。

page 5

## 文字を赤くしたい

<style>
  h2{
    color: red;
  }
</style>

さらにstyleタグで文字を装飾することも可能です。
痒いところに手が届いてとても良いですよね!

page 6

> Windi CSSも使えるよ `ここだけ青くしたい`

<style>
blockquote {
  code {
    @apply bg-blue-500 hover:bg-blue-700 text-white;
  }
}
</style>

驚きなのがWindi CSSも対応しているところです。
バックコーテーションで囲われたコードもwindi cssにて装飾が可能となっています。

Page 7

## ルービックキューブのパターン数を知っていますか?

<!--
-->
『ルービックキューブ』の4325京2003兆2744億8985万6000通り
<!--
-->

このようにの中にあるものはプレゼンターモードというものに切り替えたときに、 登壇者しか見えない仕組みになっているようです。
プレゼンターモードにすると経過時間が表示されたりと多機能な印象を受けました!

0630-04

まとめ

今回はSlidevの紹介をしました。
既存のテンプレートも充実していて自身でカスタマイズせずとも使用できるほど完成度が高いものとなっていて

登壇する機会がありがちなエンジニアですが、次回そのような機会があったときには使用する余地があるなと思いました。