6

问题

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）。有人可以提供一些链接/教程或方法。

4

3 回答 3

11

Try Ace: https://github.com/ajaxorg/ace (source) https://ace.c9.io/ (Project page), Cloud9使用这个JavaScript编辑器

于 2013-06-12T11:56:38.027 回答
6

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

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

于 2019-07-24T06:45:54.653 回答
5

还有另一个可嵌入的 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>

于 2020-04-05T09:06:18.093 回答