Question

问题

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.

所以我正在寻找一种简单的方法将代码编辑器嵌入到页面中（使用java脚本或python）。有人请提供一些链接/教程或方法。

Answer 1

尝试Ace：https://github.com/ajaxorg/ace（来源）http://ace.ajax.org/（项目页面），Cloud9使用此JavaScript编辑器

Answer 2

我知道这是旧帖子，这就是我在开发在线代码编辑器时所做的您可以使用ace编辑器

从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>

Answer 3

还有另一个可嵌入的JavaScript代码编辑器：CodeJar?

它只有 2 kB ，并且功能强大。

.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>

如何在页面中嵌入代码编辑器？

3 个答案: