臨時需要編輯器, 用瀏覽器就可以做到~
於網址列輸入下述語法, 瀏覽器就會立刻變成 記事本(編輯器) 囉~
data:text/html, <html contenteditable>
- 註1: 瀏覽器需要支援 HTML5 的 contenteditable 屬性
- 註2: 透過 Data URI + HTML5 contenteditable attribute 來達成.
- 原作者 Jose Jesus Perez Aguinaga 文章: One line browser notepad
一行語法 將 瀏覽器 變成 臨時的編輯器 各種應用
因為這個是靠 Data URI 的方式來達成, 可以靠 css 來加工, 所以突然瀏覽器就變成可以換 Theme 的強大編輯器.
這篇結合的研究所打造的編輯器: Writability - Write in your browser: 結合 Better Web Readability Project - CSS Library, Azbuka - CSS Typographical Base Rendering Library, Clipr - bookmarklet for better reading 改出來的編輯器 (可點此 連結 直接使用)
data:text/html;charset=utf-8, <title>Writability</title><body OnLoad='document.body.focus();' contenteditable style="font-size:21px;line-height:1.6;font-family:'Chaparral Pro',Georgia;max-width:21em;margin:0 auto;padding:3rem;background-color:rgb(233,233,225);color:rgb(68,68,68);" spellcheck="false">
編輯器的 Theme 可以看這兩篇:
- This bookmarklet gives you a code editor in your browser with a single click.
- 此篇 notepad.html 已經把各種程式語言 Theme 的替換語法都加在裡面, 下述是 Ruby、PHP 的. (預設背景 Theme 是 ace/theme/monokai)
- Ruby
data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="editor"></div><script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
- PHP
data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="editor"></div><script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/php");</script>
- Ruby
- 只要把裡面的 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 或 直接點選使用.
- PHP 編輯器
- GO 編輯器
- C / C++編輯器
- JavaScript 編輯器
- Java 編輯器
- CoffeeScript 編輯器
- CSS 編輯器
- HTML 編輯器
- SH 編輯器
- SQL 編輯器
- JSON 編輯器
- Perl 編輯器
- XML 編輯器
- SCSS 編輯器
注意事項
- 寫完後, 可以 檔案 -> 另存新檔 來做存檔動作
- 最大的風險是, 不要在編輯時, 按到 Reload.
相關網頁
- 一行代碼, 瀏覽器變成臨時編輯器 - 這篇有詳細的圖文說明
- 僅一行代碼, 打造一個在線編輯器