[硬广]好消息 Coderlan 支持内嵌模式了👐

[monsterooo]

亲爱的开发者你好，Coderlane自从去年三月上线以来。我们收到了一些反馈和意见，我们一直在努力的改进和跟新产品功能，现在有个好消息 Coderlane 支持内嵌使用了。

通过iframe将 Coderlane 嵌入到你的网站中，你将拥有一个支持多种主流语言编译与执行的在线编程环境、支持配套的测试框架、漂亮的单元测试输出。

预览图片

下面一起来看看怎么将 coderlane 引入到你的网站吧。

首介绍一下完整的引入 url

https://coderlane.net/embed?language=默认语言&initCode=每种语言的初始化代码&initTest=每种语言的初始化测试

接下来通过 javascript 动态创建一个 iframe，然后使用初始化代码和初始化测试参数

var url = 'https://coderlane.net/embed?';
var initCode = {
  javascript: '',
  java: '',
  cpp: '',
  c: '',
  ruby: '',
  go: '',
  python2: '',
  python3: '',
  rust: ''
}
var initTest = {
  javascript: '',
  java: '',
  cpp: '',
  c: '',
  ruby: '',
  go: '',
  python2: '',
  python3: '',
  rust: ''
}
// 默认选中语言
url += 'language=ruby';
// 初始化代码
url += '&initCode=' + encodeURIComponent(JSON.stringify(initCode));
// 初始化测试
url += '&initTest=' + encodeURIComponent(JSON.stringify(initTest));

var iframe = document.createElement('iframe');
iframe.src = url;
iframe.style = "width: 100%; height: 100%";
// 创建 iframe 元素到页面中
document.body.appendChild(iframe);

关于initCode和initTest部分，可以参考支持语言部分获得

iframe 实际调用演示

<iframe src="https://coderlane.net/embed?language=javascript&initCode=%7B%22javascript%22%3A%22function%20Solution()%20%7B%0A%20%20return%20%22Hello%20World!%22%3B%0A%7D%22%2C%22java%22%3A%22class%20Solution%20%7B%0A%20%20public%20static%20String%20helloWorld()%7B%0A%20%20%20%20return%20%22Hello%20World!%22%3B%0A%20%20%7D%0A%7D%22%7D&initTest=%7B%22javascript%22%3A%22const%20expect%20%3D%20require(%22chai%22).expect%3B%0Adescribe(%22Hello%20World%22%2C%20function()%20%7B%0A%20%20%20%20it('should%20be%20Hello%20World%20overwrite'%2C%20function()%20%7B%0A%20%20%20%20%20%20%20%20expect(Solution()).to.equal('Hello%20World!')%3B%0A%20%20%20%20%7D)%0A%7D)%22%2C%22java%22%3A%22import%20org.junit.Test%3B%0Aimport%20static%20org.junit.Assert.assertEquals%3B%0Aimport%20org.junit.runners.JUnit4%3B%0A%0Apublic%20class%20MainTest%20%7B%0A%20%20%40Test%0A%20%20public%20void%20testHelloWorld()%20%7B%0A%20%20%20%20assertEquals(%22Hello%20World!%22%2C%20Solution.helloWorld())%3B%0A%20%20%7D%0A%7D%22%7D%0A" border="0" frameborder="no" />

感谢阅读，如果有任何问题欢迎反馈交流