機能紹介 - HackMD

--- lang: ja --- 機能紹介 === **[English version](/features)** **[中文版](/features-tw)** **[日本語版](/features-jp)** **[:arrow_right: Check the source of this note :arrow_left:](/features-jp?both)** **[Read the complete tutorial](https://hackmd.io/c/tutorials)** もし通訳した日本語が間違って、変な表現等ありましたら [@hackmdio](https://twitter.com/hackmdio) にメールしてください！ > 皆さん、通訳お手伝い本当にありがとうございます > @jackymaxj @kl0809449 @nomuken @encry1024 @Schwarz_Sardine @K_atc @mic_psm HackMDについて === **HackMD** はMarkdownで編集できるクロスプラットフォームのオンラインコラボレーションノートです。 **パソコン、タブレット、携帯など様々なプラットフォーム**からリアルタイムに共同で編集を行うことが出来ます。 HackMDはまだ開発中のため、問題が発生するかもしれません。その際は、[GitHub](https://github.com/hackmdio/hackmd-io-issues/issues/new) からissueを報告してください。もし、すぐに助けが欲しいのであれば [Facebook message](https://www.messenger.com/t/hackmdio) からでも構いません。 **利用して頂き、ありがとうございます！** ワークスペース === ## Modeについて **Desktop & Tablet** Edit: 編集画面のみを表示します。 View: プレビュー画面のみを表示します。 Both: 編集画面とプレビュー画面の両方を表示します。 **Mobile** View: 編集画面のみを表示します。 Edit: プレビュー画面のみを表示します。 ## 画像ファイルのアップロード画像ファイルのアップロードは、カメラのアイコン をクリックするか，画像ファイルをエディタの画面に **ドラッグ・アンド・ドロップ** することで、記事に貼ることができます。画像は自動的に **[imgur](http://imgur.com)** にアップロードされるので心配する必要はありません。:tada: ![](https://i.imgur.com/9cgQVqD.png) ## ノートの共有について **編集可能**ノートとして共有したい場合は、URLをそのままコピーするだけです。 **読み込み専用**ノートとして共有したい場合は、 をクリックしてURLをコピーしてください。 ## 保存方法現在、**Dropbox** への保存、拡張子 **.md** としてローカルへの保存が可能です。 ## インポート方法保存先と同様に、 HackMDでは **.md** のファイルと **Dropbox** からのインポートに対応しています。または、**クリップボード** からもインポートできます。インポートされた内容はプレビュー画面で**HTML**として解釈され、便利です :smiley: ## 権限表示画面の上部右側に小さなボタンがあります。このボタンから、ノートに対する権限を変えることが出来ます。以下の中から一つを選択します。 | |オーナー 閲覧・編集|サインインしている 閲覧|サインインしている 編集|ゲスト 閲覧|ゲスト 編集| |:-----------------------------|:--------------:|:------------:|:-------------:|:--------:|:---------:| | **Freely** |✔|✔|✔|✔|✔| | **Editable** |✔|✔|✔|✔|✖| | **Limited** |✔|✔|✔|✖|✖| | **Locked** |✔|✔|✖|✔|✖| | **Protected** |✔|✔|✖|✖|✖| | **Private** |✔|✖|✖|✖|✖| **ノートのオーナーのみが権限を変更可能なことに注意してください。** ## iframeの埋め込み以下のようなコードを入力してください。 ```xml <iframe width="100%" height="500" src="https://hackmd.io/features" frameborder="0"></iframe> ``` ## [スライドモード](/slide-example): 特殊な構文を使うことによって、ノートをスライドとしてまとめることができます。`---`や`----`でノートを区切ることで、ページを切り替える境界線を定めることができます。そのあとは、**SlideMode** をクリックしてスライドを生成してください。詳しい方法については上のリンクをクリックしてください。 ## [ブックモード](/book-example): 特殊な構文を使うことによって、ノートを一冊の本としてまとめることができます。本のページにしたいノートを順番に並べたり、入れ子構造にしたりしてみてください。そのあとは、**BookMode** をクリックして本を生成してください。詳しい方法については上のリンクをクリックしてください。ビュー === ## 目次 (TOC; table of content) TOCボタン は画面右下にあります。クリックすると現在の目次(TOC)が表示され、現在表示されているセクションは強調されます。見出しレベル3 (h3) まで対応しています。 ## パーマリンク各見出しには自動的にパーマリンクが追加されます。マーク は、見出しにカーソルを合わせた時に見出しの右側に現れます。クリックしてそこにアンカーを固定できます。編集 === ## ショートカット Sublime Textのような小気味よい動作と便利さがあります。 > 詳しくは[こちら](https://codemirror.net/demo/sublime.html) ## 自動補完エディタはMarkdownの自動補完のヒントを与えます。 - 絵文字：`:`を打ってください - コードブロック：` ``` ` と打った後に続けて文字入力してください ``` - 見出し： `#` を打ってください - リンク： `[]`を打ってください - 外部コンテンツの埋め込み：`{}`を打ってください。詳細は[こちら](#externals) - 画像：`!`を打ってください ## 題名始めに現れた**最上位ヘッダ** (h1) が文書の題名として扱われます。 ## タグタグを利用するには以下のように書いてください。これらのタグは、トップページにあるあなたの **history画面** に表示されます． ###### tags: `機能紹介` `素敵` `更新` ## [YAML metadata](/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 ## 絵文字このように入力してください： :smile: :smiley: :cry: :wink: > 全絵文字の一覧は[こちら](https://github.com/ikatyang/emoji-cheat-sheet) ## 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); ``` > 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 タグ > 以下のように、**氏名、日時、色**を明記することで、他の引用と区別して使用できます。 > [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://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.pdf %} ## MathJax $\LaTeX$ 形式の数式を **MathJax** を利用して描画することが出来ます。詳しくは次のサイトを参考にしてください： [math.stackexchange.com](http://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** の数式に関する情報は [ここ](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 ``` ### 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:| ``` ### Vega-Lite ```vega { "$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"} } } ``` > **シーケンス図** 構文の詳細は [こちら](http://bramp.github.io/js-sequence-diagrams/). > **フローチャート** 構文の詳細は [こちら](http://adrai.github.io/flowchart.js/). > **graphviz** 構文の詳細は [こちら](http://www.tonyballantyne.com/graphs.html) > **mermaid** 構文の詳細は [こちら](http://mermaid-js.github.io/mermaid) > **abc** 構文の詳細は [こちら](http://abcnotation.com/learn) > **vega** 構文の詳細は [こちら](https://vega.github.io/vega-lite/docs) Alert area --- :::success Yes :tada: ::: :::info This is a message :mega: ::: :::warning Watch out :zap: ::: :::danger Oh No :fire: ::: :::spoiler Click to show details You found me :stuck_out_tongue_winking_eye: ::: :::spoiler {state="open"} Expand the spoiler container by default You found me :stuck_out_tongue_winking_eye: ::: ## 書式 ### 見出し ``` # 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 ++挿入文++ ==マーカー== {ruby base|rubytext} ### 引用 > 大なり記号「\>」をその直後か…… >> ……スペースを挟んで追加することで…… > > > ……引用部分をネストできます。 ### リスト #### 箇条書き + リストを作るには `+` か `-` もしくは`*` を行頭に入れます。 + サブリストは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... ``` シンタックスハイライト ```javascript 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

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.