こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、Markdownとは何か？ と、Markdownの書き方(一部HTML使用)チートシートをご紹介していきます。
Markdownとは？
「マークアップ言語」をより簡単に記述できるようにした「マークダウン言語」というものがあります。
「マークダウン言語」は「マークアップ言語」より記述がシンプルになるように設計されています。
例えば、、、
- 最初に # を記述すると見出しになる
- 半角スペースを2個入力で改行する
といったように、マークアップ言語よりシンプルな記述で文章に意味合いを持たせられるようになっているのがポイントです。
ただ「マークダウン言語」で記載した言語は構文変換されて、最終的に「マークアップ言語」の記述に変換されて読み込まれています。
そのため、マークアップ言語との併用も可能で、必要な部分はマークアップ言語を混ぜて記述を行うといった操作も可能です。
上記内容は、以前こちらの記事(私の個人Tech Blog)で説明した内容から抜粋しています。
見出しの表記: h タグ
Markdownでは、#とスペースで、見出し(hタグ)を表現できます。
## h2 見出し
### h3 見出し
#### h4 見出し
##### h5 見出し
リスト: ul & li タグ
次のようにして、ul & li タグの、Markdown表現ができます。
- ハムたち
- ロボ玉 Ver.3.0
- まりたま
番号付きリスト: ol & li タグ
次のようにして、ol & li タグの、Markdown表現ができます。
1. 白桃さん
2. 桃ちゃん
リンク: aタグ
[表示文字](URL)で、aタグに変換されます。
[AIQ Tech Blog](https://zenn.dev/p/aiq_dev)
画像: imgタグ
で、imgタグに変換されます。
改行: brタグ
改行は、brタグを使う方が楽です。
AIQ
<br>
Tech
段落
空白行を挟むことで段落となります。
段落なし
<br>
段落なし
段落あり
段落あり
水平線
アンダースコア(_), アスタリスク(*), ハイフン(-)のどれかを3つ以上連続して記述することで、表現します。
<hr>
---
___
***
太字: strong タグ
*2つで、テキストの前後を囲むと太字になります。
これは Strong_Text(太字) なのです！
これは **Strong_Text(太字)** なのです！
イタリック表現: em タグ
*1つでテキストの前後を囲むと、テキストがイタリック体（斜体）になります。
これは イタリック Text なのです！
これは _イタリック Text_ なのです！
打ち消し線
打ち消し線を使うには、~~(波線2つ)で、テキストの前後を囲みます。
打ち消し中な Text
~~打ち消し中な Text~~
引用
> これは引用です。
> ロボ玉は、プルプルハムスターです。
> > これは多重引用です。
これは引用です。
ロボ玉は、ぷるぷる系ハムスターです。これは多重引用です。
Table表現
| No | 活動概要 | 実施・難易度 |
| ---- | ---- | ---- |
| 1 | AIQ Tech Blog | 🌟(星 1) |
| 2 | 社内で、勉強会 | 🌟(星 1) |
| 3 | 社外ハッカソンやコンペにTeamで参加 | 🌟🌟(星 2) |
| 4 | プログラミング学習のサポートとなる教材の開発・研究活動 | 🌟🌟🌟(星 3) |
| 5 | 社内ハッカソンやアイデアソンの開催 | 🌟🌟🌟🌟(星 4) |
| 6 | 社内の内製化システムの開発などの実践的なTeam開発 | 🌟🌟🌟🌟🌟(星 5) |
| 7 | エンジニア採用パイプラインを構築する | 🌟🌟🌟🌟🌟(星 5) |
| No | 活動概要 | 実施・難易度 |
|---|---|---|
| 1 | AIQ Tech Blog | 🌟(星 1) |
| 2 | 社内で、勉強会 | 🌟(星 1) |
| 3 | 社外ハッカソンやコンペにTeamで参加 | 🌟🌟(星 2) |
| 4 | プログラミング学習のサポートとなる教材の開発・研究活動 | 🌟🌟🌟(星 3) |
| 5 | 社内ハッカソンやアイデアソンの開催 | 🌟🌟🌟🌟(星 4) |
| 6 | 社内の内製化システムの開発などの実践的なTeam開発 | 🌟🌟🌟🌟🌟(星 5) |
| 7 | エンジニア採用パイプラインを構築する | 🌟🌟🌟🌟🌟(星 5) |
インライン Code
バッククオート(`)で、テキストを囲むとインラインコードになります。
カレントのファイル・ディレクトリの一覧をすべて確認するには、`ls -al`を使います。
Code Block
バッククオート()3つで、テキストの前後を囲むことで、Codeの埋め込み表現をすることができます。 Zennでも、Markdownのこの記法を使って、Codeを埋め込みます。 また、最初のバッククオート()3つの後に、言語名を入れることで、そのCodeの内容にあったハイライトを入れてくれます。
echo 'ロボ玉'
/**
* NOTE: 2つの数値の間の乱数を返す関数
* @name makeRundom - 乱数生成
* @params {number} min - 最小値
* @params {number} max - 最大値
* @return {number} 乱数
*/
function makeRundom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
アコーディオン(折りたたみ)
アコーディオン(折りたたみ)は、次のようにHTMLで表現するのが簡単です。
<details>
<summary>ぷるぷるロボ玉</summary>
プルプルなのだ！
<br/>
ロボ玉なのだ！
<br/>
ハムなのだ！
</details>
(おまけ) Mermaid記法で、フローチャートなど図を描く
Markdown記法とは、また別物ですが、Mermaid記法というものを使って、フローチャートなどの図を描くことができます。
例えば、次のように記述することで、条件分岐(if文)を表現するフローチャートを描いたりできます。
Mermaid記法とPlantUMLの比較などの調査結果については、こちらのスクラップにまとめています。
Zenn独自のMarkdown記法は、こちらを確認
Zennには、独自のMarkdown記法が実装されていたりするので、
そういったZenn独自のMarkdown記法は、公式のチートシートをご確認ください。
まとめ
ZennもMarkdownで記述していますが、エンジニアの作成するDocでは、Markdownを使用することが多いので、このチートシートをぜひ活用してみてください。
個人で、Blogもやっています、よかったら見てみてください。
注意事項
この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。
求む、冒険者！
AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨
詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。
参考・引用
AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab
Discussion