kapeter / taro-wemark Goto Github PK
View Code? Open in Web Editor NEW微信小程序markdown渲染库-Taro框架适配版本
License: MIT License
微信小程序markdown渲染库-Taro框架适配版本
License: MIT License
import Taro from '@tarojs/taro'
import React, {useEffect, useState} from 'react';
import {View, Text, Image, Video} from '@tarojs/components'
import "./taro-wemark.css"
import Remarkable from "./remarkable"
let parser = new Remarkable({
html: true
});
export default (props) => {
const [renderList, setRenderList] = useState();
useEffect(() => {
if (props.md) {
setRenderList(parse(props.md))
}
}, [props.md])
const parse = (md, options) => {
if (!options) options = {};
if (!options.name) options.name = 'wemark';
let tokens = parser.parse(md, {});
// markdwon渲染列表
let renderList = [];
// 图片高度数组
let imageHeight = {};
// 返回的数据
let ret = {
renderList: renderList,
imageHeight: imageHeight
};
let env = [];
// 记录当前list深度
let listLevel = 0;
// 记录第N级ol的顺序
let orderNum = [0, 0];
let tmp;
// 获取inline内容
const getInlineContent = function (inlineToken) {
let ret = [];
let env;
if (inlineToken.type === 'htmlblock') {
// 匹配video
// 兼容video[src]和video > source[src]
let videoRegExp = /<video.*?src\s*=\s*['"]*([^\s^'^"]+).*?(poster\s*=\s*['"]*([^\s^'^"]+).*?)?(?:\/\s*\>|<\/video\>)/g;
let match;
let html = inlineToken.content.replace(/\n/g, '');
while (match = videoRegExp.exec(html)) {
if (match[1]) {
let retParam = {
type: 'video',
src: match[1]
};
if (match[3]) {
retParam.poster = match[3];
}
ret.push(retParam);
}
}
} else {
inlineToken.children && inlineToken.children.forEach(function (token, index) {
if (['text', 'code'].indexOf(token.type) > -1) {
ret.push({
type: env || token.type,
content: token.content
});
env = '';
} else if (token.type === 'del_open') {
env = 'deleted';
} else if (token.type === 'strong_open') {
env = 'strong';
} else if (token.type === 'em_open') {
env = 'em';
} else if (token.type === 'image') {
ret.push({
type: token.type,
src: token.src
});
}
});
}
return ret;
};
const getBlockContent = function (blockToken, index) {
if (blockToken.type === 'htmlblock') {
return getInlineContent(blockToken);
} else if (blockToken.type === 'heading_open') {
return {
type: 'h' + blockToken.hLevel,
content: getInlineContent(tokens[index + 1])
};
} else if (blockToken.type === 'paragraph_open') {
let type = 'p';
let prefix = '';
if (env.length) {
prefix = env.join('_') + '_';
}
let content = getInlineContent(tokens[index + 1]);
// 处理ol前的数字
if (env[env.length - 1] === 'li' && env[env.length - 2] === 'ol') {
content.unshift({
type: 'text',
content: orderNum[listLevel - 1] + '. '
});
}
return {
type: prefix + 'p',
content: content
};
} else if (blockToken.type === 'fence') {
return {
type: 'code',
content: blockToken.content
};
} else if (blockToken.type === 'code') {
return {
type: 'code',
content: blockToken.content
};
} else if (blockToken.type === 'bullet_list_open') {
env.push('ul');
listLevel++;
} else if (blockToken.type === 'ordered_list_open') {
env.push('ol');
listLevel++;
} else if (blockToken.type === 'list_item_open') {
env.push('li');
if (env[env.length - 2] === 'ol') {
orderNum[listLevel - 1]++;
}
} else if (blockToken.type === 'list_item_close') {
env.pop();
} else if (blockToken.type === 'bullet_list_close') {
env.pop();
listLevel--;
} else if (blockToken.type === 'ordered_list_close') {
env.pop();
listLevel--;
orderNum[listLevel] = 0;
} else if (blockToken.type === 'blockquote_open') {
env.push('blockquote');
} else if (blockToken.type === 'blockquote_close') {
env.pop();
} else if (blockToken.type === 'tr_open') {
tmp = {
type: 'table_tr',
content: []
};
return tmp;
} else if (blockToken.type === 'th_open') {
tmp.content.push({
type: 'table_th',
content: getInlineContent(tokens[index + 1]).map(function (inline) {
return inline.content;
}).join('')
});
} else if (blockToken.type === 'td_open') {
tmp.content.push({
type: 'table_td',
content: getInlineContent(tokens[index + 1]).map(function (inline) {
return inline.content;
}).join('')
});
}
};
tokens.forEach(function (token, index) {
let blockContent = getBlockContent(token, index);
if (!blockContent) return;
if (!Array.isArray(blockContent)) {
blockContent = [blockContent];
}
blockContent.forEach(function (block) {
if (Array.isArray(block.content)) {
block.isArray = true;
} else {
block.isArray = false;
}
renderList.push(block);
});
});
let obj = {};
obj[options.name] = ret;
return renderList;
}
return (
{
renderList instanceof Array && renderList.length > 0 && renderList.map((renderBlock) => {
console.log('renderBlock', renderBlock);
return (<View className={'wemark_block_' + renderBlock.type} key={renderBlock.blockIndex}>
{
renderBlock.isArray &&
renderBlock.content.map((renderInline) =>
{
renderInline.type !== 'image' ?
<Text className={'wemark_inline_' + renderInline.type}>{renderInline.content}
:
}
)
}
{
!renderBlock.isArray && renderBlock.type === 'code' && {renderBlock.content}
}
{
!renderBlock.isArray && renderBlock.type === 'video' &&
}
)
}
)
}
)
}
这代码被我改成这样了,因为你那个Taro.Component不好使,而且不是函数式的话你上来它小程序第一次constructor里面不激活componentwillreceiveprops,然后我也不想动constructor,所以就改成函数式了,然后现在就面临着没样式的问题。
实在是太白辣!!!!!!!!!!!!!!!!!!!!!!!!!!!!
大佬咋整啊啊
有在支付宝小程序成功引入的案例吗?
编译不报错,但是无法显示md,配置啥的和demo是一样的。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.