sbfkcel / towxml Goto Github PK

View Code? Open in Web Editor NEW

2.4K 37.0 309.0 1.79 MB

微信小程序HTML、Markdown渲染库

Home Page: https://github.com/sbfkcel/towxml/wiki

JavaScript 100.00%

towxml's People

Contributors

Stargazers

Watchers

Forkers

zbw7415604 872409 zanjs kookey alienc tammy111 tongxin3267 wangkaihua xiearthur dut3062796s yangshare csensix psw386179555 zpshowhan dofy bbbond imlimiao wangzhaodan quanke vivicsa zoewang jackfish lucoo01 best-repos timujiang amenwu structurestudylab y80x86ol itxcx alawnchen iamxjb yangboz gmeet laodaye lee66 ruiaylin taitanxiami zhang177177 zb201307 yunlong-feng picknight blesslp colinkyo jinligen 99fu canghaimangmang fankaifun4 liyongqing2008 zhuqling jaxonyang python6460 henryhu712 wjw0315 yulongge changchang700 liyangshuai oubingbing tony-stark-plus lisong15 demoxun huangyangyang1 hunshikan mceto glj233 feier09 crowscc zyj1609wz vqishi hawklithm aprilweet shenhuanjie jasonchougit summerhearts 91demo slp-slp seal-wxapp lastlastweek davidalphafox wangruifangweb gaogaoyanjiu yangmain xiaoqiang366 mvpleung 1913045515 wxshenzhenpeng taosin catbea vcan libinliu2013 tingzhong666 cherrison erickwang firetable youngbeom-shin shaojiaming lonemage jaslin ailurophobe49 baixue1 hi-jing

towxml's Issues

html渲染的时候支持输入组建么，比如input， textarea等

为什么文章里的图片转换之后点击无法调出小程序自带的图片浏览器呢

求助！想在小程序里面做跳转

想在小程序里面做内部跳转，在后台编辑文章，想在关键字上加上小程序内的链接，在小程序里面实现跳转。

例如在后台：
<a href="/pages/index/index">关键字</a>

小程序里面没有把这个 href 链接转换成 navigator 里的 url的链接。

我想问下，这个如果改插件需要怎么改？

使用微信工具调试图片可以正常显示，但真机调试，或者预览不显示：
微信工具显示的代码：
Object]"id=""mode="widthFix"src="XXX/10.gif"style="height: 361px;">
是有style 属性的，但真机调试，或者预览情况下，发现代码是这样的：
Object]"id=""mode="widthFix"src="XXX//10.gif">
没有style属性，我怀疑的是因为没有高度才不显示的，我不确定是不是插件的BUG还是微信的BUG

MD转为html中有<br />标签时，会有闭包判断错误。

MD转为html中有
标签时，比如MD的换行符，最后的渲染会变成。这会在显示上造成一些问题，请问怎么修正？

友友，兼容wepy吗？

iframe 标签解析不了吗？

下面这一段代码，直接放在MD文件中是可以播放的视频，在MD工具中可以播放，但是到了小程序里面解析不出来耶。。

请问下videa都支持什么视频格式，或者链接，另外如果解决层级覆盖问题，video一直在最上面，谢谢

请问下video都支持什么视频格式，或者链接，另外如果解决层级覆盖问题，video一直在最上面，谢谢

html代码出现<或者其转义符号，会解析错误

appservice:20 thirdScriptError
undefined;at pages/article/article onLoad function;at api request success callback function
undefined
具体原因是<会解析成html标签

代码块显示到同一行了,

markdown 对应如下：

//代码待续
class Solution {
    public int[] twoSum(int[] nums, int target) {
        
    }
}

利用 towxml 转换对应的如下代码，未能实现换行。代码块挤到同一行了。
PS: 感谢作者提提供的插件 (笑脸.png)

