Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to convert .md file to .html file at the front end

2025-04-09 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "front-end how to convert .md files into .html files", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to convert .md files into .html files" this article.

Md file is a markup language of markdown, compared with html, it is simpler and faster, mainly reflected in the number of markers and writing.

Number of tags: html documents need to use a large number of tags, coupled with css to control style and typesetting, while markdown documents need only four basic tag symbols to do the same thing.

Marker writing: HTML document content needs to mark the beginning and end at the same time this is a web page, while markdown documents can be marked at the beginning # this is a md document. Here's how to convert an .md file to an .html file.

Method 1: use the i5ting_toc plug-in

You need to install npm (which comes with npm after installing node.js) before you can install the i5ting plug-in:

Npm install i5ting_toc-g

Execute the command line to generate the html file, and go to the corresponding root directory before entering:

I5ting_toc-f * * .md

It is important to note that when writing special symbols in md documents, remember to add spaces. Tip: how to quickly open cmd in the current directory? Select the current directory, hold down shift, and right-click to open the command window here (open the powerShell window here).

Method 2: use gitbook

You also need to install node first, and then run:

Npm i gitbook gitbook-cli-g

Generate the md file, this command will generate the corresponding md file, and then write your contents in the corresponding file:

Gitbook init

Md to html, generate a _ doc directory, open to see your html file.

Gitbook build

Method 3: use the front-end code

The realization principle is to use node.js to build a server, read md files and convert them into html fragments. The browser sends an ajax request to get the clip and then renders to generate a html web page.

Node Code:

Var express = require ('express'); var http = require (' http'); var fs = require ('fs'); var bodyParser = require (' body-parser'); var marked = require ('marked'); / / js package var app = express () that converts md to html; app.use (express.static (' src')); / / load static file var urlencodedParser = bodyParser.urlencoded ({extended: false}) App.get ('/ getMdFile',urlencodedParser, function (req, res) {var data = fs.readFileSync ('src/test.md',' utf-8'); / / read the local md file res.end (JSON.stringify ({body: marked (data)});}); / / start port listening var server = app.listen (8088, function () {var host = server.address (). Address Var port = server.address () .port; console.log ("Application instance, access address is http://%s:%s", host, port)})

Front-end html:

Md-to-HTML web app var article = document.getElementById ('article'); $.ajax ({url: "/ getMdFile", success: function (result) {console.log (' data acquisition succeeded'); error [XSS _ clean] = JSON.parse (result) .body;}, error: function (err) {console.log (err) Exclusive [XSS _ clean] ='

Failed to get data

The above is all the contents of the article "how to convert a .md file into a .html file". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report