自定义HTML标签，直接在网页中写MarkDown和数学公式。
发布于 5个月前 作者 gzhangzy 871 次浏览 来自 分享

<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

回到顶部