9796 views
--- lang: ja --- 機能紹介 === **[English version](/features)** **[中文版](/CwYwhgzAbApgHFAtHAnAIzY4awBNkwCsA7ImFCBCHAIxwBMhhIQAAA==)** **[日本語版](/GwMxE4HYA4EMBMC0BTcwBMiAs94FZFpktZFIQ91pp1xwAjdPIA==)** もし通訳した日本語は間違って、変な表現等ありましたら [@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) から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: ## 権限 表示画面の上部右側に小さなボタンがあります。 このボタンから、ノートに対する権限を変えることが出来ます。 以下の中から一つを選択します。 <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: ノートのオーナーのみが閲覧・編集することができます。 **ノートのオーナーのみが権限を変更可能なことに注意してください。** ## 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, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d anther task : 24d ``` > **シーケンス図** 構文の詳細は [こちら](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) 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