JS插件在頁面中突出顯示並運行javascript

Question

我正在編寫一個JS庫的文檔，我經常插入代碼示例。我想要的是允許用戶編輯和執行這些示例（例如，使用RUN按鈕）。

有人知道一個輕的js插件可以做到這一點嗎？ （帶代碼熒光筆）。

編輯：只是運行JS代碼的東西，就像一個非常簡單的Web控制檯，不需要編輯CSS和HTML。

Answer 1

Codepen允許您使用語法高亮顯示來嵌入代碼示例，並且可以在沙盒環境中運行它們。

下面是嵌入一個示例代碼片段（所以這個答案沒有得到邊裁沒有代碼，但真正的文檔是非常容易閱讀）：

<p data-height="268" data-theme-id="0" data-slug-hash="ClnAe" data-user="afkatja" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/ClnAe'>ClnAe</a> by Katja Hollar (<a href='http://codepen.io/afkatja'>@afkatja</a>) on <a href='http://codepen.io'>CodePen</a></p> 

Here's a blog post從Codepen與更多細節如何。

Here's an example of a blog post使用嵌入式的Codepen。

編輯：剛纔意識到你希望代碼示例是可編輯的。恐怕這是一個Codepen PRO功能，記錄在this blog post中。所以還是一種選擇，但可能有替代品可以免費使用。