3月 31, 2021

MarkdownとVisual Studio Code

を使用したMarkdown編集Visual Studio CodeでMarkdownファイルを操作することは、シンプルで簡単で楽しいです。 VS Codeの基本的な編集に加えて、より生産的になるのに役立つMarkdown固有の機能がいくつかあります。

Markdown extensions

VSコードがすぐに提供する機能に加えて、より大きな機能のための拡張機能をインストールすることができます。p>

ヒント: 上記の拡張機能タイルをクリックして、説明とレビューを読んで、どの拡張機能が最適かを判断します。 市場でより多くを参照してください。

Markdown preview

VS Codeは、すぐにMarkdownファイルをサポートしています。 あなただけの、Markdownテキストの書き込みを開始.md拡張子を持つファイルを保存し、あなたはコードとMarkdownファイルのプレビューの間でエディタの可視化を切 ビューを切り替えるには、エディタで⌘V（Windows、Linux Ctrl+Shift+V）を押します。 編集中のファイルと並んでプレビュー（⌘K V（Windows、Linux Ctrl+K V））を表示し、編集中に変更がリアルタイムで反映されていることを確認できます。ここでは非常に単純なファイルの例を示します。

ヒント：エディタタブを右クリックしてプレビューを開く（⇧ ⌘V（Windows、Linux Ctrl+Shift+V））を選択するか、コマンドパレット（⇧ ⌘P（Windows、Linux Ctrl+Shift+P））を使用してmarkdownを実行することもで: プレビューをサイドコマンド（⌘K V（Windows、Linux Ctrl+K V））に開きます。

動的プレビューとプレビューロック

デフォルトでは、Markdownプレビューは自動的に現在アクティブなMarkdownファイルをプレビューするように更新されます。

プレビューは自動的に現在のMarkdownドキュメントをプレビューするように切り替わります

Markdown:Toggle Preview Lockingコマンドを使用して、Markdownプレビューをロックすることができます。現在のMarkdownドキュメント。 ロックされたプレビューは、タイトルに示されています:

ロックされたmarkdownプレビュー

エディタとプレビュー同期

VS Codeは、Markdownエディタとプレビューペインを自動的に同期します。 Markdownプレビューをスクロールすると、プレビューのビューポートに一致するようにエディタがスクロールされます。 Markdownエディタをスクロールすると、プレビューがビューポートに一致するようにスクロールされます。

Markdown Preview editor selection scroll sync

markdown.preview.scrollPreviewWithEditormarkdown.preview.scrollEditorWithPreview設定を使用してスクロール同期を無効にすることができます。

エディタで現在選択されている行は、左マージンの明るい灰色のバーでMarkdownプレビューに表示されます。

Markdown Preview editor line marker

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

Markdownプレビューダブルクリックはエディタに切り替わります

アウトラインビュー

アウトラインビューは、ファイルエクスプローラの下部にある別のセクションです。 展開すると、現在アクティブなエディタのシンボルツリーが表示されます。 Markdownファイルの場合、シンボルツリーはMarkdownファイルのヘッダー階層です。

Markdown Outline view

アウトラインビューは、ドキュメントのヘッダー構造とアウトラインを確認するのに最適な方法です。

Markdown previewの拡張

拡張機能は、カスタムスタイルとスクリプトをMarkdown previewに貢献して、外観を変更したり、新しい機能を追加したりできます。 プレビューをカスタマイズする一連の拡張機能の例を次に示します:

独自のCSSを使用する

また、Markdownプレビューで独自のCSSを使用することもできます。"markdown.styles": 設定。 MarkdownプレビューにロードするスタイルシートのUrlが一覧表示されます。 これらのスタイルシートは、httpsUrl、または現在のワークスペース内のローカルファイルへの相対パスのいずれかです。

たとえば、Style.cssというスタイルシートを現在のワークスペースのルートにロードするには、File>Preferences>Settingsを使用してワークスペースsettings.jsonfileを起動し、この更新を行います。

// Place your settings in this file to overwrite default and user settings.{ "markdown.styles": }

改行を作成するために末尾の空白を保つ

ハード改行を作成するには、markdownは行の最後に二つ以上のスペースを必要とします。 ユーザーまたはワークスペースの設定に応じて、vs Codeは末尾の空白を削除するように構成されている場合があります。 Markdownファイルの末尾の空白のみを保持するには、次の行をsettings.json:

{ "": { "files.trimTrailingWhitespace": false }}

Markdownプレビューセキュリティ

