Skip to content

Instantly share code, notes, and snippets.

@dotherightthing

dotherightthing/building-a-codepen.md

Created August 15, 2019 09:16
Show Gist options
  • Save dotherightthing/6ad4ee8cdc68187d9fbdced004dda12a to your computer and use it in GitHub Desktop.
Save dotherightthing/6ad4ee8cdc68187d9fbdced004dda12a to your computer and use it in GitHub Desktop.
Download ZIP
[Building a CodePen] #javascript
Raw
building-a-codepen.md

Building a CodePen

Created: 2017.04.13

CodePen is great, but an embedded shortcode is not great from an authoring perspective. Is there a better way to integrate snippet authoring into WordPress?

Ace

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application.

Console

Ace editor console.log():

Question..

I am currently testing the Ace code editor(http://ace.c9.io/) and embedded into a webpage. I am wondering if it's possible to create a output console to display console.log and output commands. Currently, I am using eval() to evaluate the code but as there is no console, the console.log command won't display. I want the editor to be able to output like in CodeCademy.

Answer..

Console is completely unrelated to ace. You need to create your own. Which is not very hard, you need to overwrite the global for console, and write some function that stringifies objects and either adds that string to another editor or to a dom node. You may want to have a look at other projects that have a console e.g. https://github.com/jsbin/jsbin/blob/master/public/js/render/console.js

CodeMirror

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.

Console

https://github.com/azu/codemirror-console

Others

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment