uniapp+vue3嵌入Markdown格式

使用的庫是towxml

第一步:下載源文件,那么可以git clone,也可以直接下載壓縮包
git clone https://github.com/sbfkcel/towxml.git

第二步:設置文件夾內的config.js,可以選擇自己需要的格式

第三步:安裝依賴和打包
npm i
npm run build
打包完成后會生成一個dist文件夾,改名字為towxml

第四步:在uniapp項目的src目錄下新建wxcomponents目錄(需要注意的是這個文件名是有要求的),然后將towxml放到wxcomponents

第五步:修改towxml里的decode.json,將里面的前綴改為相對路徑./

"decode": "/towxml/decode",
改為
"decode": "./decode",

第六步:在全局掛載towxml,代碼如下:

const towxml = require('./wxcomponents/towxml/index');
export function createApp() {const app = createSSRApp(App);app.config.globalProperties.$towxml = towxmlreturn {app,};
}

這里使用的commonjs,所以需要安裝@types/node,并且在tsconfig.jsontypes添加node,代碼如下:

"types": ["@dcloudio/types","nutui-uniapp/global.d.ts","node"]

第七步:在pages.json里需要的頁面的style屬性里使用組件

		{"path": "pages/question_detail/index","style": {"navigationBarTitleText": "面試題","usingComponents": {"towxml": "/wxcomponents/towxml/towxml"}}},

第八步:在頁面使用towxml

<towxml :nodes="testData" class="towxml-content" />
import { reactive, ref, getCurrentInstance } from 'vue';const instance = getCurrentInstance();
const appContext = instance?.appContext
const testData = appContext?.config.globalProperties.$towxml('``111``', 'markdown')

第九步:由于該組件默認帶有邊距,所以需要在towxml/style/main.scss里進行手動修改,代碼如下:

// towxml/style/main.scss
.h2w__main {margin: 0;padding-top: 0;
}

在組件里使用class! important是無效的

實現效果:
在這里插入圖片描述

參考了知乎文章:uniapp中解析markdown支持網頁和小程序
參考了CSDN文章:uni-app中使用towxml

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/44073.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/44073.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/44073.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

大模型/NLP/算法面試題總結3——BERT和T5的區別?

1、BERT和T5的區別&#xff1f; BERT和T5是兩種著名的自然語言處理&#xff08;NLP&#xff09;模型&#xff0c;它們在架構、訓練方法和應用場景上有一些顯著的區別。以下是對這兩種模型的詳細比較&#xff1a; 架構 BERT&#xff08;Bidirectional Encoder Representation…

【Web前端】JWT(JSON Web Tokens)概述

1、簡介 JWT&#xff08;JSON Web Tokens&#xff09;是一種用于雙方之間安全傳輸信息的簡潔的、URL安全的令牌標準。 它基于JSON對象&#xff0c;并通過數字簽名確保其完整性和真實性。 JWT因其小巧、自包含以及易于在客戶端和服務器之間傳輸的特性而被廣泛使用于身份驗證和…

python字符串驗證從基礎到進階的總結

引言 在數據處理和文本挖掘中&#xff0c;對字符串的驗證是確保數據符合特定要求的關鍵步驟之一。其中一個常見的驗證需求是確認字符串是否只包含字母。Python為此提供了多種實現的方法&#xff0c;我們將逐一討論它們。 方法1&#xff1a;使用 isalpha() 方法 def is_all_l…

UML 2.5圖的分類

新書速覽|《UML 2.5基礎、建模與設計實踐》新書速覽|《UML 2.5基礎、建模與設計實踐 UML 2.5在UML 2.4.1的基礎上進行了結構性的調整&#xff0c;簡化和重新組織了 UML規范文檔。UML規范被重新編寫&#xff0c;使其“更易于閱讀”&#xff0c;并且“盡可能減少前向引用”。 U…

php簡單實現利用飛書群里機器人推送消息的方法

這是一篇利用的飛書的自定義機器人&#xff0c;將系統中的錯誤信息推送給技術群的功能代碼示例。 飛書文檔地址&#xff1a;開發文檔 - 飛書開放平臺 自定義機器人只能在群聊中使用的機器人&#xff0c;在當前的群聊中通過調用webhook地址來實現消息的推送。 配置群邏輯可以看…

LLM應用構建前的非結構化數據處理(三)文檔表格的提取

1.學習內容 本節次學習內容來自于吳恩達老師的Preprocessing Unstructured Data for LLM Applications課程&#xff0c;因涉及到非結構化數據的相關處理&#xff0c;遂做學習整理。 本節主要學習pdf中的表格數據處理 2.環境準備 和之前一樣&#xff0c;可以參考LLM應用構建前…

金蝶部署常見問題解決

金蝶部署常見問題解決 金蝶版本&#xff1a; Apusic Application Server Enterprise Edition 9.0 SP8 kbc build 202312041121 報錯信息&#xff1a; 與金蝶官方人員溝通&#xff0c;發現lib包版本太低&#xff0c;升級后可正常使用。替換lib包后重啟服務。 下載lib: 鏈接: …

西瓜杯CTF(1)

