웹브라우저를 메모장처럼 사용하기

아래 텍스트를 주소표시줄에 입력하여 열면 웹브라우저를 메모장처럼 사용할 수 있게 됩니다.
주소표시줄에 입력하여 연 후에 북마크를 하면 다음부터는 북마크를 눌러 간단히 열 수 있습니다.

data:text/html, <html contenteditable>

brwsntpd01.jpg

작성한 문서는 웹브라우저의 다른 이름으로 저장을 이용해서 HTML 파일이나 텍스트 파일로 저장할 수 있지만 저장한 파일을 열었을 때 약간 이상하게 표시되는 경우가 있는 듯 하네요.
(다른 이름으로 저장할 때 웹브라우저에 따라 지원하는 파일 형식이 조금씩 다를지도 모르겠네요.)
평소에 웹브라우저를 항상 실행해 놓는다면 잠깐 동안만 기록해 두면 되는 몇줄 정도의 짧은 메모를 할 때 적당할 것 같네요.

이 내용이 나와있는 글[Link]의 댓글에 글자 크기나 배경색 등을 변경한 것들도 있는데 그중에서도 가장 눈에 띄는 건 프로그래밍용 편집기처럼 표시할 수 있는 Ruby Notepad Bookmarklet[Link]과 Ruby Notepad Bookmarklet을 약간 수정한 notepad.html[Link]이네요.
Ruby Notepad Bookmarklet과 notepad.html은 ace/theme와 ace/mode 부분을 변경하여 테마와 모드를 지정할 수 있고 notepad.html은 마크다운[Link]으로 작성한 내용을 Ctrl + M을 눌러 미리보기할 수 있습니다.

테마: monokai, 모드: ruby

data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/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>

brwsntpd02.jpg



테마: clouds, 모드: html

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

brwsntpd03.gif

brwsntpd04.jpg

brwsntpd05.jpg



마크다운 미리보기

data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class="e" id="editor"></div><div class="c"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var consoleEl=document.getElementsByClassName("c")[0];var converter=new Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>

brwsntpd06.jpg
따로 명시하지 않는 한에서 이 사이트의 모든 콘텐츠는 다음의 라이선스를 따릅니다: Creative Commons Attribution-ShareAlike 3.0 License