mito

今回は、マークダウン記法で書いたものをpdfに書きだす方法を解説していきます。

momo

テキストエディタのVisual Studio Codeを使うとプラグインで簡単にpdf化できるよ！

簡単なメモや議事録、資料作りもVisual Studio Codeを使ってマークダウン記法でできると効率的だと思い、実験中です。

それではいってみましょう～。

マークダウンとは何か

前回こちらの記事で、マークダウン記法の書き方については書いています。

https://mito-lab.com/md/

mito

上記の記事を見ていただくとわかると思いますが、HTML似ていますが、タグを書くことなく簡略化した表現で文字の装飾ができます。

momo

マークアップは「<h3>見出し3</h3>｣といったタグと文字列を書き、文字列を装飾しますが、マークダウンは「***」と入力するだけでよいよ！

mito

つまり、キーボードのタイピング数が減って効率的ですね～。

あまり激しい装飾はできませんが、基本のシンプルな装飾であれば、マークダウン記法で事足りることが多いです。

書くときはマークダウン記法→共有はプレビュー画面

そんなとても効率的に書くことのできるマークダウンですが、通常の仕様書やメモなどのドキュメントであれば、マークダウンのまま共有…ではなく、プレビュー画面を共有したいとなります。

momo

そこで登場するのがVisual Studio Codeの拡張機能Markdown PDF

mito

「書くときはマークダウン記法で書き、共有はpdfで書きだして共有する」を実現してくれる拡張機能です。

pdf書き出しを行うMarkdown PDFの使い方

momo

それではMarkdown PDFのインストールからpdf書き出しまでやってみよう！

まとめ

いかがだったでしょうか。もっと工夫をすると、色を変えたり、背景画像の差し込みをしたりなどいろいろできると思います。

mito

夢が広がりますね！

mito

マークダウンで書いたものをpdfで書きだせることに気がついてからマークダウンをよく使うようになりました！

momo

タスク管理などもできるNotionもマークダウン記法が書けるよね

今回は、そんな知っていると案外使いどころの多いマークダウン記法についてよく使うものをまとめました。

それではいってみましょう～。

やりたいこと一覧

• 見出し
• リスト・番号付きリスト
• 空行・改行
• インラインの表示
• コードの挿入
• リンクの挿入
• 画像の挿入
• 引用
• テーブル挿入
• 太文字
• 斜体
• 打消し線
• ボーダー線

使用頻度の高い上記について書き方を紹介します。

作成環境

VScodeで「test.md」というファイルを作り、プレビュー表示を確認しながら作成します。

見出し

#の数で見出しの階層を表します。#6まであります。

momo

#の後ろは半角スペースを空けてね！

# 見出し1
## 見出し2
### 見出し3
#### 見出し4

リスト・番号付きリスト

momo

-(ハイフン)や.(ピリオド)の後ろは半角スペースを空けてね！

リスト

- リスト
- リスト
- リスト

番号付きリスト

1. リスト
2. リスト
3. リスト

momo

番号付きリストの場合、番号はなんでもいいよ。

入れ子構造にしたいときはtabをいれる。

momo

番号付きリストの場合、tab二つだよ。

- リスト
  - リスト
  - リスト
- リスト
- リスト

1. リスト
    1. リスト
   1. リスト
1. リスト

空行・改行

文末にスペース2つ入れて改行。空行を1行入れる。

コードのインラインの表示

`tree`コマンドを実行

コードの挿入

バッククウォート(`)3つで囲みます。

momo

言語名を書くことで、適切な色付けをしてくれるよ！

```typescript
let greeting = (name: string): void => {
  console.log(`Hello,{$name}!`);
};
```

リンクの挿入

[参考URL](https://mito-lab.com/)

画像の挿入


![step1-6.png](./img/step1-6.png)

引用

>　引用　mito-labより

テーブル挿入

| 種類           | 概要                                       |
| -------------- | ------------------------------------------ |
| 仮パラメーター | 関数宣言時に渡される値(パラメーター)       |
| 実パラメーター | 関数を呼び出すときに渡す値(実パラメーター) |
| 戻り値         | 関数が返す値                               |

左寄せ「:–」

右寄せ「-:」

中央寄せ「:-:」

太文字

**太字テキスト**

斜体

*italic 斜体*

打消し線

~~打消し線~~

ボーダー線

---

まとめ&補足

Web上で直接打ち込み確認できるプレビューサイトもあります。

https://markdownlivepreview.com/

mito

VSCodeでマークダウン記法を書く場合は、拡張機能の「Markdown All in One」を入れておくとさらに使い勝手が向上します。