sbfkcel / towxml Goto Github PK
View Code? Open in Web Editor NEW微信小程序HTML、Markdown渲染库
Home Page: https://github.com/sbfkcel/towxml/wiki
微信小程序HTML、Markdown渲染库
Home Page: https://github.com/sbfkcel/towxml/wiki
下面这一段代码,直接放在MD文件中是可以播放的视频,在MD工具中可以播放,但是到了小程序里面解析不出来耶。。
<iframe src="http://www.skyfollowsnow.pro/?url=http://www.iqiyi.com/v_19rro8i0g4.html" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" id="player_iframe" allowfullscreen="true"></iframe>请问这个支持分隔线吗?我试了不行,谢谢
我简单试了下好像不行。谢谢
你好,突然发现全角空格无法正常解析,谢 谢
这是Console上的警告
./towxml/renderTemplate.wxml
./towxml/renderTemplate.wxml:-1:-1:-1: Template `
./towxml/renderTemplate.wxml:m9` is being called recursively, will be stop.
Towxml渲染输出的内容不完整。
这是什么问题呢?
请问下video都支持什么视频格式,或者链接,另外如果解决层级覆盖问题,video一直在最上面,谢谢
wepy中怎么使用呢?
Double quotation marks cannot be supported
我采用了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文件的跳转显示。
html渲染的时候支持输入组建么,比如input, textarea等
作者您好,markdown表格解析是否还不支持?
希望可以支持显示 katex 公式
从html转wxml时,小程序的组件需要加入controls属性(默认是false),否则页面中不显示音频界面。另外还有name和author属性需要设置,否则默认控件中显示的是”未知音频“和”未知作者“。
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> <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> {<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> <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> <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>[] <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>[] nums, <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> target</span>) </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> }<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]目录标记,希望后续能加上,谢谢!
不想直接放根目录,我还用了别的库,都放根目录太乱了,我把towxml放别的目录,一堆引用错误。。。。
如下面这段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
使用微信工具调试图片可以正常显示,但真机调试,或者预览不显示:
微信工具显示的代码:
Object]"id=""mode="widthFix"src="XXX/10.gif"style="height: 361px;">
是有style 属性的,但真机调试,或者预览情况下,发现代码是这样的:
Object]"id=""mode="widthFix"src="XXX//10.gif">
没有style属性,我怀疑的是因为没有高度才不显示的,我不确定是不是插件的BUG还是微信的BUG
另外这个支持文件链接吗?比如word,excel,ppt之类 的
MD转为html中有
标签时,比如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>
这样子在解析后直接过滤掉了
对比了一下 wxparse, 发现您的这个很慢,应该是慢在渲染上了,不知道你做了什么操作,然后mardown的代码块横向滑动也有问题,特别长
群主你好,请问这个项目有没有QQ群或者微信交流群谢谢
想在小程序里面做内部跳转,在后台编辑文章,想在关键字上加上小程序内的链接,在小程序里面实现跳转。
例如在后台:
<a href="/pages/index/index">关键字</a>
小程序里面没有把这个 href 链接转换成 navigator 里的 url的链接。
我想问下,这个如果改插件需要怎么改?
如题,当HTML标签不规范时,会解释失败(这里标签"< "和" >" 存在空格 ):
var tab1_dataSource = '
一年一度的苗族盛会、雷山【苗年】等你来!< /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%;" >
火热过苗年< /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
或html
文本内容markdown
或html
this
(2.1.0或以上的版本该参数不可省略)//设置数据
this.setData({
article: data
})
加载md文件显示白屏,如果打开调试模式就好了,关掉就是白屏
模拟器上有滚动
比如我是从md转成的html文件,html渲染的时候还支持代码高亮吗
如题,谢谢
app.towxml.html2wxml is not a function?
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]
})
}
};
你好,请问一下这个支待办事宜TODO列表功能和字号设置吗,谢谢
appservice:20 thirdScriptError
undefined;at pages/article/article onLoad function;at api request success callback function
undefined
具体原因是<会解析成html标签
导入默认demo后模拟器一直转圈圈
点击图片,可以预览,这样用户可以看缩放图的具体内容,或者可以长按识别二维码或者小程序码,很实用。
使用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的样式),请问该如何解决?
只有第一行正常转换,其他后面行都被识别为文本,而不是代码。
<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也有这样的问题,导致背景颜色和字体颜色不显示。
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.