---
# System prepended metadata

title: HackMD presentation Sample2
tags: [presentation]

---

---
title: HackMD presentation Sample2
tags: presentation
slideOptions:
    theme: white
    slideNumber: 'c/t'
    center: false
    transition: 'none'
    keyboard: true
    width: '93%'
    height: '100%'

---

<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
    font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
    text-align: left;
    line-height: 1.6;
    letter-spacing: normal;
    text-shadow: none;
    word-wrap: break-word;
    color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
    width: 90%;
    padding: 0.5vw 0 0.5vw 6.0vw;
    font-style: italic;
    background: #f5f5f5;
}
.reveal blockquote:before{
    position: absolute;
    top: 0.1vw;
    left: 1vw;
    content: "\f10d";
    font-family: FontAwesome;
    color: #2980b9;
    font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left  {left:  31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>

<style>
/* specific design */
.reveal h2 {
    padding: 0 1.5vw;
    margin: 0.0vw 0 2.0vw -2.0vw;
    border-left: solid 1.2vw #2980b9;
    border-bottom: solid 0.8vw #d7d7d7;
}
</style>


<!-- --------------------------------------------------------------------------------------- -->

#### Slide Sample 2
# HackMD<br>スライドモードのすすめ

<br>
<br>

#### 2018.12.08
### @suzuki_

---

## はじめに

<div class="box">

**[HackMD (CodiMD)](https://hackmd.io/) のスライドモード**の解説です．
**PowerPointよりも手軽にプレゼン資料を作成したい方**に向けた記事です．
<br>

本資料の本文は，[HackMD 機能紹介 日本語版](https://hackmd.io/b_l4reliTdWOSn9SiCmbJQ?both)を再構成したものです．

</div>

---

## スライドデザイン
- デザイン1：[本文](https://hackmd.io/JnjYISVgQHGWODhrwYMUIg?both)，[スライド](https://hackmd.io/p/BJa_Fz_JV#/)
- デザイン2：[本文](https://hackmd.io/mJ6dr_haQWmAchJEq4truw?both)，[スライド](https://hackmd.io/p/Bk-a3fO1N#/)
- デザイン3：[本文](https://hackmd.io/jzMkQUUYR7SH6stOSsQZfQ?both)，[スライド](https://hackmd.io/p/rk-UTf_JN#/)

---

## スライドデザイン
ファイルの先頭にオプションを設定できる．
```html
slideOptions:
    theme: white
    slideNumber: 'c/t'
    center: false
    transition: 'none'
    keyboard: true
    width: '93%'
    height: '100%'
    
---
```

> 詳しくは次のサイトを参照：**[Reveal.js ReadMe](https://github.com/hakimel/reveal.js/#configuration)**

---

## スライドデザイン
本スライドのデザインは，以下の行をコピペすればよい．
CSSの基本は1時間で学べる．（例．https://prog-8.com/languages/html ）
```html
<style>

...

</style>
```

---

## スライドデザイン
### new colors

```html=
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
```

---

## スライドデザイン
### font size
```html=
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
```

---

## 概要
### HackMD
<i class="fa fa-file-text"></i> **HackMD** はMarkdownで編集可能なクロスプラットフォームのオンラインコラボレーションノート．
**パソコン、タブレット、携帯など様々なプラットフォーム**からリアルタイムに共同で編集を行うことが可能．

> 詳しくは次のサイトを参照：**[日本語版 ReadMe](https://hackmd.io/b_l4reliTdWOSn9SiCmbJQ?both)**

### 共有
**編集可能**ノートとして共有したい場合は，URLをそのままコピーするだけ．
**読み込み専用**ノートとして共有したい場合は，<i class="fa fa-share-alt"></i> をクリックしてURLをコピー．

---

## 概要

### Mode
**Desktop & Tablet**

<i class="fa fa-edit fa-fw"></i> Edit: 編集画面のみを表示．
<i class="fa fa-eye fa-fw"></i> View: プレビュー画面のみを表示．
<i class="fa fa-columns fa-fw"></i> Both: 編集画面とプレビュー画面の両方を表示．

**Mobile**

<i class="fa fa-toggle-on fa-fw"></i> View: 編集画面のみを表示．
<i class="fa fa-toggle-off fa-fw"></i> Edit: プレビュー画面のみを表示．

---

## 概要

### 権限
<i class="fa fa-leaf fa-fw"></i> Freely: 誰でも編集可能．
<i class="fa fa-pencil fa-fw"></i> Editable: サインイン中のユーザのみ編集可能．
<i class="fa fa-lock fa-fw"></i> Locked: ノートのオーナーのみ編集可能．
<i class="fa fa-hand-stop-o fa-fw"></i> Private: ノートのオーナーのみが閲覧・編集可能．

---

## スライドモード
特殊な構文を使うことによって，ノートをスライドとしてまとめることができる．
`---`や`----`でノートを区切ることで、ページを切り替える境界線を定める．
**SlideMode** <i class="fa fa-tv"></i> をクリックしてスライドを生成．
基本的なHTMLの文法が有効．`<br>`など．

---

## 自動補完
エディタはMarkdownを自動補完するためのヒントを与える．
- 絵文字：`:`を入力．
- コードブロック：` ``` `  と打った後に続けて文字を入力．
- 見出し： `#` を入力．
- リンク： `[]`を入力．
- 外部コンテンツの埋め込み：`{}`を入力．詳細は[こちら](#externals)
- 画像：`!`を入力．

---

## 画像ファイルのアップロード
画像ファイルのアップロードは、カメラのアイコン<i class="fa fa-camera"></i> をクリックする．
または．画像ファイルをエディタの画面に **ドラッグ・アンド・ドロップ** する．
デフォルト設定だと，画像は自動的に **[imgur](http://imgur.com)** にアップロードされる．

![](https://i.imgur.com/9cgQVqD.png, =300x)

---

## 書式
### 見出し

```
# h1 見出し
## h2 見出し
### h3 見出し
#### h4 見出し
##### h5 見出し
###### h6 見出し
```

---

## 書式
### 水平線
___

- - -

***

---

## 書式
### 特殊文字
**囲み文字など**：(c) (C) (r) (R) (tm) (TM) (p) (P) +-
**三点リーダー**：test.. test... test..... test?..... test!....
**エスケープ?**：!!!!!! ???? ,,
**ダッシュ**：Remarkable -- awesome

---

## 書式
### 強調
**これは太文字です**
__これは太文字です__
*これはイタリック体の文字です*
_これはイタリック体の文字です_
~~取り消し線~~
うー~にゃー~
上付き文字: 19^th^
下付き文字: H~2~O
++挿入文++ 
==マーカー==

---

## 書式
### 色
<font color="red">red</font>
<font color="blue">blue</font>

<span class="red">自作のred</span>
<span class="blue">自作のblue</span>

<font color="teal">teal</font>
<font color="#2980b9">#2980b9</font>

> 詳しくは次のサイトを参照：**[原色大辞典](https://www.colordic.org/)**

---

## 書式
### 引用
> 大なり記号「\>」をその直後か……
>> ……スペースを挟んで追加することで……
> > > ……引用部分をネストできます。 

---

## 書式
### リスト
#### 箇条書き
- リストを作るには `+` か `-` もしくは`*` を行頭に入力．
- サブリストは2つのスペースで表されるインデントを追加．
  - ハイフン(`-`)は強制的に新しいリストを作成．
    * いろはにほへと
    + ちりぬるを
    - わかよたれそ
- ね、簡単でしょう？

---

## 書式
### リスト
#### 順番付きの箇条書き
1. 連続的な数字を使うことも出来ます……
1. ……もしくは、全ての番号を `1.` にしても結果は変わりません
1. feafw
2. 332
3. 242
4. 2552
1. e2

オフセットを指定して番号を振る:

57. foo
1. bar

---

## 書式
### Code
インラインコード `code`
インデントで表されたコード

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

ブロックで囲まれたコード（プレーンテキスト）
```
Sample code/text here...
```

シンタックスハイライト
``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

---

## 書式
### Code block
HackMDは非常に多くの言語をサポートしており、その言語のリストは自動補完で確認できます．
```javascript=
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
```

---

## 書式
### Code block
**行番号** を表示するには、コードブロックで使われる言語を明示した後に `=` を入力．
また，行番号のスタートを明示することも出来ます．
以下の例では101行目からスタートします．
```javascript=101
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
```

---

## 書式
### 表

**通常**
| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. 

**右揃え**
| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |

---

## 書式
### 表
**左揃え**
| Option | Description |
|:------ |:----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |

**中央揃え**
| Option | Description |
|:------:|:-----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |

---

## 書式
### リンク
[リンク](http://dev.nodeca.com)
[タイトル付きリンク](http://nodeca.github.io/pica/demo/ "タイトル")
自動リンク https://github.com/nodeca/pica

---

## 書式
### 画像
![](https://i.imgur.com/9cgQVqD.png)

---

## 書式
### 画像
![Minion](https://octodex.github.com/images/minion.png =200x200)
Show image with given size

---

## 書式
### 絵文字
このように入力してください： :smile: :smiley: :cry: :wink:
> 全絵文字の一覧は[こちら](http://www.emoji-cheat-sheet.com/)

---

## TODOリスト
- [ ] Todos
    - [x] サラダを買う
    - [ ] 歯を磨く
    - [x] 何か飲む

---

## Externals
### Youtube
{%youtube 1G4isv_Fylg %}

---

## Externals
### Vimeo
{%vimeo 124148255 %}

---

## Externals
### Gist
{%gist schacon/4277%}

---

## Externals
### SlideShare
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}

---

## Externals
### Speakerdeck
{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}

---

## Externals
### PDF
**Caution: this might be blocked by your browser if not using https url.**
{%pdf https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf %}

---

## MathJax
$\LaTeX$ 形式の数式を **MathJax** を利用して描画することが出来ます。
> 詳しくは次のサイトを参考にしてください： [math.stackexchange.com](http://math.stackexchange.com/)。

**ガンマ関数** は $\Gamma(n) = (n-1)!$ を満たします。
$\forall n\in\mathbb N$ はオイラー積分から定義されます。

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

> より多くの **LaTeX** の数式に関する情報は [ここ](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) をご覧ください。

---

## UML図
### シーケンス図

以下のようにシーケンス図を表示できます。

```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?
```

---

## UML図
### フローチャート

フローチャートもこのように表示できます。
```flow
st=>start: Start
e=>end: End
op=>operation: My Operation
op2=>operation: lalala
cond=>condition: Yes or No?

st->op->op2->cond
cond(yes)->e
cond(no)->op2
```

---

## UML図
### Graphviz
```graphviz
digraph hierarchy {

                nodesep=1.0 // increases the separation between nodes
                
                node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
                edge [color=Blue, style=dashed] //All the lines look like this

                Headteacher->{Deputy1 Deputy2 BusinessManager}
                Deputy1->{Teacher1 Teacher2}
                BusinessManager->ITManager
                {rank=same;ITManager Teacher1 Teacher2}  // Put them on the same level
}
```

---

## UML図
### Mermaid
```mermaid
gantt    
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d
```

---

## UML図
### Abc
```abc
X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
```

---

## UML図
### 参考
**シーケンス図** 構文の詳細は [こちら](http://bramp.github.io/js-sequence-diagrams/).
**フローチャート** 構文の詳細は [こちら](http://adrai.github.io/flowchart.js/).
**Graphviz** 構文の詳細は [こちら](http://www.tonyballantyne.com/graphs.html)
**Mermaid** 構文の詳細は [こちら](http://knsv.github.io/mermaid)
**Abc** 構文の詳細は [こちら](http://abcnotation.com/learn)

---

## Alert area
:::success
Yes :tada:
:::

:::info
This is a message :mega:
:::

:::warning
Watch out :zap:
:::

:::danger
Oh No :fire:
:::

---

## PDF化
URLの#の前に，"?print-pdf"を追加．

---

## 分割
- このようにスライドを分割することは可能ですが，分割方法を事前にcssで定義する必要があります．
<div id="left">

<br>
    
### left
<iframe src="https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf" height="300px" width="100%" frameBorder="0"></iframe>

</div>

<div  id="right">
<br>
    
### right
- a
- hogehoge
- aaa
- ...

</div>

---

## iframe 例
- Web Page
<iframe src="https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf" height="250px" width="100%" frameBorder="0"></iframe>

---

## iframe 例
- Slideshare
<center>
<iframe src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen></iframe>
</center>

---

## iframe 例
- Google スプレッドシート
<center><iframe width="570" height="330" src="https://docs.google.com/spreadsheets/d/1wZtnlYqkMsoLr9ykiHo5PFf0t36jr4OYr8BQZcq1uNA/pubhtml?gid=1673223265&amp;single=true&amp;widget=true&amp;range=A1%3AN13&#038;"></iframe></center>

---

## iframe 例
- codepen
<iframe height='400' scrolling='no' title='Interactive email tutorial' src='//codepen.io/avigoldman/embed/PjxEbj/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/avigoldman/pen/PjxEbj/'>Interactive email tutorial</a> by Avi Goldman (<a href='https://codepen.io/avigoldman'>@avigoldman</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>