#下班之前寫了兩個題&#xff0c;后面繼續發 Codeinject <?php#Author: h1xaerror_reporting(0); show_source(__FILE__);eval("var_dump((Object)$_POST[1]);"); payload 閉合后面的括號來拼接 POST / HTTP/1.1 Host: 1dc86f1a-cccc-4298-955d-e9179f026d54…

公司內部配置GitLab,通過SSH密鑰來實現免密clone、push等操作

公司內部配置GitLab&#xff0c;通過SSH密鑰來實現免密clone、push等操作。以下是配置SSH密鑰以實現免密更新的步驟&#xff1a; 1.生成SSH密鑰 在本地計算機上打開終端或命令提示符。輸入以下命令以生成一個新的SSH密鑰&#xff1a;ssh-keygen -t rsa -b 4096 -C "your…

VBA實現Excel數據排序功能

前言 本節會介紹使用VBA如何實現Excel工作表中數據的排序功能。 本節會通過下表數據內容為例進行實操&#xff1a; 1. Sort 單列排序 語法&#xff1a;Sort key1,Order1 說明&#xff1a; Key1&#xff1a;表示需要按照哪列進行排序 Order1&#xff1a;用來指定是升序xlAsce…

D2D用戶的功率優化算法研究

D2D通信技術是指兩個對等的用戶節點之間直接進行通信的一種通信方式。在由D2D通信用戶組成的分布式網絡中&#xff0c;每個用戶節點都能發送和接收信號&#xff0c;并具有自動路由(轉發消息)的功能。網絡的參與者共享它們所擁有的一部分硬件資源&#xff0c;包括信息處理、存儲…

短視頻矩陣搭建,用云微客獲客更方便

你的同行都爆單了&#xff0c;你還在問什么是矩陣&#xff1f;讓我來告訴你。短視頻矩陣是短視頻獲客的一種全新玩法&#xff0c;是以品牌宣傳、產品推廣為核心的一個高端布局手段&#xff0c;也是非常省錢的一種方式。 1.0時代&#xff0c;一部手機一個賬號&#xff1b;2.0時代…

demon drone 200無人機標定流程

demon drone 200無人機標定流程 一、飛控固件更新1.1 固件更新1.2 參數更新 二、imu標定2.1 安裝imu標定工具&#xff08;在你自己的電腦上&#xff09;2.2 錄制rosbag(在對應飛機上)2.3 運行標定程序&#xff08;在你自己的電腦上&#xff09; 三、雙目及imu聯合標定3.1 安裝標…

mysql索引筆記

這里想整理一下性能優化中用到的東西&#xff0c;先整理一下優化mysql索引中所查閱到的資料吧。 目錄 MySQL索引類型詳解存儲方式區分1.B樹索引2.哈希索引 邏輯區分1.普通索引2. 唯一索引3. 主鍵索引4. 空間索引5. 全文索引 實際使用區分1. 單列索引2. 多列索引 多表聯查如何建…

GD 32中斷系統實現

1.0 中斷的概念 中斷&#xff1a;簡單來說就是打斷的意思&#xff0c;在計算機系統中CPU在執行一個操作的時候&#xff0c;有一個比當前任務更為緊急的任務需要執行,cpu暫停當前任務轉而去執行更為緊急任務的操作&#xff0c;執行完更為緊急任務之后再返回來執行原來未執行完的…

SRS流媒體源碼解析--service

本文主要解析一下SRS3.0 service部分源碼&#xff0c;主要和srs_service_st模塊。 srs_service_st 模塊包含了網絡服務的基礎實現&#xff0c;特別是與套接字&#xff08;sockets&#xff09;和網絡通信相關的功能。主要功能和特點包括&#xff1a; &#xff08;1&#xff0…

高鐵站客運樞紐IPTV電視系統-鹽城高鐵站西廣場IP電視系統應用淺析

高鐵站客運樞紐IPTV電視系統-鹽城高鐵站西廣場IP電視系統應用淺析 由北京海特偉業科技有限公司任洪卓于2024年7月9日發布 隨著科技的飛速發展&#xff0c;特別是“互聯網”戰略的深入推進&#xff0c;高鐵站客運樞紐的信息化建設成為提升服務質量、增強乘客體驗的重要手段。鹽…

代碼隨想錄算法訓練營:29/60

非科班學習算法day29 | LeetCode134:加油站 &#xff0c;Leetcode135:分發糖果 &#xff0c;Leetcode860:檸檬水找零 介紹 包含LC的兩道題目&#xff0c;還有相應概念的補充。 相關圖解和更多版本&#xff1a; 代碼隨想錄 (programmercarl.com)https://programmercarl.com/…

IT專業高考假期入門指南

IT領域預習指南&#xff1a;開啟未來科技之旅 一、確定興趣方向 IT領域廣闊&#xff0c;涵蓋軟件開發、網絡安全、數據分析、人工智能等多個方向。首先&#xff0c;明確自己的興趣所在&#xff0c;這將決定你后續學習的重點。比如&#xff0c;如果你對構建應用程序感興趣&…

【1.3】動態規劃-解碼方法

一、題目 一條包含字母A-Z的消息通過以下映射進行了編碼&#xff1a; A -> 1 B -> 2 ... Z -> 26 要解碼已編碼的消息&#xff0c;所有數字必須基于上述映射的方法&#xff0c;反向映射回字母&…