MarkdownとVS Code

Editor and preview synchronization

あなたのエディタの側面にあるMarkdownプレビューで作業するとき、VS Codeは、エディタとプレビューのビューを同期させることができます。既定では、Markdownプレビューは、自動的に、エディタで選択された行の要素を明らかにするために、スクロールします。

この動作は、markdown.preview.scrollPreviewWithEditorSelection設定を使用して無効にすることができます。

現在選択された行は、Markdownプレビューで、左側のマージンに明るい灰色のバーが表示されます。：

また、Markdownプレビューがスクロールされるとき、エディタは、それと一緒にスクロールします。：

これは、markdown.preview.scrollEditorWithPreview設定を使用して無効にすることができます。

さらに、Markdownプレビューで、要素をダブルクリックすることは、自動的に、クリックされた要素に最も近い行に、ファイルとスクロールのためのエディタを開きます。

Extending the Markdown preview

Using your own CSS

また、あなたは、"markdown.styles": [] 設定に、Markdownプレビューのあなたの独自のCSSを使用することができます。これは、Markdownプレビュー内で読み込むスタイルシートのurlの一覧を示します。これらのスタイルシートは、https url、あるいは、現在の作業スペースのローカル・ファイルへの相対パスのいずれかになります。

例えば、あなたの現在の作業スペースのルートのStyle.cssと呼ばれるスタイルシートを読み込むために、settings.jsonファイルを表示して、File > Preferences > Settingsを使用して、この設定を更新します。：

// このファイルに設定を置き、デフォルトおよびユーザー設定を上書きします。
// Place your settings in this file to overwrite default and user settings.
{
    "markdown.styles": [
        "Style.css"
    ]
}

Strict

これは、既定の設定です。信頼できるコンテンツのみを読み込み、スクリプトの実行を無効にします。私たちの信頼されたバッジ・プロバイダのものではない、http画像とすべてのSVG画像をブロックします。

あなたが、有効な厳密なセキュリティを維持することが、強く推奨されます。あなたは、それを変更するための極めて素晴らしい理由を持っています。そして、あなたは、作業スペースで、すべてのマークダウン・ファイルを信頼します。

Allow insecure content

スクリプトを無効にしたままにしますが、http経由でコンテンツを読み込むことができます。また、SVG画像を有効にします。

Disable

プレビュー・ウィンドウで、追加のセキュリティを無効にします。これにより、スクリプトの実行が可能になり、http経由でコンテンツを読み込むこともできます。

Step 1: Install a Markdown compiler

このチュートリアルのため、私たちは、人気があるNode.jsモジュール（markdown-it）を使用しました。

npm install -g markdown-it

備考: markdown-itの先に、選択するための多くのMarkdownコンパイラがあります。あなたの必要性と環境に最も好都合であるものを選択して下さい。

Step 2: Create a simple MD file

空のフォルダ上で、VS Codeを開いて、sample.mdファイルを作成します。

備考: あなたは、File > Open Folder...で、フォルダを選択するか、'code .'と入力し、コマンド・ラインで、フォルダに移動するかのどちらかで、VS Codeでフォルダを開くことができます。

そのファイルに、次に示すソース・コードを配置します。：

# Hello Markdown in VS Code!

This is a simple introduction to compiling Markdown in VS Code.

Things you'll need:

* [node](https://nodejs.org)
* [markdown-it](https://www.npmjs.com/package/markdown-it)
* [tasks.json](/docs/editor/tasks)

## Section Title

> This block quote is here for your information.

Step 3: Create tasks.json

次の手順は、タスク設定ファイルtasks.jsonを設定することです。これを実行するには、Tasks > Configure Tasksを実行し、テンプレートから、tasks.json fileを作成をクリックします。VS Codeは、続いて、選択するための利用可能なtasks.jsonテンプレートのリストを提示します。私たちが、外部コマンドを実行したい場合は、Othersを選択します。

これは、次のコンテンツと一緒に、あなたの作業スペースの.vscodeフォルダのtasks.jsonファイルを生成します。：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo Hello"
        }
    ]
}