<div class="output_wrapper" id="output_wrapper_id"
	style="font-size: 16px; color: rgb(62, 62, 62); line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;">
	<pre
		style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px;">
		<code class="hljs cs"
			style="border-radius: 4px; margin: 0px 2px; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; overflow-x: auto; background: rgb(244, 236, 236); color: rgb(88, 80, 80); padding: 0.5em; display: block !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important;">
			<span class="linenum hljs-number"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">1</span><span
				class="hljs-comment"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(101, 93, 93); word-wrap: inherit !important; word-break: inherit !important;">//代码待续</span><br><span
				class="linenum hljs-number"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">2</span><span
				class="hljs-keyword"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">class</span>&nbsp;<span
				class="hljs-title"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(114, 114, 202); word-wrap: inherit !important; word-break: inherit !important;">Solution</span>&nbsp;{<br><span
				class="linenum hljs-number"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">3</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
				class="hljs-function"
				style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span
				class="hljs-keyword"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">public</span>&nbsp;<span
				class="hljs-keyword"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">int</span>[]&nbsp;<span
				class="hljs-title"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(114, 114, 202); word-wrap: inherit !important; word-break: inherit !important;">twoSum</span>(<span
				class="hljs-params"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); word-wrap: inherit !important; word-break: inherit !important;"><span
					class="hljs-keyword"
					style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">int</span>[]&nbsp;nums,&nbsp;<span
					class="hljs-keyword"
					style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">int</span>&nbsp;target</span>)&nbsp;</span>{<br><span
				class="linenum hljs-number"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">4</span><br><span
				class="linenum hljs-number"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">5</span>&nbsp;&nbsp;&nbsp;&nbsp;}<br><span
				class="linenum hljs-number"
				style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">6</span>}<br>
		</code>
	</pre>
</div>

不支持[TOC]目录标记

不能解析[TOC]目录标记，希望后续能加上，谢谢！

towxml解析出来的内容不完全

这是Console上的警告

./towxml/renderTemplate.wxml
./towxml/renderTemplate.wxml:-1:-1:-1: Template `
./towxml/renderTemplate.wxml:m9` is being called recursively, will be stop.

Towxml渲染输出的内容不完整。
这是什么问题呢？

wepy demo

wepy框架应用demo

使用方法：

解压
安装依赖cnpm install
将解压目录添加到小程度开发工具中
wepy build --watch

wepy demo.zip

markdown标题如果超过手机屏宽，出现不友好的显示，如下图。

3.1 Github账号注册及HTTPS/SSH连接方式介绍Github账号注册及HTTPS/SSH连接方式介绍Github账号注册及HTTPS/SSH连接方式介绍Github账号注册及HTTPS/SSH连接方式介绍Github账号注册及HTTPS/SSH连接方式介绍

md中的换行“ ”解析有问题

使用md中标准的换行" "会有问题。如下：
第1行
第2行
第3行

解析出来为：

<viewclass="h2w__p"id="">
第1行<viewclass="h2w__br"id=""></view>
</view>

第2行<viewclass="h2w__br"id=""></view>

第3行<viewclass="h2w__br"id=""></view>

……

这样就会在第1行下面空一大段(h2w__p的样式)，请问该如何解决？

在wepy框架的demo中build出现错误。

高亮后的代码没有换行，都被压缩在同一行显示了。

高亮后的代码没有换行，都被压缩在同一行显示了。请问这个是什么问题？

这个是md的数据源：

代码块解析错误

如果我的代码块是这样的，会出现解析错误：

<?xml version="1.0"?>
<!DOCTYPE mycat:schema SYSTEM "schema.dtd">
<mycat:schema xmlns:mycat="http://io.mycat/">
	<schema name="doubaSchema" checkSQLschema="false" sqlMaxLimit="100" dataNode="dn1"></schema>
	
	<dataNode name="dn1" dataHost="dh1" database="douba" />
	
	<dataHost name="dh1" maxCon="500" minCon="20" balance="1" writeType="0" dbType="mysql" dbDriver="native" switchType="2" slaveThreshold="100">
		<heartbeat>show slave status</heartbeat>
		
		<writeHost host="hostM41" url="192.168.2.41:3306" user="root" password="123456" >
			<readHost host="hostS42" url="192.168.2.42:3306" user="root" password="123456" />
			<readHost host="hostS43" url="192.168.2.43:3306" user="root" password="123456" />
		</writeHost>
	</dataHost>
</mycat:schema>

另外好像代码块中如果出现如下的标签会被自动过滤掉？

<schema>标签内容</schema>

这样子在解析后直接过滤掉了

md代码不能全部加载

如图显示只加载了一半，剩下的就不显示了

你好,突然发现全角空格无法正常解析,谢谢

请问如何配合mpvue使用

如题，谢谢

另外这个支持文件链接吗?比如word,excel,ppt之类的

app.towxml.html2wxml is not a function?

图片预览功能可以支持的吗？

点击图片，可以预览，这样用户可以看缩放图的具体内容，或者可以长按识别二维码或者小程序码，很实用。

解析background-color样式问题

接口返回的数据：

<p><span style="background-color: rgb(255, 0, 0);">合理的膳食构成，科学而营养的搭配，是维持人体健康的重要方面。</span></p>

插件转换后：

<text class="h2w__span"id=""style="background-color:,rgb(255,,0,,0);">合理的膳食构成，科学而营养的搭配，是维持人体健康的重要方面。</text>

