機能紹介

English version
中文版
日本語版

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 →

Check the source of this note

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 →

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 にアップロードされるので心配する必要はありません。

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 →

無料ユーザーは1 MBまでの画像をアップロードできます。有料ユーザーは20 MBまでの画像をアップロードできます。

ノートの共有について

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

保存方法

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

インポート方法

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

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 →

権限

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

	オーナー閲覧・編集	サインインしている閲覧	サインインしている編集	ゲスト閲覧	ゲスト編集
Freely	✔	✔	✔	✔	✔
Editable	✔	✔	✔	✔	✖
Limited	✔	✔	✔	✖	✖
Locked	✔	✔	✖	✔	✖
Protected	✔	✔	✖	✖	✖
Private	✔	✖	✖	✖	✖

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

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) が文書の題名として扱われます。

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

絵文字

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

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
- サラダを買う
- 歯を磨く
- 何か飲む

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

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 →

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

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 →

Click to show details

You found me

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 →

Expand the spoiler container by default

You found me

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 →

書式

見出し

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

水平線

特殊文字

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

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

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

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

ダッシュ：Remarkable – awesome

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

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

強調

これは太文字です

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

~~取り消し線~~

うー_にゃー

上付き文字: 19^th

下付き文字: H₂O

挿入文

マーカー

ruby baserubytext

引用

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

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

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

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

順番付きの箇条書き

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

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

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

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

表

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.

リンク

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

画像

Minion
Stormtroopocat

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

Minion
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"のような表記には対応してません。
（つまり単語の前後にスペースを必要とします）

脚注脚注内でマークアップすることができます
複数の段落にも対応します。 ↩︎
脚注文章 ↩︎ ↩︎
インライン文章 ↩︎

hirokiss

2021/06/25 09:07:24

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

あい (Edited)

Guest Price2023/10/27 19:54:50

webサイトに公開してもデータの所在が明らかになってないからどうなるかわからないし、noteみたいにプラットフォームとして確立してるわけでもないからメモ以上に使えない

Guest Schultz2019/05/21 06:02:07

a (Edited)

Guest Watkins2019/05/26 07:14:08

わわわわ (Edited)

Naoto Mizuguchi

2019/12/29 15:27:27

(Edited)

Guest Gray2020/05/08 09:16:10

コメントのテスト！ (Edited)

Guest Caldwell2023/08/15 16:18:55

e (Edited)

Guest Ramirez2023/10/27 19:53:11

HackMDってコメント機能が貧弱すぎるんだよな

Guest Gordon2023/10/27 19:56:18

自分でマネジメンとできる箇所が少なすぎて怖いわ

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

機能紹介

HackMDについて

ワークスペース

Modeについて

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

ノートの共有について

保存方法

インポート方法

権限

iframeの埋め込み

スライドモード:

ブックモード:

ビュー

目次 (TOC; table of content)

パーマリンク

編集

ショートカット

自動補完

題名

タグ

tags: 機能紹介 素敵 更新

YAML metadata

絵文字

TODOリスト

Code block

Blockquotes タグ

Externals

Youtube

Vimeo

Gist

SlideShare

Speakerdeck

PDF

MathJax

UML図

シーケンス図

フローチャート

Graphviz

Mermaid

Abc

Vega-Lite

Alert area

書式

見出し

水平線

特殊文字

強調

引用

リスト

箇条書き

順番付きの箇条書き

Code

表

リンク

画像

脚注

定義リスト

短縮表記

tags: `機能紹介` `素敵` `更新`