Markdownファイルをコンパイルするmarkdown-itを使用するために、次のように、コンテンツを変更します。：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Compile Markdown",
            "type": "shell",
            "command": "markdown-it sample.md -o sample.html",
            "group": "build"
        }
    ]
}

ヒント： このサンプルは、一般的な構成の設定を支援するためのものですが、IntelliSenseは、あなたを一緒に助けるために、tasks.jsonファイルのために利用できます。使用可能な設定を見るために、Ctrl+Spaceを使用します。

Step 1: Install Gulp and some plug-ins

私たちは、Markdownコンパイルを自動化するタスクを作成するGulpを使用します。また、gulp-markdownプラグインを使用すると、少し簡単になります。

私たちは、グローバルに（-gスイッチ）とローカルに、gulpをインストールする必要があります：：

npm install -g gulp
npm install gulp gulp-markdown-it

備考: markdown-it は、マークダウンのためのGulpプラグインです。－それは、私たちが、以前、使用していたモジュールです。Gruntのためのプラグインと同様に、あなたが使用できる多くの他のGulp Markdownプラグインがあります。

Step 2: Create a simple Gulp task

前と同じフォルダの上で、VS Codeを開きます。（.vscodeフォルダの下に、sample.mdとtasks.jsonが含まれています)、そして、ルートに、gulpfile.jsを作成します。

そのファイルに、次に示すソース・コードを配置します。：

var gulp = require('gulp');
var markdown = require('gulp-markdown-it');

gulp.task('markdown', function() {
    return gulp.src('**/*.md')
        .pipe(markdown())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }));
});

gulp.task('default', ['markdown'], function() {
    gulp.watch('**/*.md', ['markdown']);
});

ここで、何が起こるのでしょうか？

1. 私たちは、作業スペースで、Markdownファイルの変更を監視しています。すなわち、カレント・フォルダは、VS Codeで開かれます。
2. 私たちは、変更したMarkdownファイルの設定を取得します。そして、私たちのMarkdownコンパイラで、それらを実行します。すなわち、gulp-markdown-it。
3. 私たちには、現在、対となるHTMLファイルがあります。それぞれ元のMarkdownファイルの後に、それぞれ名前が付けられます。私たちは、続いて、これらのファイルを、同じディレクトリに配置しました。

Step 3: Run the gulp default Task

VSコードで、タスクの統合を完了するために、私たちは、先ほど作成したデフォルトのGulpタスクを実行する前に、タスク構成を変更する必要があります。あなたは、tasks.jsonファイルを削除する、あるいは、"version": "2.0.0"で、それを空にすることができます。 次に、グローバル・タスク・メニューからRun Taskを実行します。gulpファイルで定義されているタスクを一覧表示するピッカーが表示されていることを確認します。タスクを開始するために、gulp: defaultを選択します。私たちは、あなたが、コンパイルの問題のために、出力を走査できます。私たちは、Markdownファイルを、選択するHTMLに変換したいだけなので、提示されたリストから、出力を決してスキャンしないで下さい。ここで重要な点は、あなたが他のMarkdownファイルを作成しておよび／または修正するならば、あなたは、作成されるそれぞれのHTMLファイルやセーブに関して反映される変更を確かめます。また、あなたは、さらに多くのものを合理化するために、Auto Saveを有効にすることができます。

あなたが、デフォルトのビルド・タスクを実行したgulp: defaultタスクを作成したい場合、Ctrl + Shift + Bを押すとグローバル・タスク・メニューから、Configure Default Build Taskを実行し、表示されたリストからgulp：defaultを選択します。最終的なtasks.jsonファイルは、次のようになります。：

Step 4: Terminate the gulp default Task

gulp: defaultタスクは、バックグラウンドで実行されます。そして、Markdownファイルへのファイル変更を監視します。あなたが、タスクを停止したい場合、あなたは、グローバル・タスク・メニューから実行中タスクを終了することができます。