#codemirror

[syndicode]

Meet HyperMD WYSIWYG markdown editor for browsers

Here in Syndicode we love new tools! Meet HyperMD WYSIWYG markdown editor for browsers that brakes the wall between writing and previewing!  HyperMD is a set of CodeMirror add-ons / modes / themes / commands / keymap etc. You may use both original CodeMirror and HyperMD on the same page. Read the...

[syndicode]

Meet HyperMD WYSIWYG markdown editor for browsers

Here in Syndicode we love new tools! Meet HyperMD WYSIWYG markdown editor for browsers that brakes the wall between writing and previewing!  HyperMD is a set of CodeMirror add-ons / modes / themes / commands / keymap etc. You may use both original CodeMirror and HyperMD on the same page. Read the...

[evolutionarydesigns]

WordPress 4.9 Adds CodeMirror and the Coding Sandbox the WordPress Core Code

Earlier today I was reading one of my favorite WordPress related blogs, Elegant Themes Blog and one of the articles I read was about about some new features to the code. The version is WordPress 4.9 and this new version adds CodeMirror and the Coding Sandbox to the core code. WordPress 4.9 Adds CodeMirror and […] http://dlvr.it/Q9Jt9t

[geeksplugins]

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

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…

View On WordPress

[andreacoleacc]

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

Live Demo and Download WP Custom Code - Another Script Customizer For Your Site (Utilities)

[patricksandquist-blog]

W9D1

Today was another day filled with CSS and improving how each page of my application looks. One of the most important components of my project (in my opinion what will set it apart and add tons of functionality) is getting the excellent Codemirror library incorporated. Codemirror is a Javascript library that lets code in the browser look like code in Atom or similar text editor. Adding Codemirror would mean adding syntax highlighting, autocompletion, bracket matching, linting, and so much more. So I tried for a long time today trying to get it to work! One of the issues is that Rails includes libraries in the Gemfile and application.js. The rest of the front-end world seems to use the package manager npm which comes bundled with Node. Changing all of my library dependencies though from application.js to npm is a bit of a daunting task but it might be necessary if I can’t figure out how to fully incorporate Codemirror by tomorrow. Time is running out!

[patricksandquist-blog]

W8D5

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!

More to come on RubyOff.

[joostory]

CodeMirror로 아름다운 editor 만들기

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 });

addon들이 몇개 있는데 js 파일을 로드하는 것만으로 적용되니 필요한 것만 로드하면 된다. 실제 서비스에 넣을때는 필요한 것만 merge해서 사용하면 될 것 같다. 테마는 데모 사이트에서 보고 맘에 드는 걸로 정하면 되겠다. 몇몇 문법을 추가할 수도 있는데 그건 차근차근 알아가면서 해봐야겠다.