您可以使用的一个很好的语法荧光笔是 CodeMirror ( http://codemirror.net/ )。它很容易实现并从中获取文本、更改颜色等。
我了解您还希望能够在文本框中进行编程。在不创建自己的代码解析器的情况下也允许这样做的一种简单方法是在文本框中使用 javascript 代码。eval()
然后,您可以在文本框中的文本上使用 javascript 的函数来执行此 javascript。
你唯一需要做的就是rect()
在你的 html 页面中编写你自己的函数,比如 javascript 函数。对于类似和其他的绘图功能rect()
,您已经可以使用 HTML5 画布对象 ( http://www.w3schools.com/tags/ref_canvas.asp )。然后,您可以按照您的建议在 iframe 中绘制此画布,或者只是在另一个 div 中绘制。
我希望这会给你一些启发或让你开始。
编辑:我提供了一个小例子:(您的浏览器必须支持 HTML5 才能工作)
<html>
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<style>
.CodeMirror { height: auto; width: 500px; border: 1px solid #ddd; }
.CodeMirror-scroll { max-height: 200px; }
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
#drawing { position:absolute; left:550px; top:10px; border: 1px solid #ddd; width:500px; height: 400px; }
</style>
<textarea id=code>
// Drawing test
Rect(20,20,100,100);
</textarea>
<div id="drawing">
<canvas id="canvas" width="500" height="400"></canvas>
</div>
<br><input type="button" onclick="eval(editor.getValue())" value="Run" />
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "text/javascript",
matchBrackets: true
});
</script>
<script>
<!-- Your functions go here -->
function Rect(x,y,width,height)
{
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.rect(x,y,width,height);
ctx.stroke();
}
</script>
</html>