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

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

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

data:text/html, <html contenteditable>

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

因為這個是靠 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>

  • 只要把裡面的 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 或 直接點選使用.

注意事項

  • 寫完後, 可以 檔案 -> 另存新檔 來做存檔動作
  • 最大的風險是, 不要在編輯時, 按到 Reload.

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈一行 HTML5 語法 將 瀏覽器 變成 編輯器〉中有 2 則留言

  1. 本來的ace.js不能用了
    d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js

    要換成下面這個
    ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js

    回覆

對 Tid Huang 發表迴響取消回覆

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。