セキュリティ上の理由から、VS CodeはMarkdownプレビューに表示されるコンテンツを制限しています。 これには、スクリプトの実行を無効にし、httpsを介してリソースをロードすることのみを許可することが含まれます。

Markdownプレビューでページのコンテンツをブロックすると、プレビューウィンドウの右上隅に警告ポップアップが表示されます。

markdown security alert

markdown security selectormarkdown security selector

markdownプレビューのセキュリティ設定は、ワークスペース内のすべてのファイルに適用されます。

これらの各セキュリティレベルの詳細は次のとおりです:

Strict

これはデフォルトの設定です。 信頼されたコンテンツのみをロードし、スクリプトの実行を無効にします。 ブロックhttp画像。

変更する正当な理由があり、ワークスペース内のすべてのmarkdownファイルを信頼しない限り、Strictセキュリティを有効にしておくことを強

安全でないコンテンツを許可

スクリプトは無効にしますが、httpを介してコンテンツをロードすることができます。

Disable

プレビューウィンドウで追加のセキュリティを無効にします。 これにより、スクリプトの実行が可能になり、コンテンツをhttp経由でロードすることもできます。VS Codeにはいくつかの組み込みのMarkdownスニペットが含まれています-⌘Space（Windows、Linux Ctrl+Space）（Trigger Suggest）を押すと、コンテキスト固有の候補リストが表示されます。P>

ヒント：Markdownのための独自のユーザー定義のスニペットを追加することができます。 どのように見つけるためにユーザー定義のスニペットを見てみましょう。

MarkdownをHTMLにコンパイルする

VS Codeは、統合されたタスクランナーを介してMarkdownコンパイラと統合されます。 これを使用して、.md.htmlファイルにコンパイルできます。 簡単なMarkdown文書のコンパイルを見てみましょう。

ステップ1:Markdownコンパイラのインストール

このチュートリアルでは、人気のあるノードを使用します。jsモジュール、markdown-it。

npm install -g markdown-it

注意: Beyond markdown-itから選択できる多くのMarkdownコンパイラがあります。 あなたのニーズや環境に最も適したものを選んでください。ステップ2：単純なMDファイルを作成します。

空のフォルダーでVS Codeを開き、sample.mdファイルを作成します。注：VS Codeでフォルダを開くには、ファイル>フォルダを開くか、フォルダに移動して「コード」と入力します。’コマンドラインで。p>

そのファイルに次のソースコードを配置します:

# Hello Markdown in VS Code!This is a simple introduction to compiling Markdown in VS Code.Things you'll need:* (https://nodejs.org)* (https://www.npmjs.com/package/markdown-it)* (/docs/editor/tasks)## Section Title> This block quote is here for your information.

ステップ3：タスクを作成します。json

次のステップは、タスク設定ファイルtasks.json>タスクを設定し、タスクの作成をクリックします。テンプレートからのjsonファイル。 VS Codeは、選択可能なtasks.jsonテンプレートのリストを表示します。 外部コマンドを実行したいので、Othersを選択します。これにより、ワークスペースにtasks.json.vscode次の内容のフォルダ:markdown-itを使用してMarkdownファイルをコンパイルするには、次のように内容を変更します。



{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }




iv id=”ヒント：サンプルは一般的な構成設定を支援するためにありますが、intellisenseはtasks.jsonファイルでも使用できます。 使用可能な設定を表示するには、⌘スペース（Windows、Linux Ctrl+スペース）を使用します。P>


ステップ4: ビルドタスクを実行する


より複雑な環境では、複数のビルドタスクが存在する可能性があるため、⌘b（Windows、Linux Ctrl+Shift+B）（ビルドタスクの実行）を押した後 さらに、コンパイルの問題の出力をスキャンすることができます。 MarkdownファイルをHTMLに変換するだけなので、表示されたリストからビルド出力をスキャンしないでください。この時点で、ファイルリストに追加のファイルが表示されるはずですsample.html。


コンパイルマークダウンタスクをデフォルトのビルドタスクにして実行する場合は、グローバルターミナルメニューからデフォルトのビルドタスク 最後のtasks.jsonファイルは次のようになります。


