最近在工作中遇到了接口返回 markdown 語法的文本在頁面中展示的場景,我選擇了使用 markdown-it 這個庫來處理,下面給大家做個分享。
markdown-it是一款功能強大的Markdown解析器,支持豐富的Markdown語法,能夠輕松將Markdown文本轉換為HTML格式。它擁有豐富的插件和配置選項,讓你的文檔編輯更加靈活多變。
你可以通過npm(Node.js包管理器)來安裝markdown-it。在命令行中輸入以下命令:
npm install markdown-it
安裝完成后,你就可以在你的項目中引入markdown-it了。
在JavaScript中,你可以通過以下方式使用markdown-it:
const markdownIt = require('markdown-it')();const md = markdownIt.render('# Hello, markdown-it!');console.log(md);
運行上述代碼,你會在控制臺看到以下HTML輸出:
<h1>Hello, markdown-it!</h1>
markdown-it支持大部分標準的Markdown語法,如標題、段落、列表、鏈接、圖片等。以下是一些示例:
除了基本語法外,markdown-it還支持一些擴展語法,讓你的文檔更加豐富多彩。以下是一些常用的擴展語法:
markdown-it的配置功能強大且靈活,可以滿足不同的解析需求。以下是markdown-it的配置選項:
(1) 預設配置
markdown-it提供了預設配置,以便快速啟用/禁用常用語法規則和選項。例如,你可以使用"commonmark"模式將解析器配置為嚴格的CommonMark模式。啟用該模式的方法如下:
var md = require('markdown-it')('commonmark');
默認配置(如果省略參數)和所有可用選項的啟用方式如下:
var md = require('markdown-it')({ html: true, // 在源碼中啟用 HTML 標簽 linkify: true, // 自動識別鏈接 typographer: true // 啟用一些語言學的替換和格式});
(2) 自定義配置
除了預設配置,你還可以根據需求自定義配置。例如,你可以通過options對象來啟用或禁用某些功能:
var md = require('markdown-it')({ html: false, // 禁用 HTML 標簽 xhtmlOut: false, // 不使用 '/' 來閉合單標簽 breaks: true, // 將連續的兩個換行轉換為 `<br>` 標簽 // 其他選項...});
(3) 插件
markdown-it的擴展性主要來自于其豐富的插件生態系統。你可以通過安裝和使用插件來添加更多功能,例如支持數學公式、流程圖、圖表等。
// 引入插件var markdownIt = require('markdown-it')();var plugin = require('markdown-it-plugin');// 使用插件markdownIt.use(plugin);
比如自己寫個自定義處理鏈接的插件:
function markdownItCustomLink(md, options) { md.renderer.rules.link_open = function (tokens, idx, options, env, self) { const hrefIndex = tokens[idx].attrIndex("href"); const href = tokens[idx].attrs[hrefIndex][1]; // const text = tokens[idx + 1].content; // 返回一個自定義組件的標簽,其中包含 href 和文本內容 return `<span class="md-link-to-span" data-num="${href}">${href}</span>`; }; md.renderer.rules.link_close = function () { // 不需要返回任何內容,因為在 open 標簽中已經完成了所有工作 return ""; };}module.exports = markdownItCustomLink;
markdown-it可以與其他工具結合使用,提高你的工作效率。例如,你可以將markdown-it與前端框架結合,將Markdown文本轉換為HTML后直接渲染在頁面上。此外,你還可以將markdown-it與編輯器結合,實現實時預覽和編輯Markdown文檔的功能。
markdown-it以其強大的解析能力和豐富的配置選項,成為Markdown文檔編輯的得力助手。通過掌握markdown-it的基本語法、擴展語法以及配置方法,你將能夠輕松駕馭文檔編輯,提升工作效率。
本文鏈接:http://www.www897cc.com/showinfo-26-82945-0.htmlmarkdown-it大揭秘:輕松玩轉文本格式化新神器!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com