[NodeJs] How to generate HTML files from Markdown files for online browsing

The editor that is often used is Markdown, which has a built-in preview typesetting effect function. The preview is an HTML web page. If you want to convert it into an HTML web page file, what should you do?

First of all, use the Node plug-in to do it. Before using it, make sure that the computer has installed the NodeJS application .

Initialize the project

Use VSCode or HBuilderX development tools to build a project (folder), for example, the project name is md_to_html,

If you use the VSCode development tool, you can install a Markdown Previewplug-in called , open the preview window of the md file and click the right mouse button menu to see some functions, as shown in the figure below, which HTML(offline)can

be used. If you don’t use the above simple operations to complete, then continue to go look down,

Open the integrated terminal in the project and directory, enter the following command to initialize the configuration

npm init

package.jsonAfter the initialization project is completed, you will see that a file has been generated , which is the project configuration, such as the following figure

Install markdown-it

Then, enter the following command to install the tool library markdown-it required by Node ,

node_modulesRun the following command, the folder in the above picture will appear after the installation is complete

npm install markdown-it --save

Then, write a test file , the code is as follows, the same as the file test.jsin the above picturemd_to_html.js

var fs = require('fs');
var markdowner = require('markdown-it');

var md = new markdowner({
    
    
    html:true,
    prefix:'code-'
});

console.time();

var sourcedata = '# html world';

var html = md.render(sourcedata||'');

fs.writeFileSync('./test.html', html);

console.timeEnd();

Looking at the above code, sourcedatait is the content of the stored Markdown document. If you read it directly from the document, you can change it to code such as fs.readFileSync('./test.md')reading

Generate HTML file

Enter the command to execute the script application. If it is correct, a file will be generated , which is the same as the file test.htmlin the above picture.md_to_html.html

node test.js

Look at the generated HTML file, the source code is fine, and an error will be reported when opening it with a browser, as shown below

index.htmlThis file name is wrong, but the browser opens this file by default

Browse HTML files

It needs to be placed on the web server. To solve the problem of not being able to open it, install a expressframework Express Chinese website and enter the following command

npm install express --save

Create a public folder and put the generated html file in this folder,

Write a file in the root directory of the project app.js, import expressthe script of the framework, the code is as follows

const express = require('express')
const app = express()
const port = 3000

app.use(express.static('public'))
app.get('/', (req, res) => {
    
    
  res.send('hello wolrd')
})

app.listen(port, () => {
    
    
  console.log(`Example app listening on port ${
      
      port}`)
})

Then, enter the following command and run the script app.jsto open a web local site server

As shown in the figure above, it means that the web server has been opened correctly

Finally, open the browser, enter the address http://localhost:3000/md_to_html.html, and the online preview here is successful.