1章. Markdown(マークダウン)と本記事について
1.0. 本記事の流れ
- 1章では、マークダウンと本記事についての説明をします。
- 2,3章では、基本的なマークダウン記法について説明します。
- 4章では、おすすめのVSCodeの拡張機能を紹介します。
- 5章では、実際にVSCodeでマークダウンを書く流れを確認します。
1.1. マークダウンってなに?
- テキストを構造的に記述する「軽量マークアップ言語」の一つ
- 整った文書を簡単に作成できます。
- IT業界ではよく使われるようです。
- Qiita,Zennなどで記事を書くときは、マークダウン記法を用いて書きます。
- Slackなどでコードを送るときにコードブロックを使うことで見やすくなります。
1.2. マークダウンの利点
- 文章装飾ができ、文章を見やすくまとめることができます。
- HTMLやWordよりも早く書けるはずです。
- HTMLより簡単で覚えやすいです。
1.3. マークダウンの欠点
- HTMLやWordよりも早く、簡単に書ける裏返しで凝った装飾があまりできないです。
1.4. VSCodeってなに？
- 正式名称は、Visual Studio Codeという、Microsoft社の提供する無償のコードエディタです。
- つまり、プログラムを書くためのソフトです。
- 最近人気のコードエディタだと思います。
1.5. なぜVSCodeなのか
- プログラムを書く人であれば、元々VSCodeを入れてる人もおり、その場合は新しいエディタを用意する必要がないから。
- 拡張機能が豊富
2章. マークダウン記法 前半
- 前半では、マークダウン記法を使うときに最低限必要だと思ったものをピックアップしました。
2.1. 見出し
- 6段階での字のサイズ分けができます。
- 上から２段階目までは下線もついてきます。
heading.md
# 見出し
## 見出し2
###### 見出し６
↓実際にやった結果
見出し1
見出し2
見出し６
2.2. 箇条書きリスト
- 入れ子構造にもできます。
bulletedList.md
- 1行目
- 2行目
- ネスト1行目
- ネストのネストの1行目
↓実際にやった結果
- 1行目
- 2行目
- ネスト1行目
- ネストのネストの1行目
- ネスト1行目
2.3.番号付きリスト
- 箇条書きリストに番号がついたものです。
- 番号を自分で変えなくても順番に直してくれます。
numberedList.md
1. 肉
1. 野菜
1. 葉野菜
1. レタス
1. キャベツ
1. 根野菜
1. 果物
↓実際にやった結果
- 肉
- 野菜
- 葉野菜
- レタス
- キャベツ
- 根野菜
- 葉野菜
- 果物
2.4. コード機能
- プログラムのコードを見やすく表示できます。
code.md
``` c:main.c
#include <stdio.h>
int main(int argc, const char * argv[]){
printf("HelloWorld!");
return 0;
}
```
↓実際にやった結果
main.c
#include <stdio.h>
int main(int argc, const char * argv[]){
printf("HelloWorld!");
return 0;
}
3章. マークダウン記法 後半
- 後半では、覚えておいた方がいい、覚えておくと便利なものをまとめました。
- 人によっては、こちらも最低限覚えておくべきものだと言われるかもしれません。
3.1. 引用
quote.md
> 参考：https://qiita.com/
↓ 実際にやった結果
3.2. リンクの挿入
link.md
[システム工学研究会](https://www.sysken.net/)
↓ 実際にやった結果
システム工学研究会
3.3. 画像の挿入
- 画像をドラッグ＆ドロップするとアップロードされます。
- Qiitaはgif, jpeg, png, tiffの画像形式のみアップロードできます。
- ＊わざわざ文字を打つことはしないので、コードは省略します。
↓実際にやった結果
3.4. 文字の装飾 斜体/太字/訂正線
decorate.md
*斜体*
**太字**
~~訂正線~~
↓ 実際にやった結果
斜体
太字
訂正線
3.5. テーブル
table.md
名前|年齢|性別
-|-|-
佐藤|20|男
鈴木|25|女
高橋|8|男
↓ 実際にやった結果
| 名前 | 年齢 | 性別 |
|---|---|---|
| 佐藤 | 20 | 男 |
| 鈴木 | 25 | 女 |
| 高橋 | 8 | 男 |
3.6. 水平線
- 区切り線を入れたい時に使います。
horizon.md
上
---
下
↓実際にやった結果
上
下
4章. おすすめの拡張機能
- VSCodeでは自分の好きな拡張機能を選んで追加することができます。
- VSCodeには多くの拡張機能がありますが、今回は個人的におすすめなマークダウンの拡張機能を4つ紹介します。
拡張機能の追加方法
- vscodeを開き、左端のバーの中のアイコンのうち正方形が4つあるアイコンをクリック、もしくはショートカットを使って、拡張機能の場所に移動します。
- macの場合：［Shift］＋［Command］＋［X］
- windowsの場合：［Shift］＋［Ctrl］＋［X］
- 左上の方に検索ボックスが出てくるのでそこで自分の目的の拡張機能の名前を入力します。
- 拡張機能名があっていれば目当ての拡張機能が出てくるはずなので、インストールボタンをクリックして、インストール完了です。
4.1. Markdown All in One
- リスト補完(List Editer)
- リストを記述する際に改行で自動で-や「1.」を入力してくれたり、tabキーでインデントを増減させることができます。
- 目次の作成・更新機能(手順)
- 目次を入れたい場所にカーソルを合わせます。
- [command] + [shift] + [p]でコマンドパレット起動します。
- windowsの場合は、 [ctrl] + [shift] + [p]です。
- 「>mark toc」と入力してコマンド検索します。
- 「MarkDown All in One: 目次(TOC)の作成」をクリックします。
- HTMLへの書き出し(手順)
- [cmd] + [shift] + [p]でコマンドパレットを表示します。
- コマンドパレットに>markdown htmlと入力してコマンドを検索します。
- 『Markdown All in One: 現在のドキュメントをHTMLへ出力』をクリックまたは選択してEnterすることでHTMLへ出力されます。
4.2. Markdown PDF
- pdfで提出する課題などをマークダウンで書けて便利です。
- MarkDownファイルをPDF, HTML, PNG, JPEGファイルで出力してくれます。
- コードの適当なところで右クリックして好きな形式を選択するだけでできます。
4.3. Markdown Preview Enhanced
- プレビュー機能がより高機能になります。
- 下で紹介する以外にも多くの機能がありそうですが、把握しきれていないです。
- 様々な形式でプレビューができる
- Markdown Preview Github Stylingの上位互換
- 例えば、GitHubと同じ見た目にすることもでき、GitHubのREADMEを書くときに便利になります。
- 方法
- プレビューを開き、右下にある３本線をクリック
- Preview Theme から自分の好きな色、形式を選ぶ
- Markdown Preview Github Stylingの上位互換
- 読むのにかかる時間を表示してくれる
- 左下に 4 min read というように、どのくらい読むのに時間がかかりそうなのかを表示してくれます。
- ページの上に飛ぶ機能が追加される
- 右上の∧をクリックすることで一番上に飛べます。
- 目次が作らなくても見れる
- 右上の３本線をクリックすると目次が表示されます。
4.4. Marp for VS Code
- マークダウンからプレゼンシートを作ることができるようになります。
- 詳しい使い方はこちらのサイトから↓
5章. VSCodeでMarkdownを使って文章を書いてみよう
- 実際にvscodeの起動から順番にやっていきます
1. VSCodeを起動
- VSCodeを入れてない人はこちらの記事を参考に初期設定をしてみてください↓
2. 新しくファイルを作る
- 拡張子はmd です。
- つまり、ファイル名の最後に .md とつける必要があります。
3. 文章を書く
- 作ったマークダウンファイルを開きます。
- その中で、マークダウン記法を使って文章を書きます。
4. プレビューで確認する
- [shift] + [command] + [V] でプレビューが表示されます。
- もしくは右上のノートに虫眼鏡マークのボタンをクリックします。
最後に
- これでマークダウンが書けるようになったね！
- 勉強した内容をQiitaにも書いてみんなと共有しよう！