#codemirror

WP Custom Code – Another Script Customizer For Your Site (Utilities)

Purchase $19.00 WP Custom Code allows you to add the custom CSS|Javascript without modifying any file. Watch video demo before purchase. Feature List: Codemirror Editor Auto Close Brackets Text Searching 45 editor themes. CSS Customizer. Javascript Customizer. 4 types of placement: Header inline. Header External file. Footer inline. Footer External file. Importing: allows you to import the code…

After getting the basic functionality of my site down, I decided to spend the day making it look good. Huge amounts of CSS were applied to the sign up, sign in, index and editor pages which is a step in the right direction. Hit a bit of a brick wall though when I tried incorporating Codemirror’s textarea feature to my editor. Something that I don’t have a lot of experience with at the moment is learning how to use and include 3rd party Javascript packages through npm. A lot of what I could find on the web didn’t deal with doing so with Rails,especially once I limited myself to using one of two Codemirror-React components I could find. Oddly, both of their examples simply produced fatal errors in my code that prevented me from debugging effectively. I’m going to try to ask for some help getting them to work on Monday but if it’s not so straightforward, I might have to pivot and make my own!

syntax highlight가 되는 markdown editor를 만들어보고 있다. 그러다가 문득 '이미 이런걸 만들어둔 사람들이 있지 않나?' 하는 생각이 들었다. 찾아봤다. 역시 여러가지가 나왔는데 CodeMirror가 많이 보인다. 생각보다 사용법도 간단하고 결과물도 상당히 괜찮다. 하지만 정말 믿을만한건지 확신이 안생긴다.

좀 더 찾아보기로 하고 텀블러 테마 에디터 소스코드를 열어보았다. tiny-mce의 흔적이 보인다. 설마 tiny-mce를 쓴건가 하고 잠시 더 보고 있는데 Tumblr.init() 내부에서 에디터를 가지고 있는 듯 무슨 에디터를 쓰는지 잘 드러나지 않는다.

ACE

검색을 더 해본 결과 Ace를 발견했다. 이것도 CodeMirror와 비슷한 수준의 결과물을 보여준다. 게다가 Cloud9 등의 유명한 개발관련 서비스들에서 이걸 사용한다고 한다. 대세를 따라가는게 안전해보여서 Ace를 적용해보았다. 역시 상당히 괜찮다. 테마도 다양하게 지원하고 언어도 다양하게 지원한다.

'그래 이걸로 결정!' 이라고 생각하는 순간 커다란 단점이 눈에 보인다. 파이어폭스에서 한글을 제대로 쓸 수가 없다. 아무래도 keydown 이벤트에서 이벤트를 조작하는 것 같다. 그럴 경우 한글이 제대로 입력이 안되기 때문이다. 가만보니 뭔가 텀블러에서 겪는 문제와 비슷해보였다.

텀블러 소스를 다시 까보았다. ace-editor 가 눈에 들어온다. 이전에 봤을땐 왜 못봤을까? 한글에서 나타나는 현상이 딱 Ace와 같다. 아마도 텀블러의 마크다운 편집기도 이걸 쓰는 것 같다.

다시 CodeMirror로

눈물을 잠시 훔치고 다시 CodeMirror로 돌아와 믿을만한지 검색을 시작했다. (아! CodeMirror는 한글문제가 없다) 생각했던 것보다 상당히 많은 곳에서 사용 중이다. 이전에 이걸 보지 못했던 건 아마도 Ace의 화려한 웹사이트와 대조적인 텍스트뿐인 웹사이트때문이었던 것 같다. 문득 '무조건 이뻐야 돼' 라는 광고 카피가 생각나며 부끄러워진다.

적용방법은 역시 간단한다. js, css를 넣은 후에 아래를 사용하면 된다.

var textarea = document.getElementById('editor'); var editor = CodeMirror.fromTextArea(textarea, { lineNumbers: true, lineWrapping: true, theme: "eclipse", val: textarea.value });