发现background-color后面多了几个小逗号，color也有这样的问题，导致背景颜色和字体颜色不显示。

markdown 的代码块，在真机上横向滚动失效

模拟器上有滚动

html渲染的时候怎么支持代码高亮呢

比如我是从md转成的html文件，html渲染的时候还支持代码高亮吗

支持显示 katex 公式吗？

希望可以支持显示 katex 公式

白屏

加载md文件显示白屏，如果打开调试模式就好了，关掉就是白屏

请问是否支持富文本转换呢

我简单试了下好像不行。谢谢

代码里可以使用相对目录吗？

不想直接放根目录，我还用了别的库，都放根目录太乱了，我把towxml放别的目录，一堆引用错误。。。。

wepy

wepy中怎么使用呢？

希望加入HTML字符实体的支持

如下面这段HTML，无法解析为空格，可参考https://github.com/icindy/wxParse/blob/master/wxParse/wxDiscode.js

<p>东野圭吾日本作家。<\/p>\n<p> <\/p>\n<p>1985年，《放学后》获第31届江户川乱步奖，开始专职写作；<\/p>\n<p> <\/p>\n<p>1999年，《秘密》获第52届日本推理作家协会奖；<\/p>\n<p> <\/p>\n<p>2005年出版的《嫌疑人X的献身》同时获得第134届直木奖、第6届本格推理小说大奖，并领衔三大推理小说排行榜年度排行；<\/p>\n<p> <\/p>\n<p>2008年，《流星之绊》获第43届新风奖；<\/p>\n<p> <\/p>\n<p>2009年出版的《新参者》领衔两大推理小说排行榜年度排名；<\/p>\n<p> <\/p>\n<p>2012年，《解忧杂货店》获第7届**公论文艺奖；<\/p>\n<p> <\/p>\n<p>2013年，《梦幻花》获第26届柴田炼三郎奖；<\/p>\n<p> <\/p>\n<p>2014年，《祈祷落幕时》获第48届吉川英治文学奖。<\/p>\n

Double quotation marks cannot be supported

不支持markdown表格解析

作者您好，markdown表格解析是否还不支持？

采用markdown的引用标记，在里面插入图片时，图片呈现原图效果问题

采用markdown的引用标记>，在里面插入图片时，图片呈现原图效果，影响视觉效果，可以建议将在引用标记中插入图片可以让图片的高度与文字行高保持差不多，且不能自动换行。感谢^_^。

而实际在github上的效果如下：

dsflsdjfsjlfjsljflkdjlfjldsjflsjf;sdfkj;lds

你好，请问一下这个支待办事宜TODO列表功能和字号设置吗，谢谢

事件绑定失败

Cannot set property 'event_bind_tap' of undefined;at App loading function;at api request success callback function
TypeError: Cannot set property 'event_bind_tap' of undefined

