极客无极限一行HTML5代码引发的创意大爆炸

一行HTML5代码能做什么?国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器。这件事在分享到Code Wall、Hacker News之后,引起了众多开发者的注意,纷纷发表了自己的创意。 这是最初的HTML5代码,它可以运行在最新的Chrome和Firefox中,只需在浏览器地址栏输入如下代码:

创新互联是一家专业提供随州企业网站建设,专注与成都网站建设、成都做网站、html5、小程序制作等业务。10年已为随州众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

 
 
 
 
  1. data:text/html, <  html   contenteditable> 

但是功能十分有限,甚至没有保存功能,样式也非常简陋。 于是,网友Montas修改了他的代码,使用textarea标签代替html标签,可以添加自己喜欢的样式:

 
 
 
 
  1. data:text/html, <  textarea   style  =  "font-size: 1.5em; width: 100%; height: 100%; border: n 

网友jecxjo希望能有存储功能:

 
 
 
 
  1. data:text/html,<  button   onClick  =  "SaveTextArea()"  >Save <  script   languag 

但上面的代码是以文件形式存储,samsonjs觉得不够方便,而且需要点击按钮,于是添加了自动保存功能:

 
 
 
 
  1. data:text/html,<  html   lang  =  "en"  ><  head  ><  style  > html,body { height: 100% } #n 

现在可是云时代!仅仅这样怎能让开发者止步?minikomi使用了第三方API打造了一个在线编辑器:

 
 
 
 
  1. data:text/html, 
  2.  
  3. #e { 
  4. position:absolute; 
  5. top:0; 
  6. right:0; 
  7. bottom:0; 
  8. left:0; 
  9. font-size:16px; 
  10.  
 
  •  
  •  
  •  
  • 没有代码高亮功能的编辑器终究不适合程序员,Rails开发者jakeonrails又定制了Ruby代码高亮功能:

     
     
     
     
    1. data:text/html,   #e{position:absolute;top:0;right:0;bottom:0;left 

    效果如下图:

    实际上,如果minikomi的代码已经支持多种语言高亮,如Python,只需要把“markdown”换成“python”,效果如下:

    你以为到此为止了?中国开发者assassindesign觉得只是文本编辑器就太无聊了,又提供了涂鸦版本:

     
     
     
     
    1. data:text/html, <  body  ><  canvas   id  =  "dyDraw"  >你的浏览器不支持HTML5 Canvas

    还等什么呢?赶快试试看吧! 极客的创意的无穷的,你们是否有更好的创意,欢迎跟帖!

    本文名称:极客无极限一行HTML5代码引发的创意大爆炸
    网站地址:http://www.stwzsj.com/qtweb/news18/5218.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    网站收录知识

    同城分类信息