close
DataCamp Light 是 DataCamp 公司提供的網頁代碼高亮和執行的前端插件,目前只支援 R 和 Python。
DataCamp 的 GitHub。
DataCamp Light 特點
1. 將任何網站或部落格轉換為互動學習平台。
2. 適用於 R 和 Python。在 DataCamp 的伺服器上維護。
3. 使用教學包將現有的文檔轉換為交互式課程。
4. 查看執行 R 或 Python 範例。
5. 利用 Submission Correctness Tests 檢查代碼執行的正確性。
如何安裝
在網頁或部落格中加入腳本就可以了。
<script type="text/javascript" src="//cdn.datacamp.com/dcl-react.js.gz"></script>
頁面在載入完畢後,上面的 js 模組會檢查頁面上的特定區域, 決定是否轉換為可運行的代碼編輯器。
頁面配置
引用上面的 JavaScript 庫後,就可以開始以下面的格式編寫 HTML 塊。這些將動態轉換為可運行的代碼編輯器。
<div data-datacamp-exercise data-lang="python" data-height="auto"> <code data-type="pre-exercise-code"></code> <code data-type="sample-code"> list_1 = ['A','B','C','D','E','F','G','H','I'] list_2 = ['G','H','I','J','K','L','M'] intersection = [x for x in list_1 for y in list_2 if x == y] print(intersection) </code> <code data-type="solution"></code> <code data-type="sct"></code> <div data-type="hint">Just press 'Run'.</div> </div>
正如上面在示範中所看到的,代碼包含在一個 div 標籤中,帶有兩個資料屬性 data-datacamp-exercise 和 data-lang。
第一個屬性 data-datacamp-exercise 表示被視為 DataCamp Light 的代碼區塊,而另一個屬性 data-lang 指定使用哪種程式語言,目前只支援 R 和 Python。
還有一個可選的屬性 data-height,它可以設定 div 的 px 高度(最小高度為 300px),或者根據示範代碼行的數量設置大小 data-height ="auto"。
下面展示一下真正的效果:
list_1 = ['A','B','C','D','E','F','G','H','I'] list_2 = ['G','H','I','J','K','L','M'] intersection = [x for x in list_1 for y in list_2 if x == y] print(intersection)
Just press 'Run'.
文章標籤
全站熱搜