Question

我想知道如何制作像Khanacademy那样的东西。

如果您查看下面的链接，他们基本上有一个文本框，您可以在其中输入文本，然后根据您放置的“关键字”将突出显示它们，例如，如果您键入函数，它将返回单词函数在颜色蓝色。但是如果你做了像rect（）这样的东西，它会在它旁边的屏幕上绘制一个矩形。我想用HTML做这样的事情，所以如果你把某些关键字放到某个特定的颜色然后它会将你的代码输出到它旁边的屏幕作为实际的HTML。我猜你可以为输出做一些类似iFrame的事情但不确定其余部分。

链接：https://www.khanacademy.org/cs/programming/drawing-basics/p/intro-to-drawing

我在线检查了一些东西，但找不到这样的东西。

您可以关注的另一件事是codecademy.com上的代码编辑器。

如果您需要更多信息，请告诉我们！

这是我的最后一招，我一直在寻找2个月的D：

Answer 1

您可以使用的良好语法hightlighter是CodeMirror（http://codemirror.net/）。它很容易实现并从中获取文本，更改颜色等。

我知道您也希望能够在文本框中进行编程。一个简单的方法是在不创建自己的代码解析器的情况下允许这样做，就是在文本框中使用javascript代码。然后，您可以在文本框中的文本上使用javascript的eval()函数来执行此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>

文本编辑器像Khan Academy JavaScript

1 个答案: