Markdown + AI（GithubCopiotX）の驚異のタッグ！💥 2023年新世代の爆速ライティング体験へようこそ！💻いま、✨GithubCopiotXでMarkdownを作らないで、いつ作りますか？



## 新世代のライティング体験
- VSCode Insider＋GitHub Copilot nightly(Chat機能)で快適なMarkdown執筆体験を実現！
- Markdown Viewerでリアルタイムにプレビューを確認しながら執筆可能！
- Typoraを使っていた頃のライティング体験とは比べ物にならないほど快適！
- ChatGPTと比べても、MarkDownを理解して会話ができるので便利すぎる！

> ※2023/06/09追記(Chat機能など）ベータプレビュー版の機能について一旦削除m(__)m

## 執筆者の環境
- OS: Windows 11
- ブラウザ: Chrome,Edge
- エディタ: VSCode Insider
- WEBプラグイン: Markdown Viewer
- VSCodeプラグイン: GitHub Copilot nightly

## ゴール
 Markdownの執筆にGPTがサポートしてくれる。普通のライティングには戻れない。※１※２
 ChatGPTも使いますが、執筆作業においては圧倒的にコチラに軍配ですね。アイディアだしなど会話、対話をしたいときにChatGPTを使います。
※執筆環境（Chrome＊MarkdownViewr　＋　VscodeInsider＊GitpHubCopilotChat　）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/a7bdbcc1-8e17-e8da-692d-96251fcd2603.png)

※１　GitHubCopilotの機能として続きを予測して提案。Tabで受け入れ。
![image-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/80d86fa8-be67-d4c7-8c55-a1e36dd3043f.png)



### 導入方法

#### １.Markdown Viewer導入
##### １－１.Markdown Viewerのインストール

https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk


##### １－２.Markdown Viewerの設定

大事なこと！ローカルファイルへのアクセスを有効化します。
「Markdown Viewerのオプション」から、もしくは下記URLをアドレスバーにコピペ
`
chrome-extension://ckkdlimhmcjmikdlpkmbgfkaikojcbjk/options/index.html
`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/d565f07c-3adf-4516-0367-da15aa35b1c8.png)

THEME（おすきなものを）
![image-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/4836eca0-66f8-6d77-73eb-cd73813775ab.png)

COMPILER（pedanticをOFF・・・詳しく分かりませんがコレがONになっているとMermaidの図がレンダリングされませんでした。）
![image-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/3c0e1073-2e66-7236-f354-1330c79a7362.png)

CONTENT（全部盛りでOK）
- auto reload これはONにしましょう！執筆が捗る
- mermaid これはONにしましょう！図がレンダリングされる.
- toc これはONにしましょう！目次が作成される.

![image-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/5866d69a-adc6-62a7-660d-ff0252365ef2.png)

※１－２、この記事を執筆してる最中にGihubCopiotが提案してくれた内容です。書き出しで想像どおりの続きを提案してくてます。これは便利すぎる。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/47dbca21-ee06-6a31-3033-6eb55dcb9d7a.png)

※１－３、mathjaxの設定に至っては未知でしたので、へぇっ「数式表示ね」勉強になったわーって感じですね。この記事を執筆してる最中もいちいち感動体験です。
![スクリーンショット 2023-06-08 101845.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/b53af96f-6e2a-4f90-3d1e-56d63e7110ef.png)

※２－２、の記事を執筆してる最中、Chrome（MarkdDownViewr）ではコノようにみえてます。編集中に即反映されますし、プレビュー用のウィンドウが分割しているので、２画面で見るといい感じです。あとTOC（目次）があるのが便利ですね！先程の設定欄から目次のON,OFF簡単にできます。（サイドバーの開閉機能があればベストだったんだけどな～）あと好きなテーマを簡単に変更できるのは飽き性な方にはいいですね！（Typoraみたいにテーマの導入、カスタマイズが柔軟であるか未知です）
![スクリーンショット 2023-06-08 102958.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/6cb7361e-da66-5d0c-b53a-acc21787e13c.png)



#### ２.VsCode+GitHub Copilot Nightly 導入

##### ２－１.VSCodeInsiderのインストール
2023/06/08現在、VSCodeInsiderにしかGitHub Copilot Nightlyが対応していません。
GitHubCopilotChatは便利ですので是非、Insiderをインストールしましょう。
> ※2023/06/09追記ベータプレビュー版の機能について一旦削除m(__)m

https://code.visualstudio.com/insiders/

##### ２－２.GitHub Copilot Nightlyのインストール
紛らわしいですが、**GitHub Copilot Nightly** を入れてください。GitHubCopilotとは共存できません。

> ※2023/06/09追記ベータプレビュー版の機能について一旦削除m(__)m

![スクリーンショット 2023-06-08 104625.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/0035c115-151a-ebbd-d9e8-3809c2a87869.png)

##### ２－３.GitHub Copilot の契約
ごめんなさい。割愛しますが
１．GitpHubのアカウントが必要です。
２．下記のURLからGitHub Copilotの契約をしてください。
https://github.com/settings/copilot

> ※2023/06/09追記ベータプレビュー版の機能について一旦削除m(__)m


##### ２－４.GitHub Copilot 関連の認証設定

VscodeInsiderの左下（右下？）にあるアカウントマークから、信頼された拡張機能の管理を押してください。
![スクリーンショット 2023-06-08 110406.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/3d92bcfe-8a22-b52b-b8cd-317a7bf5cb52.png)

下図のようにGithub関連のアプリの認証が通っているか確認しましょう。
![スクリーンショット 2023-06-08 110435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97070/81f48c43-1694-f1e1-cfdf-db7459e8b18a.png)

> ※2023/06/09追記ベータプレビュー版の機能について一旦削除m(__)m


＝＝以上＝＝

## 参考リンク(*˘︶˘*).｡.:*♡

GithubCopiotについて
https://qiita.com/kagami_t/items/ba8c19bb34fd6a5a9642

GithubCopiotXについて
https://qiita.com/tak001/items/c6bca65d67843c24478f

## 結論：未来を感じさせるMarkdownライティング体験への扉が開かれた

この記事では、MarkdownとAIの組み合わせによって、より効率的で高度なライティング体験を実現する方法を紹介しました。GitHub Copilot Xをはじめとする最新のツールを駆使することで、Markdownのライティング体験は一変します。これからのライティングにおいて、MarkdownとAIの驚異のタッグが果たす役割はますます大きくなることでしょう。未来を感じさせる、わくわくするライティング体験をぜひ手に入れてください。