问题
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.
我正在寻找一种简单的方法将代码编辑器嵌入到页面中(使用 JavaScript 或 Python)。请问有人可以提供相关链接/教程或方法吗?
问题
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.
我正在寻找一种简单的方法将代码编辑器嵌入到页面中(使用 JavaScript 或 Python)。请问有人可以提供相关链接/教程或方法吗?
尝试使用Ace: https://github.com/ajaxorg/ace (源代码) https://ace.c9.io/ (项目页面),这是被Cloud9使用的JavaScript编辑器。
我知道这是一篇旧文章, 以下是我在开发在线代码编辑器时所采用的方法, 你可以使用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>
还有一个可以嵌入的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>