機能紹介

English version
中文版
日本語版

Read the complete tutorial

もし通訳した日本語が間違って、変な表現等ありましたら
@hackmdio にメールしてください！

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

HackMDについて

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

HackMDはまだ開発中のため、問題が発生するかもしれません。
その際は、GitHub からissueを報告してください。
もし、すぐに助けが欲しいのであれば Facebook message からでも構いません。

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

ワークスペース

Modeについて

Desktop & Tablet

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

Mobile

View: 編集画面のみを表示します。
Edit: プレビュー画面のみを表示します。

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

画像ファイルのアップロードは、カメラのアイコン をクリックするか，

画像ファイルをエディタの画面に ドラッグ・アンド・ドロップ することで、記事に貼ることができます。

画像は自動的に HackMD にアップロードされるので心配する必要はありません。

ノートの共有について

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

保存方法

現在、Dropbox への保存、拡張子 .md としてローカルへの保存が可能です。

インポート方法

保存先と同様に、 HackMDでは .md のファイルと Dropbox からのインポートに対応しています。
または、クリップボード からもインポートできます。
インポートされた内容はプレビュー画面でHTMLとして解釈され、便利です

権限

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

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

iframeの埋め込み

以下のようなコードを入力してください。

<iframe width="100%" height="500" src="https://hackmd.io/features" frameborder="0"></iframe>

スライドモード:

特殊な構文を使うことによって、ノートをスライドとしてまとめることができます。---や----でノートを区切ることで、ページを切り替える境界線を定めることができます。そのあとは、SlideMode をクリックしてスライドを生成してください。詳しい方法については上のリンクをクリックしてください。

ブックモード:

特殊な構文を使うことによって、ノートを一冊の本としてまとめることができます。本のページにしたいノートを順番に並べたり、入れ子構造にしたりしてみてください。そのあとは、BookMode をクリックして本を生成してください。詳しい方法については上のリンクをクリックしてください。

ビュー

目次 (TOC; table of content)

TOCボタン は画面右下にあります。
クリックすると現在の目次(TOC)が表示され、現在表示されているセクションは強調されます。
見出しレベル3 (h3) まで対応しています。

パーマリンク

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

編集

ショートカット

Sublime Textのような小気味よい動作と便利さがあります。

詳しくはこちら

自動補完

エディタはMarkdownの自動補完のヒントを与えます。

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

題名

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

タグ

タグを利用するには以下のように書いてください。
これらのタグは、トップページにあるあなたの history画面 に表示されます．

tags: 機能紹介 素敵 更新

YAML metadata

閲覧時の動作を定義するための情報を記述してください。詳細は上記リンクを参照してください。

• title: set note title
• description: set note description
• image: set note default image (for link preview)
• tags: set note tags
• robots: クローラに対するmeta情報
• lang: ノートの言語設定（日本語：ja-jp。デフォルトはenとして動作）
• dir: 左揃え・右揃え
• breaks: 改行をハードブレイクにするかどうか(true/false)
• GA: set to use Google Analytics
• disqus: set to use Disqus
• slideOptions: setup slide mode options

絵文字

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

全絵文字の一覧はこちら

TODOリスト

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

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;
  }
}

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

=+を用いることで、一つ前のコードブロックに続けて行番号を振ることができます。

var s = "JavaScript syntax highlighting";
alert(s);

Sometimes you have a super long text without breaks. It's time to use ! to wrap your code.

When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back.

Blockquotes タグ

以下のように、氏名、日時、色を明記することで、他の引用と区別して使用できます。
ChengHan WuSun, Jun 28, 2015 9:59 PM

また，入れ子も対応しています！
ChengHan WuSun, Jun 28, 2015 10:00 PM

Externals

Youtube

Vimeo

Gist

SlideShare

Speakerdeck

PDF

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

MathJax

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

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

For block level math, please give $$ and a line break before and after your math formula:

\[ 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?

フローチャート

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

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

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

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

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

Vega-Lite

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "https://vega.github.io/editor/data/barley.json"},
  "mark": "bar",
  "encoding": {
    "x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
    "y": {"field": "variety", "type": "nominal"},
    "color": {"field": "site", "type": "nominal"}
  }
}

シーケンス図 構文の詳細は こちら.
フローチャート 構文の詳細は こちら.
graphviz 構文の詳細は こちら
mermaid 構文の詳細は こちら
abc 構文の詳細は こちら
vega 構文の詳細は こちら

Alert area

書式

見出し

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

水平線

特殊文字

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

囲み文字など：© © ® ® ™ ™ § § ±

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

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

ダッシュ：Remarkable – awesome

"Smartypantsにより，二重引用符は実体参照に変換されます"

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

強調

これは太文字です

これは太文字です

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

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

取り消し線

うー_にゃー

上付き文字: 19^th

下付き文字: H₂O

挿入文

マーカー

ruby baserubytext

引用

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

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

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

リスト

箇条書き

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

順番付きの箇条書き

1. つねならむ
2. うゐのおくやま
3. けふこえて
4. 連続的な数字を使うことも出来ます……

1. ……もしくは、全ての番号を 1. にしても結果は変わりません
2. feafw
3. 332
4. 242
5. 2552
6. e2

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

57. foo
58. 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));

表

右揃え

左揃え

中央揃え

リンク

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

画像

リンクのような記法だけでなく、脚注スタイルで書くことも出来ます。

文書中のこれ以降に現れる参照により、URLのロケーションを決定します。

Show image with given size

脚注

脚注1^[1]
脚注2^[2]
文中の脚注^[3] 定義
複数の脚注参照^[2:1]

定義リスト

用語 1

定義 1

以下略

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

定義 2

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

定義2の第三段落。

省略形:

用語 1

定義 1

用語 2

定義 2a

定義 2b

短縮表記

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