브라우저에서 소스 편집기를 써보자.
브라우저에서 소스 편집기를 사용할 수 있습니다.
사파리와 크롬, explorerd에서 확인해봤는데 explorer에서는 안되고
사파리와 크롬에서는 잘됩니다.
먼저 주소창에 아래 코드를 붙여넣기 합니다.(1줄입니다.^^)
|
1 |
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> |
입력하고 나면
와 같은 화면을 볼 수 있습니다. 까만 화면에 HTML코드를 입력한것입니다.
네트워크에 있는 정보를 보여주는 것이 아니라
브라우저의 기능으로 오프라인에서도 사용가능합니다.
나름 line number라든지 언어별로 indent나 bracelet자동 추가등이
지원됩니다. syntax lightlighting은 물론이구요.
이상태에서 즐겨찾기에 추가 버튼을 눌러 본인의 즐겨찾기 버튼에 등록하시면
다음부터는 즐겨찾기에 추가된 링크만 누르게되면 언제 어디서나 사용가능한 브라우저 기반의
코드 에디터가 됩니다.!!(메모장으로도 사용가능하구요.)
위 링크는 HTML코드를 위한 링크인데 그럼 다른 언어를 위한 세팅은?
|
1 |
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/c_cpp");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> |
이 코드(링크?)가 c/cpp코드를 위한 세팅입니다.
바꿔주는 부분은 간단합니다. 위내용중 setMode키워드로 찾아서 보면
HTML은 setMode(“ace/mode/markdown”)이라고 되어있고
C_CPP는 setMode(“ace/mode/c_cpp”)라고 되어있습니다. 이 부분만 바꿔서 저장하면 됩니다.
java나 다른 언어를 위한 mode도 가능하지만 제가 따로 알아보지는 않았습니다.
비슷하게 theme나 에디터의 width등도 역시 바꿀 수 있으니 잘 찾아보시면 됩니다.^^
이렇게 c코드는 출력됩니다. 숫자 4옆에 보이는 조그만 삼각형이 있죠?
누르면 이렇게 code folding도 됩니다.
나중에 저장하는건 브라우저의 “웹 페이지”저장을 눌러 저장하면 됩니다.
하지만! 브라우저에서 지원되는것이기 때문에 이러저러한 제약사항이 있습니다.
파일 브라우징이라든지 바꾸기 기능이라든지등의 기능이 더 필요할 떄가 있거든요.
크롬에서는 slim text라는 extension이 있습니다. 크롬 웹스토어 에서 찾아봐도 되고
사이트에 가서 보고 거기 있는 링크를 따라가도 됩니다.
이런식으로 출력됩니다. (근데 웬 중국어가…만드신분이 중국분이신듯.)
Latest Comments