Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

不好用，但是如果我把代码更新了，把block删了换成View，又没样式，大佬，要不您说说咋解决样式的事得了 #3

Open
msnmask opened this issue Jul 20, 2023 · 10 comments
Open

不好用，但是如果我把代码更新了，把block删了换成View，又没样式，大佬，要不您说说咋解决样式的事得了 #3

msnmask opened this issue Jul 20, 2023 · 10 comments

Comments

@msnmask
Copy link

msnmask commented Jul 20, 2023

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，所以就改成函数式了，然后现在就面临着没样式的问题。
image
实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！
大佬咋整啊啊
@free-booter
Copy link

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

@msnmask
Copy link
Author

msnmask commented May 29, 2024

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。

具体代码如下：
在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：

`

[class^="wemark--wemark"] {
width: auto;
max-width: 100%;
box-sizing: border-box;
background: none !important;
overflow-x: scroll;
margin-top: 0 !important;
margin-bottom: 0 !important;
font-size: 28px !important;
border: none !important;
}

.wemark--wemark_block_code, .wemark--wemark_inline_code {
background: #121C40 !important;
}
`

同时，在wemark.wxss中也进行相应调整：

.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; }
总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。
取决于那个shadow root

@free-booter
Copy link

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。

具体代码如下： 在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：

`

[class^="wemark--wemark"] { width: auto; max-width: 100%; box-sizing: border-box; background: none !important; overflow-x: scroll; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 28px !important; border: none !important; }

.wemark--wemark_block_code, .wemark--wemark_inline_code { background: #121C40 !important; } `

同时，在wemark.wxss中也进行相应调整：

.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; } 总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。 取决于那个shadow root

用的taro3版本吗

@msnmask
Copy link
Author

msnmask commented May 29, 2024

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。
具体代码如下： 在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：
[class^="wemark--wemark"] { width: auto; max-width: 100%; box-sizing: border-box; background: none !important; overflow-x: scroll; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 28px !important; border: none !important; } .wemark--wemark_block_code, .wemark--wemark_inline_code { background: #121C40 !important; }
同时，在wemark.wxss中也进行相应调整：
.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; } 总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。 取决于那个shadow root

用的taro3版本吗

确实是taro3捏。而且这个仅适用于markdown格式的展示，现在对于富文本的展示已经有更好的了，这个的效果不好，微信最近更新了新的富文本格式，它展示不出来。

@free-booter
Copy link

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。
具体代码如下： 在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：
[class^="wemark--wemark"] { width: auto; max-width: 100%; box-sizing: border-box; background: none !important; overflow-x: scroll; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 28px !important; border: none !important; } .wemark--wemark_block_code, .wemark--wemark_inline_code { background: #121C40 !important; }
同时，在wemark.wxss中也进行相应调整：
.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; } 总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。 取决于那个shadow root

用的taro3版本吗

确实是taro3捏。而且这个仅适用于markdown格式的展示，现在对于富文本的展示已经有更好的了，这个的效果不好，微信最近更新了新的富文本格式，它展示不出来。

大佬，可以加个vx吗

@msnmask
Copy link
Author

msnmask commented May 29, 2024

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。
具体代码如下： 在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：
[class^="wemark--wemark"] { width: auto; max-width: 100%; box-sizing: border-box; background: none !important; overflow-x: scroll; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 28px !important; border: none !important; } .wemark--wemark_block_code, .wemark--wemark_inline_code { background: #121C40 !important; }
同时，在wemark.wxss中也进行相应调整：
.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; } 总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。 取决于那个shadow root

用的taro3版本吗

确实是taro3捏。而且这个仅适用于markdown格式的展示，现在对于富文本的展示已经有更好的了，这个的效果不好，微信最近更新了新的富文本格式，它展示不出来。

大佬，可以加个vx吗

你说你的vx吧