{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": , "group": { "kind": "build", "isDefault": true } } ]}


Markdownコンパイルの自動化


もう少し詳しく説明して、VS CodeでMarkdownコンパイルを自動化しましょう。 これは、以前と同じtask runnerの統合で行うことができますが、いくつかの変更があります。ステップ1


ステップ2


ステップ3: Gulpといくつかのプラグインをインストールします



Gulpを使用して、Markdownコンパイルを自動化するタスクを作成します。 また、gulp-markdownプラグインを使用して、物事を少し簡単にしています。グローバル（-gスイッチ）とローカルの両方にgulpをインストールする必要があります。


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




注：gulp-markdown-これは、前に使用していたmarkdown-itモジュール用のGulpプラグインです。 あなたが使用できる他の多くのGulp Markdownプラグインだけでなく、Gruntのためのプラグインがあります。gulpのインストールが成功したかどうかをテストするには、gulp -vと入力します。 グローバル（CLI）インストールとローカルインストールの両方でバージョンが表示されます。


ステップ2：単純なGulpタスクを作成します


前と同じフォルダ（sample.mdtasks.json.vscode根で。


そのファイルに次のソースコードを配置します:ここで何が起こっているのですか？


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', function() { return gulp.watch('**/*.md', gulp.series());});


ここで何が起こっているのですか？


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', function() { return gulp.watch('**/*.md', gulp.series());});ワークスペース内のMarkdownファイル、つまりVS Codeで開いている現在のフォルダーへの変更を監視しています。


  • 変更されたMarkdownファイルのセットを取得し、Markdownコンパイラ、つまりgulp-markdown-itを介して実行します。
    • 

  • これで、元のMarkdownファイルの後にそれぞれ名前が付けられたHTMLファイルのセットがあります。 次に、これらのファイルを同じディレクトリに配置します。
    • 

    ステップ3: GULP defaultタスクを実行する
    

    VS Codeとのタスクの統合を完了するには、先ほど作成したデフォルトのGulpタスクを実行するために、前からタスク構成を変更 tasks.json"version": "2.0.0"プロパティを保持しているだけで空にすることができます。 グローバルターミナルメニューからRun Taskを実行します。 Gulpファイルで定義されているタスクを一覧表示するピッカーが表示されていることに注意してください。 タスクを開始するには、[gulp:default]を選択します。 私たちは、あなたがコンパイルの問題のために出力をスキャンすることができます。 MarkdownファイルをHTMLに変換するだけなので、表示されたリストからビルド出力をスキャンしないでください。 この時点で、他のMarkdownファイルを作成および/または変更すると、生成されたそれぞれのHTMLファイルおよび/または保存に反映された変更が表示されま また、自動保存を有効にして、物事をさらに合理化することもできます。
    

    gulp:defaultタスクを⌘Bを押したときに実行されるデフォルトのビルドタスクにしたい場合（Windows、Linux Ctrl+Shift+B）グローバルターミナルメニューからconfigure Default Build Taskを実行し、表示されたリストからgulp:defaultを選択します。 最後のtasks.jsonファイルは次のようになります。
    

    { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": , "group": { "kind": "build", "isDefault": true } } ]}
    

    ステップ4:gulpのデフォルトタスクを終了
    

    gulp:defaultタスクはバックグラウンドで実行され、Markdownファイルへのファイル変更を監視します。 タスクを停止する場合は、グローバルターミナルメニューからタスクの終了を使用できます。
    

    について調べるために読んでください：
    

      

    • CSS、SCSS、およびLess-あなたのCSSを編集したいですか？ VS Codeは、CSS、SCSS、およびLess編集を非常にサポートしています。
      • 

    

    よくある質問
    

    スペルチェックはありますか？
    

    VS Codeではインストールされていませんが、スペルチェック拡張機能があります。 ワークフローに役立つ便利な拡張機能を探すには、VS Code Marketplaceを確認してください。
    

    VS CodeはGitHub Flavored Markdownをサポートしていますか？いいえ、VS Codeはmarkdown-itライブラリを使用してCommonMark Markdown仕様を対象としています。 GitHubは、このアップデートで読むことができるCommonMark仕様に移行しています。
    

    上記のチュートリアルでは、コマンドパレットにConfigure Taskコマンドが見つかりませんでしたか？フォルダではなくVS Codeでファイルを開いた可能性があります。 フォルダを開くには、ファイル>フォルダを開くフォルダを選択するか、フォルダに移動して”コード”と入力します。’コマンドラインで。
    


    

    

    
            
                        
    
                
    
                    
    Author: 
    					
    Filed Under: Articles
                                        
    
            
    
                    
        
    
        
        
                
    
        
                
        
                
    
        

    

    
	
		
    
		
    コメントを残す 
    メールアドレスが公開されることはありません。