> For the complete documentation index, see [llms.txt](https://protopedia.gitbook.io/helpcenter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://protopedia.gitbook.io/helpcenter/markdown.md).

# ＋Markdownの書き方

ITクリエイターの「つくろう」や「つくった」を発表する場で、日頃の創作活動にて生まれたモノやコトを記録、登録するWEBサイト「ProtoPedia」のちょっと便利な使い方になります。

システム説明や、ストーリーはMarkdownやhtmlにてリッチに表現することも可能です。\
\ <mark style="color:red;">**\[NEW]**</mark> <mark style="color:red;"></mark><mark style="color:red;">画像がアップロードできるようになりました。「画像アイコンのボタンをクリック」or「マークダウンエディタ部分にドラッグ」にて画像アップ可能です。（2022.9.17)</mark>\
\
※Twitter、Flickr、You Tube、speakerdeckなどの外部サービスのURLを記述すると、[コンテンツが埋め込まれる機能が](https://protopedia.gitbook.io/helpcenter/embed)追加されました。（2021.8.25）

## エディターで簡単にできること

太文字、イタリック、見出し1、引用、箇条書き、リンク、画像などはアイコンをタップするだけでMarkdown表記に変換してくれます。

![](https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MISUmnaAA8Fnokx03BB%2F-MN6wt2swvWYrB0fQLo_%2F-MN78cJRWAedJnupiD9N%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-11-27%2014.18.26.png?alt=media\&token=a01ed684-1cbd-47bb-a722-d3489ac778cb)

「目」のアイコンをタップすると、どのように表示されるか確認できます。

![](https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MISUmnaAA8Fnokx03BB%2F-MN6wt2swvWYrB0fQLo_%2F-MN78u0i6-9-H2seV5IN%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-11-27%2014.18.35.png?alt=media\&token=d4587187-fabd-4998-afe3-5eb2e2487813)

「テーブル」のアイコンをタップすると、表示を確認しながら編集できます。\
（自動的に全画面表示になります）

![](https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MISUmnaAA8Fnokx03BB%2F-MN6wt2swvWYrB0fQLo_%2F-MN798xRaSwYp91BfN77%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-11-27%2014.18.58.png?alt=media\&token=bd483654-2d00-492c-8d76-f43e6b358a2f)

## エディター以外での記述方法

## 1.見出し

見出し5まで対応しています。

```
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
```

<div align="left"><img src="https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MISUmnaAA8Fnokx03BB%2F-MN79ZoUzhJxkooYPwGh%2F-MN7AHYjvBo1gI819ulR%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-11-27%2014.28.54.png?alt=media&amp;token=1ff352c9-1c29-4ff2-bd51-7dbf7d5a83be" alt=""></div>

## 2.テーブル

```
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| 09:00 | 09:00 |  09:00  |
| 10:00 | 10:00 |  10:00  |
| 11:00 | 11:00 |  11:00  |
| 12:00 | 12:00 |  12:00  |
```

<div align="left"><img src="https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MISUmnaAA8Fnokx03BB%2F-MN79ZoUzhJxkooYPwGh%2F-MN7CZQHxWCAKAUjeikr%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-11-27%2014.38.41.png?alt=media&amp;token=5c277bcc-d865-481b-93f0-33c97ca92e04" alt=""></div>

## 3.取り消し線

```
~~取り消し線~~
```

~~取り消し線~~

## 4.コードブロック

1タブか4スペースを入力

```
Test

	<html>
		<head>
		<title>Test</title>
		</head>
	<html>
	
end
```

![](https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MISUmnaAA8Fnokx03BB%2F-Mhvz_V2rmxSWXDBdNcK%2F-Mhw0E3BW0mGYnZfF7f7%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-25%2015.34.17.png?alt=media\&token=03cbcd8f-89b1-4acf-86cd-1298042dbacd)

## 5.外部コンテンツの埋め込み

Twitter、Flickr、You Tube、speakerdeck、MakeCode、CARTOなどは、サービスのURLを記載すると、コンテンツが埋め込まれた形式で表示されます。（[埋め込み機能詳細](https://protopedia.gitbook.io/helpcenter/embed)）\
　事例：[Twitter](https://protopedia.net/prototype/3035)｜[MakeCode](https://protopedia.net/prototype/3252)｜[CARTO](https://protopedia.net/prototype/212)

<figure><img src="https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MISUmnaAA8Fnokx03BB%2Fuploads%2FoH1uX97ZnATdpUh6Hqlt%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-24%2012.03.28.png?alt=media&amp;token=f54f9c38-a927-4ee4-bfff-2c26b50dcdc9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MISUmnaAA8Fnokx03BB%2Fuploads%2F543sX31VQCjETUA4954g%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-13%2015.03.37.png?alt=media&amp;token=546cae8b-1062-4e60-8bfe-bd6a055689fa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2370165561-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MISUmnaAA8Fnokx03BB%2Fuploads%2Faw0LkBoNvpbvlpMigQr5%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-24%2012.01.12.png?alt=media&amp;token=372c06b0-c54f-474b-937f-ed4f0e30ac7d" alt=""><figcaption></figcaption></figure>

## 6.html記載

htmlにも対応しておりますので、画像サイズの調整など、Markdown記法でできないことは、htmlで入力ください。

```
<img src="画像のURL" alt="" height="">
```

\
その他は[こちら](https://www.markdownguide.org/basic-syntax/)を参照ください。（Markdown、HTML両方の記載が例があります）