@free-booter
Copy link

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。
具体代码如下： 在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：
[class^="wemark--wemark"] { width: auto; max-width: 100%; box-sizing: border-box; background: none !important; overflow-x: scroll; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 28px !important; border: none !important; } .wemark--wemark_block_code, .wemark--wemark_inline_code { background: #121C40 !important; }
同时，在wemark.wxss中也进行相应调整：
.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; } 总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。 取决于那个shadow root

用的taro3版本吗

确实是taro3捏。而且这个仅适用于markdown格式的展示，现在对于富文本的展示已经有更好的了，这个的效果不好，微信最近更新了新的富文本格式，它展示不出来。

大佬，可以加个vx吗

你说你的vx吧

China_lllllllll

@msnmask
Copy link
Author

msnmask commented May 29, 2024

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。
具体代码如下： 在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：
[class^="wemark--wemark"] { width: auto; max-width: 100%; box-sizing: border-box; background: none !important; overflow-x: scroll; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 28px !important; border: none !important; } .wemark--wemark_block_code, .wemark--wemark_inline_code { background: #121C40 !important; }
同时，在wemark.wxss中也进行相应调整：
.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; } 总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。 取决于那个shadow root

用的taro3版本吗

确实是taro3捏。而且这个仅适用于markdown格式的展示，现在对于富文本的展示已经有更好的了，这个的效果不好，微信最近更新了新的富文本格式，它展示不出来。

大佬，可以加个vx吗

你说你的vx吧

China_lllllllll

+了

@EssionLee
Copy link

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。
具体代码如下： 在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：
[class^="wemark--wemark"] { width: auto; max-width: 100%; box-sizing: border-box; background: none !important; overflow-x: scroll; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 28px !important; border: none !important; } .wemark--wemark_block_code, .wemark--wemark_inline_code { background: #121C40 !important; }
同时，在wemark.wxss中也进行相应调整：
.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; } 总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。 取决于那个shadow root

用的taro3版本吗

确实是taro3捏。而且这个仅适用于markdown格式的展示，现在对于富文本的展示已经有更好的了，这个的效果不好，微信最近更新了新的富文本格式，它展示不出来。

大佬，可以加个vx吗

你说你的vx吧

China_lllllllll

+了

大佬！细嗦更合适的库～最近也在搞taro3的markdown

@msnmask
Copy link
Author

msnmask commented May 31, 2024

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，所以就改成函数式了，然后现在就面临着没样式的问题。 image 实在是太白辣！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬咋整啊啊

你有找到好用的吗

说实话，我有点忘记我当时提的是什么了，但是如果是wemark内部的样式的问题，唯一的解决办法就是给wemark的内部封装组件重写样式。
具体代码如下： 在你使用了wemark的对应页面上，在scss样式文件中写入如下代码：
[class^="wemark--wemark"] { width: auto; max-width: 100%; box-sizing: border-box; background: none !important; overflow-x: scroll; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 28px !important; border: none !important; } .wemark--wemark_block_code, .wemark--wemark_inline_code { background: #121C40 !important; }
同时，在wemark.wxss中也进行相应调整：
.wemark_inline_link_normal{ display: inline; color: #468BF7; word-wrap:break-word; } .wemark_inline_link_user{ display: inline; color: #0BD3FF; word-wrap:break-word; } .wemark_inline_link_assistant{ display: inline; color: #468BF7; word-wrap:break-word; } 总而言之就是，所有这些里面的样式都是可以调整的，可以在外面调整，也可以在里面调整。 取决于那个shadow root

用的taro3版本吗

确实是taro3捏。而且这个仅适用于markdown格式的展示，现在对于富文本的展示已经有更好的了，这个的效果不好，微信最近更新了新的富文本格式，它展示不出来。

大佬，可以加个vx吗

你说你的vx吧

China_lllllllll

+了

大佬！细嗦更合适的库～最近也在搞taro3的markdown

这个就好用，如果需要更多库你就百度吧，我这个项目里面没用上markdown，所以我也没有新库。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@msnmask @free-booter @EssionLee