ここをクリックしてCtrl+V(Cmd+V)するとクリップボードの画像を添付できます。

# かんたんMarkdownの記法 ## 見出し 先頭に`# `をつけることによって見出しになります。見出しのレベルは`#`の数で表現します。 ``` # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 ``` # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 ## 段落 空行を挟むことで段落となります。 ``` 段落1 (空行) 段落2 ``` 段落1 段落2 ## 改行 改行の前に半角スペースを2つ記述することで改行されます。 ``` hoge fuga(スペース2つ) piyo ``` hoge fuga piyo あるいはHTMLを使って改行することも可能です。 ```html hoge<br> huga ``` hoge<br> huga ## コード バッククオート(` ` `)3つ、あるいはダッシュ`~`３つで囲むことで、コードを挿入できます。 ~~~ ``` print "hoge" ``` ~~~ ``` print "hoge" ``` Standardバージョン以上であれば、始まりのバッククオート、ダッシュの直後に言語名を記述することで、シンタックスハイライトします。 ~~~ ```python print "hoge" ``` ~~~ ```python print "hoge" ``` ## インラインコード バッククオートで単語を囲むとインラインコードなります。 ``` 2行目の`print`関数を見てください ``` 2行目の`print`関数を見てください ## テキスト装飾 マークダウン記法、あるいはHTMLでテキストを装飾できます。 ``` これは*イタリック*です これは**ボールド**です これは***イタリック＆ボールド***です これは~~打消し線~~です これは<sup>上付き</sup>です これは<sub>下付き</sub>です ``` これは*イタリック*です これは**ボールド**です これは***イタリック＆ボールド***です これは~~打消し線~~です これは<sup>上付き</sup>です これは<sub>下付き</sub>です ## リスト(箇条書き) `* `, `+`あるいは`- `を先頭に記述することで箇条書きになります。ネストはタブで表現します。 ``` * リスト1 * リスト2 * リスト3 * リスト4 ``` * リスト1 * リスト2 * リスト3 * リスト4 ## 番号付きリスト `番号. `を先頭に記述することで番号付きのリストになります。ネストはタブで表現します。 番号は自動的に採番されるため、すべての行を`1. `と記述するのがお勧めです。 ``` 1. 番号付きリスト1 1. 番号付きリスト2 1. 番号付きリスト3 1. 番号付きリスト4 1. 番号付きリスト5 1. 番号付きリスト6 1. 番号付きリスト7 ``` 1. 番号付きリスト1 1. 番号付きリスト2 1. 番号付きリスト3 1. 番号付きリスト4 1. 番号付きリスト5 1. 番号付きリスト6 1. 番号付きリスト7 ## 引用 `>`を先頭に記述することで引用となります。ネストは`>`を多重に記述します。 ``` > 引用 > 引用 >> 多重引用 ``` > 引用 > 引用 >> 多重引用 ## 水平線(hr) `-`や`_`を３つ以上並べると水平線に変換されます。 ``` --- hoge - - - - - - - - fuga _ _ _ _ _ _ _ _ piyo <hr> ``` --- hoge - - - - - - - - fuga _ _ _ _ _ _ _ _ piyo <hr> ## リンク `[リンク文字列](URL)`でリンクに変換されます。 ``` [google](http://www.google.co.jp/) ``` [google](http://www.google.co.jp/) リンク先を添付ファイルにすると、そのファイルをダウンロードするリンクを作ることができます。 ``` [猫画像をDL](attach:cat.jpg) ``` [猫画像をDL](attach:cat.jpg) ## 外部参照リンク 以下のように、URLを外部に定義することもできます。URLが長くて読みづらくなる場合に有用です。 ``` [yahoo japan][yahoo] [yahoo]: http://www.yahoo.co.jp ``` [yahoo japan][yahoo] [yahoo]: http://www.yahoo.co.jp ## 画像 添付画像は`<img src="attach:画像名">`で挿入できます。 ``` <img src="attach:cat.jpg"> ``` <img src="attach:cat.jpg"> 通常のMarkdown記法でも挿入可能です。ただし、その場合は横幅などの属性指定はできません ```  ``` （例省略） ## テーブル（表） テーブルは以下のように記述します。 ``` これは | 一番 -----------| ------------ シンプルな | テーブルです ``` これは | 一番 -----------| ------------ シンプルな | テーブルです 枠をつけても構いません。 ``` |枠を | つけても | |-------|----------| |意味は | 同じです | ``` |枠を | つけても | |-------|----------| |意味は | 同じです | `:`を使うと文字を揃えることができます。 ``` | 左揃え | 中央揃え | 右揃え | |:-------|:--------:|-------:| |1 |2 |3 | |4 |5 |6 | ``` | 左揃え | 中央揃え | 右揃え | |:-------|:--------:|-------:| |1 |2 |3 | |4 |5 |6 | ## 注釈 Markdownには注釈の記法がありませんが、HTMLを使うことで注釈に近いことが実現可能です。 ``` 注釈のようなことを実現可能です<sup>[1](#note1)</sup> <small id="note1">無理やりですが</small> ``` 注釈のようなことを実現可能です<sup>[1](#note1)</sup> <small id="note1">無理やりですが</small> ## info, warn, alert `info`, `warn`そして`alert`クラスを用いることで青色、黄色、赤色の枠を使った表現が可能です。 （これはMarkdown記法ではなく、かんたんMarkdown独自の記法です。） ``` <p class="info">**ポイント** ちょっとした情報です。</p> <p class="warn">**注意** 気をつけてください</p> <p class="alert">**警告** 細心の注意を払ってください</p> ``` <p class="info">**ポイント** ちょっとした情報です。</p> <p class="warn">**注意** 気をつけてください</p> <p class="alert">**警告** 細心の注意を払ってください</p> ## シーケンス図（Fullエディションのみ） `sequence`クラスを使うと、js-sequence-diagramsを利用してシーケンス図を記述することができます。 ``` <div class="sequence"> Andrew->China: Says Hello Note right of China: China thinks\nabout it China-->Andrew: How are you? Andrew->>China: I am good thanks! </div> ``` <div class="sequence"> Andrew->China: Says Hello Note right of China: China thinks\nabout it China-->Andrew: How are you? Andrew->>China: I am good thanks! </div> js-sequence-diagramsの記法は[公式ページ](https://bramp.github.io/js-sequence-diagrams/)をご覧ください。 ## フローチャート（Fullエディションのみ） `flow`クラスを使うとflowchart.jsを利用してフローチャートを記述することができます。 ``` <div class="flow"> st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... st->op1->cond cond(yes)->io->e cond(no)->sub1(right)->op1 </div> ``` <div class="flow"> st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... st->op1->cond cond(yes)->io->e cond(no)->sub1(right)->op1 </div> flowchart.jsの記法は[公式ページ](https://adrai.github.io/flowchart.js/)をご覧ください。 /* * CSSの設定を間違えると、最悪の場合 * 内容を編集できなくなるので注意してください。 * 標準のCSSに戻したいときはCSSを引き継がずに強制アップデートしてください * また、CSSの変更はプレビューしないと反映しません。 */ .previewMode #previewer { width: 980px; } #previewer { word-wrap: break-word; border: 1px solid gray; font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; background-color: white; padding: 45px; } #previewer > *:first-child { margin-top: 0 !important; } #previewer > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0; left: 0; bottom: 0; } h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-weight: bold; -webkit-font-smoothing: antialiased; cursor: text; position: relative; } h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { background: url("para.png") no-repeat 10px center; text-decoration: none; } h1 tt, h1 code { font-size: inherit; } h2 tt, h2 code { font-size: inherit; } h3 tt, h3 code { font-size: inherit; } h4 tt, h4 code { font-size: inherit; } h5 tt, h5 code { font-size: inherit; } h6 tt, h6 code { font-size: inherit; } h1 { font-size: 28px; color: black; } h2 { font-size: 24px; border-bottom: 1px solid #cccccc; color: black; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { color: #777777; font-size: 14px; } p, blockquote, ul, ol, dl, li:first, table, pre { margin: 15px 0; } hr { background-color: #e7e7e7; border: 0 none; height: 4px; padding: 0; } #previewer > h2:first-child { margin-top: 0; padding-top: 0; } #previewer > h1:first-child { margin-top: 0; padding-top: 0; } #previewer > h1:first-child + h2 { margin-top: 0; padding-top: 0; } #previewer > h3:first-child, #previewer > h4:first-child, #previewer > h5:first-child, #previewer > h6:first-child { margin-top: 0; padding-top: 0; } a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0; padding-top: 0; } h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0; } li p.first { display: inline-block; } ul, ol { padding-left: 30px; } ul:first-child, ol:first-child { margin-top: 0; } ul:last-child, ol:last-child { margin-bottom: 0; } dl { padding: 0; } dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px; } dl dt:first-child { padding: 0; } dl dt >:first-child { margin-top: 0; } dl dt >:last-child { margin-bottom: 0; } dl dd { margin: 0 0 15px; padding: 0 15px; } dl dd >:first-child { margin-top: 0; } dl dd >:last-child { margin-bottom: 0; } blockquote { border-left: 4px solid #dddddd; padding: 0 15px; color: #777777; } blockquote >:first-child { margin-top: 0; } blockquote >:last-child { margin-bottom: 0; } table { border-collapse: collapse; padding: 0; } table tr { border-top: 1px solid #cccccc; background-color: white; margin: 0; padding: 0; } table tr:nth-child(2n) { background-color: #f8f8f8; } table tr th { font-weight: bold; border: 1px solid #cccccc; text-align: left; margin: 0; padding: 6px 13px; } table tr td { border: 1px solid #cccccc; text-align: left; margin: 0; padding: 6px 13px; } table tr th:first-child, table tr td:first-child { margin-top: 0; } table tr th:last-child, table tr td:last-child { margin-bottom: 0; } img { max-width: 100%; } span.frame { display: block; overflow: hidden; } span.frame > span { border: 1px solid #dddddd; display: block; float: left; overflow: hidden; margin: 13px 0 0; padding: 7px; width: auto; } span.frame span img { display: block; float: left; } span.frame span span { clear: both; color: #333333; display: block; padding: 5px 0 0; } span.align-center { display: block; overflow: hidden; clear: both; } span.align-center > span { display: block; overflow: hidden; margin: 13px auto 0; text-align: center; } span.align-center span img { margin: 0 auto; text-align: center; } span.align-right { display: block; overflow: hidden; clear: both; } span.align-right > span { display: block; overflow: hidden; margin: 13px 0 0; text-align: right; } span.align-right span img { margin: 0; text-align: right; } span.float-left { display: block; margin-right: 13px; overflow: hidden; float: left; } span.float-left span { margin: 13px 0 0; } span.float-right { display: block; margin-left: 13px; overflow: hidden; float: right; } span.float-right > span { display: block; overflow: hidden; margin: 13px auto 0; text-align: right; } code, tt { margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px; } pre code { margin: 0; padding: 0; white-space: pre-wrap; border: none; background: transparent; } .highlight pre { background-color: #f8f8f8; border: 1px solid #cccccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px; } pre { background-color: #f8f8f8; border: 1px solid #cccccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px; } pre code, pre tt { background-color: transparent; border: none; } .sequence, .flow { overflow: auto; } .info { color: #3a87ad; background-color: #d9edf7; border: 1px solid #bce8f1; font-size: 13px; line-height: 19px; padding: 6px 10px; border-radius: 0px; margin: 1em 0px 1em; } .warn { color: #c09853; background-color: #fcf8e3; border: 1px solid #fbeed5; font-size: 13px; line-height: 19px; padding: 6px 10px; border-radius: 0px; margin: 1em 0px 1em; } .alert { color: #b94a48; background-color: #f2dede; border: 1px solid #eed3d7; font-size: 13px; line-height: 19px; padding: 6px 10px; border-radius: 0px; margin: 1em 0px 1em; } @media print { nav { display: none; } #wrapper { overflow: visible; } #previewer { border: 0; } } /* START_HLJS_CSS */ /* github.com style (c) Vasily Polovnyov <vast@whiteants.net> */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hljs-comment, .hljs-quote { color: #998; font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-subst { color: #333; font-weight: bold; } .hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: #008080; } .hljs-string, .hljs-doctag { color: #d14; } .hljs-title, .hljs-section, .hljs-selector-id { color: #900; font-weight: bold; } .hljs-subst { font-weight: normal; } .hljs-type, .hljs-class .hljs-title { color: #458; font-weight: bold; } .hljs-tag, .hljs-name, .hljs-attribute { color: #000080; font-weight: normal; } .hljs-regexp, .hljs-link { color: #009926; } .hljs-symbol, .hljs-bullet { color: #990073; } .hljs-built_in, .hljs-builtin-name { color: #0086b3; } .hljs-meta { color: #999; font-weight: bold; } .hljs-deletion { background: #fdd; } .hljs-addition { background: #dfd; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } /* END_HLJS_CSS */