小程式已原生支援HTML渲染,基本上可取代wemark,建議使用。本庫年久失修,目前處於不維護狀態,請謹慎使用。
用於在小程式中渲染Markdown文字。
在小程式誕生之前,Markdown的渲染一般需要解析成HTML,然後渲染解析後的HTML。然而小程式並沒有提供HTML渲染的功能,因此在wemark誕生之前,幾乎所有的Markdown渲染庫全部無法在小程式下正常運作。
wemark可以實現在小程式下渲染Markdown內容,支援圖片、表格在內的大部分Markdown特性。
rich-text
進行渲染wemark
目錄到小程式根目錄wemark
元件{
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}
<wemark md="{{md}}" link highlight type="wemark"></wemark>
詳細程式碼可見
demo
目錄,該目錄是一個完整的小程式「程式碼片段」項目,可在wemark根目錄先運行npm run copy
,然後再加入微信開發者工具的「程式碼片段」中進行體驗。
參數說明:
md
,必填,需要渲染的Markdown字串;link
,是否解析鏈接,如果解析,會使用小程式navigator
組件展現,可在小程式內跳轉,預設為false
;highlight
,是否對程式碼進行高亮處理,預設為false
;type
,渲染方式, wemark
會使用wemark
的資料結構和範本來渲染, rich-text
會使用小程式內建的rich-text
元件渲染(不支援連結跳轉、影片)。注意:程式碼高亮會使標籤數量和解析後的資料量增大,不排除產生渲染效能問題,請依實際需求酌情使用。
mpvue支援引入微信自訂元件,可在頁面的.js
檔案中新增配置,引用wemark
,然後在.vue
檔案的template
部分直接使用wemark
:
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
}
< wemark :md =" md " link highlight type =" wemark " > </ wemark >
註:為了讓mpvue打包時能把
wemark
包一併打包到dist
目錄,建議將wemark
放置在源碼static
目錄下。
本專案mpvue
目錄中包含完整的mpvue小程式示範項目,可在wemark
根目錄執行npm run copy
,然後在微信開發者工具中開啟使用。
在已有的taro專案中進行如下修改:
wemark
放入src
目錄,即src/wemark
目錄wemark
目錄,修改config/index.js
,在copy
設定項目中增加wemark
,參考如下: copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,
remarkable.js
,繼續修改config/index.js
,參考如下: weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}
wemark
,例如src/pages/index/index.js
: config = {
navigationBarTitleText : '首页' ,
usingComponents : {
wemark : '../../wemark/wemark'
}
}
state = {
md : '# headingnnText'
}
//...
render ( ) {
return (
< View className = 'index' >
< wemark md = { this . state . md } link highlight type = 'wemark' />
</ View >
)
}
global.d.ts
中加入以下內容(僅typescript 項目) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
}
本專案taro
目錄中包含完整的taro小程式示範項目,可在wemark
根目錄中執行npm run copy
,然後在微信開發者工具中開啟使用。
特別感謝@Songkeys 全程跟進taro使用事宜,詳情請見#36 。
npm install
npm test
MIT
如果你也使用了wemark,歡迎提PR 將自己的小程式加入列表
rich-text
渲染video[poster]
屬性新增影片封面圖#15 by @kilik52widthFix
模式,不再動態運算高度#11 #12~~deleted~~
)