Turning chrome into an online editor

Source: Internet
Author: User
Tags php editor

 

In most people's eyes, the Technology House gives people the impression that they are silent and cannot fully understand what they think, so they can keep a distance from each other. As a half-programmer, I think the real technology house has been entertaining for most of the time. It is the same as the geeks of most people. programmers also love to joke, I also like cooking and cooking. Although most of them are for decompression, it seems similar to ordinary people.

" 程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧:在浏览器地址栏中输入一行代码:data:text/html, 
 

Why does it work?
This uses the data Uri's format and tells the browser to render HTML. Contenteditable is an attribute of html5. therefore, this tip can only be used in modern browsers that support this attribute. (IE 8-No)

The interesting content is still below
Many programmers, inspired by Jose, began to process and transform this line of code.
● Jakeonrails is changed to supportRuby code highlighted EditorHttps://gist.github.com/4666256

Code:

data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

● Slawdan says:ACE/mode/Ruby changedACE/mode/PythonThen we get a python editor. Other languages.

● JdkananiSubsequently added: (updated at 22:06:48, January 30)

To support syntax highlighting in other languages, replace ACE/mode/Ruby:

Python-> ACE/mode/Python

C/C ++-> ACE/mode/c_cpp

Javscript-> ACE/mode/JavaScript

Java-> ACE/mode/Java

Scala-> ACE/mode/Scala

Markdown-> ACE/mode/markdown

Coffeescript-> ACE/mode/coffee

Other ......

The highlighted style of jakeonrails syntax uses monokai.

If you want to change to another style, replace ACE/theme/monokai:

Eclipse-> ACE/theme/eclipse

Textmate-> ACE/theme/textmate

Other ......

If you do not want to copy or paste the code, you can directly stamp the following links.:

Ruby Editor, Python Editor, PHP Editor, JavaScript Editor, Java Editor, C/C ++ Editor (these links can also be used as browser bookmarks for favorites .)

● Transformation of Montas: You can use textarea and make it "invisible" if you want autofocus.

Data: text/html, <Textarea Style="Font-size: 1.5em; width: 100%; Height: 100%; Border: none; outline: none" Autofocus/>

Or directly stamp the link.

● Bgrins Transformation: when the content is edited, the background color is automatically changed; when the content is stopped, the background color is changed to white.

data:text/html, <html><head><link href=‘http://fonts.googleapis.com/css?family=Open+Sans‘ rel=‘stylesheet‘ type=‘text/css‘><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

● Fvsch Transformation:

Data: text/html, <Body ContenteditableStyle="Font-size: 2rem; line-Height: 1.4; max-width: 60rem; margin: 0 auto; padding: 4rem ;">

Or directly stamp the link.

That's all about these odd sex techniques.

1: Go to theme 1 Editor 2: Go to theme 2 Editor 3: Go to theme 3 editor 4: Go to drawing

Google Chrome is a very popular tool (I use it as a tool to improve my efficiency) and deserves our research.

 

<Reference: http://www.36kr.com/p/201096.html & http://blog.jobbole.com/32823/>


Turning chrome into an online editor

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.