香腸炒章魚

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"。

下面展示一下真正的效果：