changed 6 years ago  
Linked with GitHub

Slide Sample 2

HackMD
スライドモードのすすめ



2018.12.08

@suzuki_

はじめに

HackMD (CodiMD) のスライドモードの解説です．
PowerPointよりも手軽にプレゼン資料を作成したい方に向けた記事です．

本資料の本文は，HackMD 機能紹介 日本語版を再構成したものです．

スライドデザイン

スライドデザイン

ファイルの先頭にオプションを設定できる．

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

詳しくは次のサイトを参照：Reveal.js ReadMe

スライドデザイン

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

<style>

...

</style>

スライドデザイン

new colors




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

スライドデザイン

font size










/* 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

HackMD はMarkdownで編集可能なクロスプラットフォームのオンラインコラボレーションノート．
パソコン、タブレット、携帯など様々なプラットフォームからリアルタイムに共同で編集を行うことが可能．

詳しくは次のサイトを参照：日本語版 ReadMe

共有

編集可能ノートとして共有したい場合は，URLをそのままコピーするだけ．
読み込み専用ノートとして共有したい場合は， をクリックしてURLをコピー．

概要

Mode

Desktop & Tablet

Edit: 編集画面のみを表示．
View: プレビュー画面のみを表示．
Both: 編集画面とプレビュー画面の両方を表示．

Mobile

View: 編集画面のみを表示．
Edit: プレビュー画面のみを表示．

概要

権限

Freely: 誰でも編集可能．
Editable: サインイン中のユーザのみ編集可能．
Locked: ノートのオーナーのみ編集可能．
Private: ノートのオーナーのみが閲覧・編集可能．

スライドモード

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

自動補完

エディタはMarkdownを自動補完するためのヒントを与える．

  • 絵文字：:を入力．
  • コードブロック：``` と打った後に続けて文字を入力．
  • 見出し： # を入力．
  • リンク： []を入力．
  • 外部コンテンツの埋め込み：{}を入力．詳細はこちら
  • 画像：!を入力．

画像ファイルのアップロード

画像ファイルのアップロードは、カメラのアイコン をクリックする．
または．画像ファイルをエディタの画面に ドラッグ・アンド・ドロップ する．
デフォルト設定だと，画像は自動的に imgur にアップロードされる．

書式

見出し

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

書式

水平線

書式

特殊文字

囲み文字など：© © ® ® ™ ™ § § ±
三点リーダー：test.. test… test… test?.. test!..
エスケープ?：!!! ??? ,
ダッシュ：Remarkable – awesome

書式

強調

これは太文字です
これは太文字です
これはイタリック体の文字です
これはイタリック体の文字です
取り消し線
うーにゃー
上付き文字: 19th
下付き文字: H2O
挿入文
マーカー

書式

色

red
blue

自作のred
自作のblue

teal
#2980b9

詳しくは次のサイトを参照：原色大辞典

書式

引用

大なり記号「>」をその直後か……

……スペースを挟んで追加することで……

……引用部分をネストできます。

書式

リスト

箇条書き

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

書式

リスト

順番付きの箇条書き

  1. 連続的な数字を使うことも出来ます……
  2. ……もしくは、全ての番号を 1. にしても結果は変わりません
  3. feafw
  4. 332
  5. 242
  6. 2552
  7. e2

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

  1. foo
  2. bar

書式

Code

インラインコード code
インデントで表されたコード

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

ブロックで囲まれたコード（プレーンテキスト）

Sample code/text here...

シンタックスハイライト

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

書式

Code block

HackMDは非常に多くの言語をサポートしており、その言語のリストは自動補完で確認できます．
















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行目からスタートします．
















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.

書式

リンク

リンク
タイトル付きリンク
自動リンク https://github.com/nodeca/pica

書式

画像

書式

画像

Minion
Show image with given size

書式

絵文字

このように入力してください：

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

全絵文字の一覧はこちら

TODOリスト

  • Todos
    • サラダを買う
    • 歯を磨く
    • 何か飲む

Externals

Youtube

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Externals

Vimeo

Externals

Gist

Externals

SlideShare

Externals

Speakerdeck

Externals

PDF

Caution: this might be blocked by your browser if not using https url.

MathJax

\(\LaTeX\) 形式の数式を MathJax を利用して描画することが出来ます。

詳しくは次のサイトを参考にしてください： 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 の数式に関する情報は ここ をご覧ください。

UML図

シーケンス図

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

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図

フローチャート

フローチャートもこのように表示できます。

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

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

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

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図

参考

シーケンス図 構文の詳細は こちら.
フローチャート 構文の詳細は こちら.
Graphviz 構文の詳細は こちら
Mermaid 構文の詳細は こちら
Abc 構文の詳細は こちら

Alert area

Yes

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

This is a message

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Watch out

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Oh No

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

PDF化

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

分割

  • このようにスライドを分割することは可能ですが，分割方法を事前にcssで定義する必要があります．

left

iframe 例

  • Web Page

iframe 例

  • Slideshare

iframe 例

  • Google スプレッドシート

iframe 例

  • codepen
Select a repo