给博客增加实时运行python代码的功能

DataCamp Light 是DataCamp公司提供的网页代码高亮和运行的前端插件, 目前只支持R和python, 下面我们用示例来说明如何把博客改造成可以实时运行代码的REPL。

注意: 我近日发现DataCamp被-墙， 所以你们可能看不到代码编辑器和结果输出， 我在学校是可以看到的， 不明白好东西为什么总是被-墙。

DataCamp Light特点

• 将任何网站或博客转换为互动学习平台。
• 适用于R和Python。会话在DataCamp的服务器上维护。
• 使用教程包将现有的文档转换为交互式课程。
• 查看演示R和Python示例。
• 利用Submission Correctness Tests检查代码运行的正确性

怎样安装

在你的网页中添加脚本就可以了:

1

<script type="text/javascript" src="//cdn.datacamp.com/dcl-react.js.gz"></script>

页面在加载完毕后, 上面的js模块会检查页面上的特定区域, 决定是否转换为可运行的代码编辑器。

页面配置

引用上面的JavaScript库后，您可以开始以下面的格式编写HTML块。这些将动态转换为可运行的代码编辑器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div data-datacamp-exercise data-lang="r">
	<code data-type="pre-exercise-code">
		# 这部分代码是在初始化的时候自动运行的
		b = 6
	</code>
	<code data-type="sample-code">
		# 这里是示例代码


		# Print out a


	</code>
	<code data-type="solution">
		# 这里是答案
		a <- 5

		# Print out a
		print(a)
	</code>
	<code data-type="sct">
		test_object("a")
		test_function("print")
		success_msg("Great job!")
	</code>
	<div data-type="hint">Use the assignment operator (code<-</code>) to create the variable codea</code>.</div>
</div>

正如我们在示例中所看到的，代码包含在一个div标签中, 带有两个数据属性data-datacamp-exercise和data-lang。第一个属性data-datacamp-exercise表示

1
2
3
4

<code data-type="pre-exercise-code">
	# This will get executed each time the exercise gets initialized
	b = 6
</code>

1
2
3
4
5
6
7
8
9

<code data-type="sample-code">
	# Create a variable a, equal to 5


	# Print out a


</code>

1
2
3
4
5
6
7

<code data-type="solution">
	# Create a variable a, equal to 5
	a <- 5

	# Print out a
	print(a)
</code>

1
2
3
4
5

<code data-type="sct">
	test_object("a")
	test_function("print")
	success_msg("Great job!")
</code>

1
2
3

<div data-type="hint">
    Use the assignment operator (<code><-</code>) to create the variable <code>a</code>.
</div>