Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCount


paste

photo credit: Jürgo Cat & Mice paste-ups via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてお伝えするシリーズです。

前回の記事はこちらです。

Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」
ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてシリーズでお伝えしています。今回は、Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」を紹介します。

Markdown文書の日本語をチェックする拡張機能「テキスト校正くん」について紹介しました。

今回は、Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCountを紹介します。

では、行ってみましょう!

スポンサーリンク

拡張機能Paste Imageとは

まず紹介する拡張機能Paste Imageは、Markdown文書に画像をペーストすることで挿入する機能を提供します。

公式ページには、以下のように紹介されています。

Paste image directly from clipboard to markdown/asciidoc(or other file)!

「クリップボードから直接的にMarkdownに画像をペーストするよ!」ということですね。

Paste Image - Visual Studio Marketplace
Extension for Visual Studio Code - paste image from clipboard directly

VS CodeでMarkdownに画像を挿入する場合、デフォルトでは以下のような手順が必要です。

  1. フォルダに画像を格納する
  2. Markdownの画像挿入の記述をする ※![代替テキスト](フォルダパス)

ちょっと面倒ですよね…これをクリップボードのペーストだけで実現してくれるというものです。

Paste Imageのインストール

では、拡張機能Paste Imageをインストールしていきましょう。

アクティビティバーの「Extensions」から「Paste Image」を検索して、「Install」です。

類似がいっぱいありますので、同名のもっともバージョンが新しいものを選択しましょう。

010-拡張機能Paste Imageをインストール

Paste Imageを用いた画像の挿入

では、拡張機能Paste Imageを使ってMarkdown文書に画像を挿入してみましょう。

まず、適当な画像をコピーします。今回は、Webページから右クリックで画像をコピーしました。

画像をコピー

その後、VS CodeのMarkdownの挿入したい位置にカーソルを置いた状態で、ショートカットキー Ctrl + Alt + V または ⌥⌘V です。

(私の場合、Evernoteのグローバルホットキーとかぶっていました…Evernoteをお使いの方、気をつけてください。)

すると、以下のようにMarkdownファイルと同じフォルダ内に画像ファイルが自動保存され、その画像がMarkdown文書にも挿入されます。

030-paste Imageにより画像が挿入される

これは、画像をたくさん使用する文書作成時には役立ちますね!

Paste Imageの保存先フォルダの設定

ペーストした画像が自動保存されるのはありがたいのですが、画像専用のフォルダなど、特定のフォルダに保存したいときもあります。

その場合は、設定により画像の保存先を変更できます。

まず、 Ctrl + , または ⌘, でSettingsを開きます。

検索窓で「paste image」などで検索し、「Paste Image: Path」の設定項目に以下のように入力します。

${currentFileDir}/fig

040-Paste Imageの設定によりフォルダを変更する

ここで「${currentFileDir}」は、現在のMarkdownファイルの保存先フォルダを表しますので、その配下の「fig」というフォルダ内に画像を保存するように設定したわけです。

これで再度ショートカットキー Ctrl + Alt + V または ⌥⌘V で「ペースト」をすると、以下のように画像ファイルの保存先フォルダが変更されます。

050-Paste Imageの保存先フォルダを変更する

拡張機能CharacterCountとは

次に紹介する拡張機能CharacterCountは、その名のとおり文字数をカウントする機能を提供する拡張機能です。

以下公式ページにある通り、Markdown形式とプレーンテキスト形式のファイルに対応しています。

CharacterCount - Visual Studio Marketplace
Extension for Visual Studio Code - 文字数をリアルタイムでカウントする、Visual Studio Codeの機能拡張です。

拡張機能CharacterCountのインストール

拡張機能CharacterCountのインストールは他の拡張機能と同様ですね。

アクティビティバーの「Extensions」から「CharacterCount」を検索して、「Install」すればOKです。

060-拡張機能CharacterCountのインストール

拡張機能CharacterCountによる文字数カウント

拡張機能CharacterCountによる文字数カウントですが、使い方はいたって簡単です。

インストールしたら自動で以下のようにステータスバーに文字数をカウントしてくれます。

070-拡張機能CharacterCountによる文字数カウント

なにげに便利ですね~。

まとめ

以上、Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCountを紹介しました。

VS CodeとMarkdownによる執筆についてのシリーズは以上です。

ぜひ、活用して快適な執筆ライフをお過ごしくださいね!

連載目次:ノンプロ向けVS CodeとMarkdownで書籍を執筆

コミュニティ「ノンプログラマーのためのスキルアップ研究会」では技術同人誌の制作プロジェクトを開始しました。その執筆環境としてVisual Studio Code(VS Code)を使い、Markdown記法で書くということを前提にしていきますので、このシリーズでその準備や書き方についてお伝えしていきます。
  1. VS CodeでMarkdownで書いた文書ファイルをプレビューする方法
  2. 【ノンプログラマー向け】Markdownとは何か、またその書き方について
  3. VS CodeでMarkdownを書くために便利な拡張機能Markdown All in One
  4. Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」
  5. Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」
  6. Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCount

タイトルとURLをコピーしました