WeChat applet Markdown rendering library
1. Preparation:
Download and copy the wemark directory to the root directory of the mini program
Reference style in WXSS: @import '../wemark/wemark.wxss'
Reference structure in WXML: <import src="../wemark/wemark.wxml"/>
Reference wemark in JS: var wemark = require('wemark')
2. JS part
First, you need to determine a data name for wemark rendering (wemark by default), and then specify it in the data of the page:
page({
data:{ // Determine a data name wemark:{}
}
});
Next, in the Page's life cycle function (such as onReady), call wemark.parse(md, this, options).
Specific parameter description:
md, required, Markdown string that needs to be rendered
this, required, Page instance
options, other parameters
imageWidth, the width of the image. If it contains an image, it is required, in px. The new version of the mini program images can adapt to the width and height
name, corresponding to the data name specified above, the default is wemark
3. WXML part
//The parameters in data are consistent with the data names determined above
<template is="wemark" data="{{...wemark}}"></template>
Example
//Introduce wemark var wemark = require('../wemark/wemark'); // Markdown text that needs to be rendered var md = '# hello, world\n\nI love you, wemark!'; Page({
data: { // Determine a data name wemark:{}
}, onReady: function(){ wemark.parse(md, this, { // The new version of the applet can adapt to the width and height // imageWidth: wx.getSystemInfoSync().windowWidth - 40, name: 'wemark' })
}
});
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
![Can C Code Be Decompiled, and How Accurate Are the Results?](https://img.php.cn/upload/article/001/246/273/173291731964932.jpg)
30 Nov 2024
Recovering Lost C Source Code: Exploring Decompilation OptionsLosing the source code to a C program can be frustrating, but it's not...
![How Can I Configure VS Code to Build C Programs with Multiple .cpp Files?](https://img.php.cn/upload/article/001/246/273/173478073495657.jpg)
21 Dec 2024
VS Code Builds C Programs with Multiple .cpp Source FilesWhen building a C program with multiple .cpp source files in Visual Studio Code, it's...
![Can I Decompile a Compiled Go Program?](https://img.php.cn/upload/article/001/246/273/173139912313791.jpg)
12 Nov 2024
Can I Decompile a Compiled Go Program?No, it is not possible to decompile a compiled Go program back into its original Go source code. Here's a...
![How to Build C Projects with Multiple .cpp Files in VS Code?](https://img.php.cn/upload/article/001/246/273/173585806045873.jpg)
03 Jan 2025
VS Code Unable to Build C Program with Multiple .cpp Source FilesOne of the common challenges in using VS Code for C development is building...
![First time here----smarty, first time here_PHP tutorial](/static/imghw/default1.png)
13 Jul 2016
New here - smarty, new here. First time here----smarty, first time here Smarty Day01-----Usage of smarty Function: Separate php html, program and art Usage: 1. Download the source code package 2. Directory structure libs source code file
![Can Go Programs Be Decompiled Back to Source Code?](https://img.php.cn/upload/article/001/246/273/173201491947318.jpg)
19 Nov 2024
Reverse Engineering Compiled Go ProgramsDecompiling a compiled program to its original source code is a challenging task. In the case of Go, the...
![Can anyone recommend an open source program with visual editing tools?_html/css_WEB-ITnose](/static/imghw/default1.png)
24 Jun 2016
Can anyone recommend an open source program with visual editing tools?
![Why does including a .cpp file instead of a .h file in C lead to errors?](https://img.php.cn/upload/article/001/246/273/173327767219987.jpg)
04 Dec 2024
Including Header Files versus Source CodeWhen working with multiple source files in a C program, it's crucial to understand the distinction...
![yii2 source code study notes (9), yii2 source code study notes_PHP tutorial](/static/imghw/default1.png)
12 Jul 2016
yii2 source code study notes (9), yii2 source code study notes. yii2 source code study notes (9), yii2 source code study notes Application is the base class of all application classes, let’s take a look at its source code. yii2baseApplication.php. 1 ? php 2 /*
![See all articles](/static/imghw/down_right.png)
![](/static/imghw/taglogo.png)
Hot Tools
![WeChat mini program demo: imitation mall](https://img.php.cn/upload/webcode/000/000/000/587dbb2750c82657.png)
WeChat mini program demo: imitation mall
WeChat mini program demo: imitating a mall, easy to get started, and has a good introduction to some basic functions of the mall
![Takeaway: Implement anchor-like functionality](https://img.php.cn/upload/webcode/000/000/000/587db82bf0392490.png)
Takeaway: Implement anchor-like functionality
It is the similar anchor function that everyone needs. In addition, it also implements the typical ordering functions of some takeout apps. It is recommended to study and study;
![WeChat mini program demo: Lezhu](https://img.php.cn/upload/webcode/000/000/000/587db8c2f3a51421.png)
WeChat mini program demo: Lezhu
WeChat mini program demo: Lezhu: similar to location-based; helpful application, somewhat similar to the spirit of Zhang Xiaolong’s mini program.
![WeChat mini program game demo selects different color blocks](https://img.php.cn/upload/webcode/000/000/000/587db4b7c7309646.png)
WeChat mini program game demo selects different color blocks
WeChat mini program game demo selects different color blocks
![WeChat applet demo: carousel image transformation](https://img.php.cn/upload/webcode/000/000/000/587db87c32a47793.png)
WeChat applet demo: carousel image transformation
Carousel chart style change, a simple carousel chart implemented with a small program, easy to write
![](/static/imghw/taglogo.png)