app.request('/archives/detail', { id: ids }, function (data, ret) {
var content = data.archivesInfo.content;
var description = data.archivesInfo.description;
let articledata = app.towxml.toJson(content, 'html', _ts);
articledata.theme = 'light';
this['event_bind_tap'] = (event) => {
console.log(event);
console.log(event.target.dataset._el);
let element = event.target.dataset._el;
if (element.tag == 'image') {
wx.previewImage({
current: element.attr.src,
urls: [element.attr.src]
})
}
};

请问这个支持分隔线吗？我试了不行，谢谢

当HTML标签不规范时，会解释失败

如题，当HTML标签不规范时，会解释失败（这里标签"< "和" >" 存在空格）：

var tab1_dataSource = '

< section style = "max-width: 100%;" >

一年一度的苗族盛会、雷山【苗年】等你来！< /p>< p style = "max-width: 100%; min-height: 1em;" > 西江千户苗寨、镇远古镇、雷山苗年节，精彩不断 & nbsp; 好戏连连，深度体验黔东南原生态的浓浓民族节日风情，和苗族一起欢度苗年！！！< /p>< /section>< /section>< /section>< p style = "max-width: 100%; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system-font, system-ui, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; letter-spacing: 0.544px; text-align: justify;" ><img data - type="jpeg" class="" data - ratio="0.5351851851851852" data - w="1080" _width = "677px" src = "https://mmbiz.qpic.cn/mmbiz_jpg/neicQU2gdk6AdjwThexH8ucG2Hd4xfRl48ZM0Z3NfG1lpOOHic7gBgibELbKsnuB85ewZUbWfO54N9dD1tiacOEKcg/640?wx_fmt=jpeg&wx_co=1" data - fail="0" style = "width: 100%; visibility: visible !important;" />

< section style = "padding: 20px 8px 15px; max-width: 100%; color: rgb(51, 51, 51); font-family: -apple-system-font, system-ui, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 1em; letter-spacing: 0.544px; text-align: justify; white-space: normal; text-decoration: inherit; line-height: 25.6px; width: 556px; border: 0px none;" class="_135editor" >

随心出发< /p>< /section>< /section>< /section>< section class="" style = "max-width: 100%;" >

< section style = "padding-top: 1em; padding-bottom: 1em; max-width: 100%;" >

< section style = "max-width: 100%; border-bottom: 4px solid #f3a2a2;" >

活动亮点< /section>< /section>< section style = "max-width: 100%; width: 4px; height: 32px; background: #f3a2a2; border-top-right-radius: 2px; border-bottom-right-radius: 2px;" >

< /section>< /section>< /section>< /section>< section style = "max-width: 100%; width: 1.2em;" ><img data - width="100%" data - type="other" class="" data - ratio="0.8297872340425532" data - w="141" _width = "100%" src = "https://mmbiz.qpic.cn/mmbiz/Ljib4So7yuWhdYlRTur1gpunIhiaDqiaMGicXfviaiauhX1QhcvtEhSlTqc44sewQTaQ8cyhZp5KYo7XkyPfvg1iaePSQ/640?wx_fmt=other&wx_co=1" data - fail="0" style = "display: block; width: 100%; visibility: visible !important;" />

< /section>< /section>< section class="" style = "max-width: 100%;" >

火热过苗年< /p>< /section>< /section>< section style = "margin-top: 4px; margin-bottom: 10px; max-width: 100%; border-top: 1px dashed #86c4ba;" > 苗年，类似汉族的春节，是苗家人的大年，为苗族人民一年一度最隆重的传统节日。苗族全民鼓声擂动、芦笙响彻天穹，大家一起载歌载舞 < /span>< /section>< /section>< section style = "max-width: 100%;" > < /section>< /section>< /section>< p style = "max-width: 100%; min-height: 1em; text-align: left;" ><img data - type="jpeg" class="" data - ratio="0.4703125" data - w="640" _width = "640px" src = "https://mmbiz.qpic.cn/mmbiz_jpg/q1nhBicXtWBJ3hahWVDTR7FNUgiaKQF0N14VLZMReqy1Q1r5q5tPkuAic5tj4c2WOSicicYrV6C7IskkIHpibklTcDibQ/640?wx_fmt=jpeg&wx_co=1" data - fail="0" style = "width: 100%; visibility: visible !important;" />

< p style = "max-width: 100%; min-height: 1em; text-align: left;" > 雷山苗族至今仍保留“以十月为岁首”的纪年法。每年的农历十月，雷山苗寨一派欢腾，开展极富特色的辞旧迎新活动。苗年集苗族祭祀、感恩、庆祝、玩乐为一体, 雷山苗族中最隆重、最能全面体现苗族节日文化的一个节日。< /p>< /section>< /section>< /section>< /section>< /section>< p >

';
//将markdown内容转换为towxml数据
let data = app.towxml.toJson(
tab1_dataSource, // markdown或html文本内容
'html', // markdown或html
that // 当前页面的this（2.1.0或以上的版本该参数不可省略）
);
//设置文档显示主题，默认'light'
data.theme = 'dark';

//设置数据
this.setData({
  article: data
})

似乎不能正确解析<audio>标签

从html转wxml时，小程序的组件需要加入controls属性（默认是false），否则页面中不显示音频界面。另外还有name和author属性需要设置，否则默认控件中显示的是”未知音频“和”未知作者“。

二维码过期啦，求更新~

npm 安装后的路径问题

Error:
in File ./pages/detail.wxss

File not found: /towxml/style/main.wxss
编译.wxss 文件错误，错误信息如上，可在控制台查看详情信息

样式中这么写的：
/引入主题样式/
@import '../towxml/style/main.wxss';
@import '/towxml/style/theme/light.wxss';
@import '/towxml/style/theme/dark.wxss';

导入默认demo后模拟器一直转圈圈

如果一个markdown文件中链接了另一个markdown文件链接，怎么实现跳转呢？

我采用了towxml后，发现如标题所示情况出现错误：

navigateTo:fail url "pages/mdShow/https://xxx.test.com/another.md" is not in app.json

能否实现跳转呢？我尝试了(wxParse)[https://github.com/icindy/wxParse]项目，利用wxParseTagATap: function可以实现服务器上的markdown文件的跳转显示。