owned this note
owned this note
Published
Linked with GitHub
---
title: HackMD presentation Sample3
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>
/* backgroud design */
.reveal {
background-image:
url("https://i.imgur.com/ALypCxI.png"), /* copy right */
url("https://i.imgur.com/kNd1W6K.png"); /* header */
background-repeat:
no-repeat,
no-repeat;
background-position:
center 99%,
center 2%;
background-size:
30% auto,
90% auto;
}
.reveal h1 {padding: 3.0vw 0vw;}
@media screen and (max-width: 1024px) {
.reveal h2 {margin: -2.0vw 0 0 0; padding: 0.0vw 0vw 3.0vw 2.0vw; }
}
@media screen and (min-width: 1025px) and (max-width: 1920px) {
.reveal h2 {margin: -1.5vw 0 0 0; padding: 0.0vw 0vw 3.0vw 2.0vw; }
}
@media screen and (min-width: 1921px) and (max-width: 100000px) {
.reveal h2 {margin: -1.0vw 0 0 0; padding: 0.0vw 0vw 3.0vw 2.0vw; }
}
</style>
<!-- --------------------------------------------------------------------------------------- -->
#### Slide Sample 3
# 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&single=true&widget=true&range=A1%3AN13&"></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>