自定义HTML标签,直接在网页中写MarkDown和数学公式。
发布于 5 年前 作者 gzhangzy 6655 次浏览 最后一次编辑是 3 年前 来自 分享

<x-md>

            markdown标签

<x-math>

            LaTeX标签

<x-qr>

            qr-code标签

<x-chart>

           作图标签

<x-clock>

           表,纪念apple watch发布(怎駡能不叫iWatch呢?)。

例子

点这里,View page source。

新增两个标签,看的懂并且有兴趣,可以联系我。

15 回复

不明觉厉,想想,如果我要实现自定义标签功能的话,我会通过angular的directive去实现。

专业的说法: Web Components

@yaochun Web Components离实用还很远。只是Custom Element,可以做到产品里去了。

React 里面实现的话,就是个class。Preprocessing +js function for trasnformation

@think2011 我也是用Angularjs实现的

@leapon 我不是很同意就是个class这个说法

我理解你说的class是因为

var IndexPage = React.createClass({
      render : function(){
	       return (
		      //....
		   )
	  }
});

return IndexPage;

无处不在的createClass

我用react差不多1年多了,严格上react是一个自定义的component,和ag一样有状态的概念,也有各个生命周期的事件入口

预编译确实有的,jsx毕竟不是真正的js

Fibonacci 那个例子好酷

@yaochun React class 这个说法是不严谨,不是传统OO里的class。

React 的 class 可以象 html tag 一样用 (在 jsx 里),和楼主的自定义tag有相似之处,所以有感而发。

@yaochun React 的单向数据流动够用吗?看文档里也支持双向数据流动。你有一年React经验,有用到双向数据流动的时候吗?

这个难度在哪

@nighca 这个不是难度在哪?而是想降低开发难度。

你自己可以写个网页,在页面<head>中增加如下代码: <head> <script src="//tongyongwangzhi.duapp.com/lib/register-element.min.js"></script> <link rel=“stylesheet” href="//tongyongwangzhi.duapp.com/x-tags.css?id=x-md,x-clock"> <script src="//tongyongwangzhi.duapp.com/x-tags.js?id=x-md,x-math,x-qr,x-chart,x-clock"></script> </head>

你就可以在这个页面里面使用这五个标签了。

@alsotang 哎呀我去,怎么现在Markdown可以有上传图片的功能了,还有辅组的一些功能,这个是官方Markdown带的功能吗,求wiki地址。。。。

@owen-hong 这是编辑器的功劳,跟 markdown 无关。这个编辑器可以去 @lepture 的 github 找到。

@gzhangzy 为什么要自定义 HTML 标签来做?为何不是 div 上面加 class 来做?反正都是用 js 去读了然后转换。

@alsotang 标签更优雅 = =b

回到顶部