9

Problem

I want to create a page with a code editor embedded in it.I looked up codemirror
but i am having problems using it as i am new to java script.

So I am looking for an easy way to embed a code editor into a page(using java script or python).Can someone please provide some link/tutorial or method for it.

0

3 Answers 3

13

Try Ace: https://github.com/ajaxorg/ace (source) https://ace.c9.io/ (Project page), this JavaScript editor is used by Cloud9

2
  • Trunecek It was quite helpful, but I have having bit problems understanding some inbuilt commands , can you give some link to its documentation Jun 12, 2013 at 19:37
  • On their page is all you need (I guess) API reference is here: ace.ajax.org/#nav=api, How-To guide here: ace.ajax.org/#nav=howto. If you have concrete problem, try to ask here (new question) or via comment and I will try to answer you. Have a nice day Jun 17, 2013 at 8:27
10

I know this is old post , This is how i did while developing online code-editor you can use ace-editor

check this sample from ace

<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/javascript");
</script>
</body>
</html>

9

There is another embeddable JavaScript code editor: CodeJar 🍯

It's just 2 kB and has great features in it.

.editor {
    color: #fff;
    background: #282a36;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    font-family: monospace;
    font-size: 14px;
    font-weight: 400;
    min-height: 240px;
    letter-spacing: normal;
    line-height: 20px;
    padding: 10px;
    tab-size: 4;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CodeJar</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-twilight.min.css" rel="stylesheet" />
</head>
<body>
<div class="editor language-js">function fibonacci(n) {
	let num;

	if (n >= 2) {
		num = fibonacci(n - 1) + fibonacci(n - 2);
	} else {
		num = n
	}

	return num;
}</div>

<script type="module" id="code">
  import {CodeJar} from "https://medv.io/codejar/codejar.js?"

  const jar = new CodeJar(
    document.querySelector(".editor"), 
    Prism.highlightElement
  )
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.