Automating Markdown compilation in VS Code (Compiling multiple .md files)
Описание
In this tutorial session, we will learn 'Automation of Markdown compilation in Visual Studio Code (Compiling multiple .md files). To automate this process of compilation we need integrate task runner in vs code. And we are going follow the steps given below:
To automate this process of compilation we need to integrate task runner in vs code.
Step 1: Install Gulp and some plug-ins
- We need to install gulp both globally (-g switch) and locally:
npm install -g gulp
npm install gulp gulp-markdown-it
- Now verify gulp installation by typing the following command: gulp -v
Step 2: Create a simple Gulp task
- Open VS Code on the same folder from before (contains a sample.md and tasks.json under the .vscode folder), and create gulpfile.js at the root.
- Place the following source code in that file: ============================================================
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']));
});
============================================================
What is happening in the above code? We are watching for changes to any Markdown file in our workspace, i.e. the current folder open in VS Code.
We take the set of Markdown files that have changed and run them through our Markdown compiler, gulp-markdown-it.
We now have a set of HTML files, each named respectively after their original Markdown file.
file1.md ===: file1.html
We then put these files in the same directory.
Step 3: Run the gulp default task in the background.
Edit the Tasks.json file and use the following code : ============================================================
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "gulp",
"task": "default",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
}
]
} ============================================================
Step 4: Terminate the gulp default Task
The gulp: default task runs in the background and watches for file changes to Markdown files. If you want to stop the task, you can use Terminate Task from the global Terminal menu.
#AutomationMarkdownCompilationVSCode #CoolITHelp
Рекомендуемые видео



















