wemark
1.0.0
The mini program has native support for HTML rendering and can basically replace wemark. It is recommended to use it. This library has been in disrepair for a long time and is currently not under maintenance. Please use it with caution.
Used to render Markdown text in mini programs.
Before the birth of mini programs, Markdown rendering generally required parsing into HTML, and then rendering the parsed HTML. However, mini programs do not provide HTML rendering functions. Therefore, before the birth of wemark, almost all Markdown rendering libraries could not work properly under mini programs.
wemark can render Markdown content under a small program and supports most Markdown features including pictures and tables.
rich-textwemark directory to the root directory of the mini programwemark component in the page's configuration file {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>The detailed code can be found in the
demodirectory, which is a complete small program "code snippet" project. You can runnpm run copyin the wemark root directory first, and then add it to the "code snippet" of the WeChat developer tools for experience.
Parameter description:
md , required, Markdown string that needs to be rendered;link , whether to parse the link. If parsed, it will be displayed using the mini program navigator component, which can jump within the mini program. The default is false ;highlight , whether to highlight the code, the default is false ;type , rendering method, wemark will use wemark 's data structure and template for rendering, rich-text will use the rich-text component built into the mini program for rendering (link jumps and videos are not supported).Note: Code highlighting will increase the number of tags and the amount of parsed data, which may cause rendering performance problems. Please use it as appropriate based on actual needs.
Mpvue supports the introduction of WeChat custom components. You can add configuration in the .js file of the page, reference wemark , and then use wemark directly in template part of the .vue file:
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >Note: In order to enable mpvue to package
wemarkpackage into thedistdirectory when packaging, it is recommended to placewemarkin thestaticdirectory of the source code.
The mpvue directory of this project contains a complete mpvue applet demonstration project. You can run npm run copy in the wemark root directory, and then open and use it in the WeChat developer tools.
Make the following modifications in the existing taro project:
wemark into the src directory, that is, src/wemark directorywemark directory to be copied during compilation, modify config/index.js , and add wemark to the copy setting item. The reference is as follows: copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js when compiling, and continue to modify config/index.js . The reference is as follows: weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}wemark in the page, such as 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 projects only) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} The taro directory of this project contains a complete taro applet demonstration project. You can run npm run copy in the wemark root directory, and then open and use it in the WeChat developer tools.
Special thanks to @Songkeys for following up on the use of taro throughout the process. See #36 for details.
npm install
npm test MIT
If you also use wemark, please submit a PR to add your own mini program to the list.
rich-text rendering using mini program rich text componentsvideo[poster] attribute to add video cover image #15 by @kilik52widthFix mode and no longer dynamically calculates height #11 #12~~deleted~~ )
