一行 HTML5 語法 將 瀏覽器 變成 編輯器

臨時需要編輯器, 用瀏覽器就可以做到~

於網址列輸入下述語法, 瀏覽器就會立刻變成 記事本(編輯器) 囉~

data:text/html,

• 註1: 瀏覽器需要支援 
• 註2: 透過 Data URI + HTML5 contenteditable attribute 來達成.
• 原作者 Jose Jesus Perez Aguinaga 文章: 

一行語法 將 瀏覽器 變成 臨時的編輯器 各種應用

因為這個是靠 Data URI 的方式來達成, 可以靠 css 來加工, 所以突然瀏覽器就變成可以換 Theme 的強大編輯器.

這篇結合的研究所打造的編輯器: : 結合 ,,  改出來的編輯器 (可點此 連結 直接使用)

data:text/html;charset=utf-8,

編輯器的 Theme 可以看這兩篇:

• 此篇  已經把各種程式語言 Theme 的替換語法都加在裡面, 下述是 Ruby、PHP 的. (預設背景 Theme 是ace/theme/monokai)
  • Ruby
    

    data:text/html,

  • PHP
    

    data:text/html,

• 只要把裡面的 ace/mode/ruby , ace/mode/php 換成想要的語言就可以了, ex:
  • Markdown -> `ace/mode/markdown`
  • Python -> `ace/mode/python`
  • C/C++ -> `ace/mode/c_cpp`
  • Javscript -> `ace/mode/javascript`
  • Java -> `ace/mode/java`
  • Scala- -> `ace/mode/scala`
  • CoffeeScript -> `ace/mode/coffee`
  • css, html, php, latex, tex, sh, sql, lua, clojure, dart, typescript, go, groovy, json, jsp, less, lisp, lucene, perl, powershell, scss, textile, xml, yaml, xquery, liquid, diff and many more.

下述我替換好一些常用的, 可以直接拖到瀏覽器上面當 Bookmarklet 或 直接點選使用.