---
# System prepended metadata

title: ":::danger\nHackMD Manual"
tags: [素敵, 機能紹介, 更新]

---

:::danger
HackMD Manual
===
:::success
Index
===
:::info
#### Manual   1    :mag:

#### Manual1  2:mag:

#### Manual1  3:mag: 
:::

目次

>supplementary 
>
<i class="fa fa-hand-stop-o fa-fw"></i>
<i class="fa fa-umbrella fa-fw"></i>
<i class="fa fa-lock fa-fw"></i>
<i class="fa fa-id-card fa-fw"></i>
<i class="fa fa-pencil fa-fw"></i>



<iframe width="100%" [㈱トライエース](http://www.tri-ace.co.jp/recruit/) </iframe>



---
lang: ja
---

機能紹介
===
**[English version](/features)**
**[中文版](/TKNuhom7S62OV6bDyBglXA)**
**[日本語版](/b_l4reliTdWOSn9SiCmbJQ)**

もし通訳した日本語が間違って、変な表現等ありましたら 
[@hackmdio](https://twitter.com/hackmdio) にメールしてください！

> 皆さん、通訳お手伝い本当にありがとうございます
> @jackymaxj @kl0809449 @nomuken @encry1024 @Schwarz_Sardine @K_atc @mic_psm

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

**[ホーム](/)** から **Facebook、Twitter、GitHub、Dropbox** のアカウントで、サインアップできます。 

HackMDはまだ開発中のため、問題が発生するかもしれません。
その際は、[GitHub](https://github.com/hackmdio/hackmd-io-issues/issues/new) からissueを報告してください。
もし、すぐに助けが欲しいのであれば [Facebook Message](https://www.messenger.com/t/hackmdio) からでも構いません。

**利用して頂き、ありがとうございます！**

ワークスペース
===

## 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-camera"></i> をクリックするか，
画像ファイルをエディタの画面に **ドラッグ・アンド・ドロップ** することで、記事に貼ることができます。
画像は自動的に **[imgur](http://imgur.com)** にアップロードされるので心配する必要はありません。:tada:

![](https://i.imgur.com/9cgQVqD.png)

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

## 保存方法
現在、**Dropbox** <i class="fa fa-dropbox"></i> への保存、拡張子 **.md** <i class="fa fa-file-text"></i> としてローカルへの保存が可能です。

## インポート方法
保存先と同様に、 HackMDでは **.md** <i class="fa fa-file-text"></i>  のファイルと **Dropbox** <i class="fa fa-dropbox"></i> からのインポートに対応しています。
または、**クリップボード** <i class="fa fa-clipboard"></i> からもインポートできます。
インポートされた内容はプレビュー画面で**html**として解釈され、便利です :smiley:

## 権限
表示画面の上部右側に小さなボタンがあります。
このボタンから、ノートに対する権限を変えることが出来ます。
以下の中から一つを選択します。

|                              |オーナー<br>閲覧・編集|サインインしている<br>閲覧|サインインしている<br>編集|ゲスト<br>閲覧|ゲスト<br>編集|
|:-----------------------------|:--------------:|:------------:|:-------------:|:--------:|:---------:|
|<span class="text-nowrap"><i class="fa fa-leaf fa-fw"></i> **Freely**</span>               |✔|✔|✔|✔|✔|
|<span class="text-nowrap"><i class="fa fa-pencil fa-fw"></i> **Editable**</span>           |✔|✔|✔|✔|✖|
|<span class="text-nowrap"><i class="fa fa-id-card fa-fw"></i> **Limited**</span>           |✔|✔|✔|✖|✖|
|<span class="text-nowrap"><i class="fa fa-lock fa-fw"></i> **Locked**</span>               |✔|✔|✖|✔|✖|
|<span class="text-nowrap"><i class="fa fa-umbrella fa-fw"></i> **Protected**</span>        |✔|✔|✖|✖|✖|
|<span class="text-nowrap"><i class="fa fa-hand-stop-o fa-fw"></i> **Private**</span>       |✔|✖|✖|✖|✖|

**ノートのオーナーのみが権限を変更可能なことに注意してください。**

## iframeの埋め込み
以下のようなコードを入力してください。
```xml
<iframe width="100%" height="500" src="https://hackmd.io/features" frameborder="0"></iframe>
```

## [スライドモード](/slide-example):
特殊な構文を使うことによって、ノートをスライドとしてまとめることができます。`---`や`----`でノートを区切ることで、ページを切り替える境界線を定めることができます。そのあとは、**SlideMode** <i class="fa fa-tv"></i> をクリックしてスライドを生成してください。詳しい方法については上のリンクをクリックしてください。

## [ブックモード](/book-example):
特殊な構文を使うことによって、ノートを一冊の本としてまとめることができます。本のページにしたいノートを順番に並べたり、入れ子構造にしたりしてみてください。そのあとは、**BookMode** <i class="fa fa-book"></i> をクリックして本を生成してください。詳しい方法については上のリンクをクリックしてください。

ビュー
===

## 目次 (TOC; table of content)
TOCボタン <i class="fa fa-bars"></i> は画面右下にあります。
クリックすると現在の目次(TOC)が表示され、現在表示されているセクションは強調されます。
見出しレベル3 (h3) まで対応しています。

## パーマリンク
各見出しには自動的にパーマリンクが追加されます。
マーク <i class="fa fa-chain"></i> は、見出しにカーソルを合わせた時に見出しの右側に現れます。
クリックしてそこにアンカーを固定できます。

編集
===

## ショートカット
Sublime Textのような小気味よい動作と便利さがあります。
> 詳しくは[こちら](https://codemirror.net/demo/sublime.html)

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

## 題名
始めに現れた**最上位ヘッダ** (h1) が文書の題名として扱われます。

## タグ
タグを利用するには以下のように書いてください。
これらのタグは、トップページにあるあなたの **history画面** に表示されます．
###### tags: `機能紹介` `素敵` `更新`

## [YAML metadata](/yaml-metadata)
閲覧時の動作を定義するための情報を記述してください。詳細は上記リンクを参照してください。
- robots: クローラに対するmeta情報
- lang: ノートの言語設定（日本語：`ja-jp`。デフォルトは`en`として動作）
- dir: 左揃え・右揃え
- breaks: 改行をハードブレイクにするかどうか(true/false)
- mathjax: Mathjaxによるパースの有効・無効

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

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


## 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;
  }
}
```
> **行番号** を表示するには、コードブロックで使われる言語を明示した後に `=` を入力してください。
> また，行番号のスタートを明示することも出来ます。
> 以下の例では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;
  }
}
```

> `=+`を用いることで、一つ前のコードブロックに続けて行番号を振ることができます。
```javascript=+
var s = "JavaScript syntax highlighting";
alert(s);
```

### Blockquotes タグ
> 以下のように、**氏名、日時、色**を明記することで、他の引用と区別して使用できます。
> [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]
> > また，入れ子も対応しています！
> > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red]

## Externals

### Youtube
{%youtube 1G4isv_Fylg %}

### Vimeo
{%vimeo 124148255 %}

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

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

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

### 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)!$ を満たします。 $\quad\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?
```

### フローチャート

フローチャートもこのように表示できます。
```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
```

### 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
}
```

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

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

### 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:|
```

> **シーケンス図** 構文の詳細は [こちら](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:
:::

## 書式

### 見出し

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

### 水平線

___

- - -

***


### 特殊文字
特殊文字は以下を確認してください。

**囲み文字など**：(c) (C) (r) (R) (tm) (TM) (p) (P) +-

**三点リーダー**：test.. test... test..... test?..... test!....

**エスケープ?**：!!!!!! ???? ,,

**ダッシュ**：Remarkable -- awesome

"Smartypantsにより，**二重引用符**は[実体参照](https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7)に変換されます"

'Smartypantsにより，**引用符**は実体参照に変換されます'

### 強調

**これは太文字です**

__これは太文字です__

*これはイタリック体の文字です*

_これはイタリック体の文字です_

~~取り消し線~~

うー~にゃー~

上付き文字: 19^th^

下付き文字: H~2~O

++挿入文++ 

==マーカー==

### 引用

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

### リスト

#### 箇条書き

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

#### 順番付きの箇条書き

1. つねならむ
2. うゐのおくやま
3. けふこえて


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));
```

### 表

| 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. |
| ext    | extension to be used for dest files. |

**右揃え**

| 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. |
| ext    | extension to be used for dest files. |

**左揃え**

| 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. |
| ext    | extension to be used for dest files. |

**中央揃え**

| 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. |
| ext    | extension to be used for dest files. |

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

### 画像
![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

リンクのような記法だけでなく、脚注スタイルで書くことも出来ます。
![Alt text][id]
文書中のこれ以降に現れる参照により、URLのロケーションを決定します。

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

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

### 脚注

脚注1[^first]
脚注2[^second]
文中の脚注^[インライン文章] 定義
複数の脚注参照[^second]

[^first]: 脚注 脚注内で**マークアップすることができます**
    複数の段落にも対応します。
[^second]: 脚注 文章

### 定義リスト

用語 1

:   定義 1

以下略

インラインマークアップされた単語

:   定義 2

        { いくつかのコード、定義2の一部 }

    定義2の第三段落。

__省略形:__

用語 1
  ~ 定義 1

用語 2
  ~ 定義 2a
  ~ 定義 2b

### 短縮表記
ここに HTML の短縮表記の例を示します。
文中に現れる "HTML" にこの機能が適用されます。
"xxxHTMLyyy"のような表記には対応してません。
（つまり単語の前後にスペースを必要とします）

*[HTML]: Hyper Text Markup Language

