uniapp 渲染Markdown

来源:https://www.cnblogs.com/oumannrinn/archive/2023/05/25/17432888.html
-Advertisement-
Play Games

近日在編寫一個小程式,將日記功能移植到小程式中,雖然在手機端寫日記一般用不到Markdown,但是仍想在小程式中查看在電腦端寫的Markdown格式的內容,如代碼塊等。 經過查詢,找到一個被廣泛使用的解決方案是towxml 現記錄如下: > 首先將代碼克隆下來 ```js git clone htt ...


近日在編寫一個小程式,將日記功能移植到小程式中,雖然在手機端寫日記一般用不到Markdown,但是仍想在小程式中查看在電腦端寫的Markdown格式的內容,如代碼塊等。

經過查詢,找到一個被廣泛使用的解決方案是towxml

現記錄如下:

首先將代碼克隆下來

  git clone https://github.com/sbfkcel/towxml.git

打開根目錄的config.js進行自定義的配置

配置完後安裝依賴

npm i

打包

npm run build

將打包後的dist文件夾複製到uniapp項目的static目錄,更名為towxml

在需要使用的頁面中使用,主要包括引入towxml組件: import towxml from '../../static/towxml/towxml',引入轉換方法:require("@/static/towxml/index.js") 以及最後的使用:

<template>
	<view>
		<view v-if="o" class="reader-title">
			<view class="date">
				{{o.date}}
			</view>
			<view class="city">
				{{o.city}}
			</view>
			<view class="weather">
				{{o.weather}}
			</view>
		</view>
		
		<towxml :nodes="content"></towxml>
		<!-- <rich-text :nodes="content"></rich-text> -->
		<!-- {{content}} -->
	</view>
</template>

<script>
import { requestForGetDiaryDetail } from '../../utils/allRequests';
import { decrypt } from '../../utils/crypto';
import towxml from '../../static/towxml/towxml'
import marked from 'marked'


	export default {
		components:{
			towxml:towxml
		},
		data() {
			return {
				content:'',
				o:null,
				towxmlFun:require("@/static/towxml/index.js")
			};
		},
	onLoad(options) {
		requestForGetDiaryDetail(options.id,(a)=>{
			let c = a.data.result.res[0]
			this.o =c
			let t = decrypt(c.normal)
			// this.content = this.marked(t)
			console.log(this.marked)
			// console.log(this.content)
			this.content = this.towxmlFun(t,'markdown',{
				// base: 'https://www.xxx.com',
				theme:"light"
			})
			// console.log(t,this.content)
			
		})
	}
	}
</script>

<style lang="scss">
.reader-title{
	display: flex;
	justify-content: space-evenly;
	text-align: center;
}
</style>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在引入ClickHouse過程中經歷各種困難,耗費大量精力去探索並一一解決,在這裡記錄一下希望能夠給沒有接觸過ClickHouse的同學提供一些方向上的指引避免多走彎路,如果文中有錯誤也希望多包含給出指點,歡迎大家一起討論ClickHouse相關的話題。本文偏長但全是乾貨,請預留40~60分鐘進行閱... ...
  • 雲原生資料庫在使用存算分離技術後,可以在完全相容MYSQL協議和語法的情況下,極大提升單實例所能承載的數據規模與吞吐能力上限。但除了對客戶端相容外,對整個數據生態(地域容災,數據分析,備份恢復)的適配同樣需要大量的設計優化工作。本次分享GaiaDB在跨地域/異構數據同步場景下,吞吐/實時性/一致性方... ...
  • 鑒於《網路新詞網路熱詞大全ACCESS資料庫》幾百條的記錄數太少,於是找了找網路上的一些流行熱詞網站,挑了個數據量大的採集了下來,經過整理(去除重覆、去除詞長超過10字)共得到1萬4千多條記錄。 熱詞:做完核酸可以領豆油解釋:疫情期間民眾耳朵不好使現狀。其實是“做完核酸不要逗留”。源自海南某地一排隊 ...
  • 《花木百科花木大全[圖]ACCESS資料庫》資料庫是採集全X花木網的圖文數據,資料很詳細,欄位包含種名、學名、別名、花期、生態性狀、觀賞性分類、科、屬、分佈地區、形態特征、生長習性、主要病蟲害、園林用途、主要功能、園林品種推薦、其他等。 因為網站源花木的圖片有限,所以有圖片的花木只有1千多條;並且需 ...
  • 其實互聯網上關於謎語和燈謎的資料仍然是挺多的,但是要想數據量以萬來計算並且是接近10萬的量來看的話,就只能是《近8萬條謎語燈謎大全ACCESS資料庫》了。而且《近8萬條謎語燈謎大全ACCESS資料庫》的數據表欄位中也包含分類欄位,可以根據分類欄位有針對性的給出謎語。 分類情況包含:字謎、成語、人名、 ...
  • 雖然已經有《7千多兒童故事網ACCESS\EXCEL資料庫》這種記錄數的童話故事類數據,但是遇到了好採集的就總想採集下來,後續有時間或有需求可以再做合併等操作。 分類情況統計為: 兒童故事:兒童小故事(1895)、睡前故事(1229)、益智故事(233)、哲理故事(177)。民間故事:世界上下五千年 ...
  • 原本我以為《3萬5千英語句子英語例句大全ACCESS資料庫》例句已經夠多了,沒想到今天遇到一個10萬條英語單詞例句的數據,非常適合與單詞詞典進行關聯學習,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的 ...
  • CSS中,*的作用是通配表示“全部”。遺憾的是,並沒有一種通配元素名的方法。 例如,我有好幾個東西class都標記為了my-element-序號,就像這樣: ```html ... ``` 我現在希望讓所有這些class的東西都應用同一個css規則。可惜,css並不支持這麼一種寫法: ```css ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...