livecodes
v39
ただ機能するコードプレイグラウンド！
反応、Vue、Svelte、Solid、Typescript、Python、Go、Ruby、PHP、90+言語/フレームワーク用の機能が豊富なオープンソースのクライアント側のコードプレイグラウンド。
livecodes.ioで今すぐお試しください
ドキュメント
何がlivecodeを違うものにしているのですか？
* GitHubアカウントは、GitHub統合を使用する機能にのみ必要です。
...そしてすべての機能をお楽しみください！
このコードをページに追加します。
< div id =" container " > </ div >
< script type =" module " >
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes' ;
createPlayground ( '#container' , {
params : {
markdown : '# Hello LiveCodes!' ,
css : 'h1 {color: dodgerblue;}' ,
js : 'console.log("Hello, from JS!");' ,
console : 'open' ,
} ,
} ) ;
</ script >埋め込まれた遊び場のドキュメントを確認してください。
リリースをダウンロードしてください
静的ファイルサーバーに（無料で！） 1、2、3、4、5
自己ホスティングのガイドを確認してください（GitHubページに展開するための組み込みのセットアップを含む）。
...そしてそれはただ機能します！
詳細については、機能の完全なリストをご覧ください。
ソフトウェア開発キット（SDK）は、LiveCodesの遊び場と埋め込んで通信するための簡単で強力なインターフェイスを提供します。
SDKは、CDNSからも利用できる軽量（5kb Gzipted未満）、ゼロ依存性NPMパッケージとして提供されます。さまざまな構成と埋め込みオプションを備えた遊び場を作成するために使用できます。さらに、SDKメソッドにより、ランタイム中の遊び場のプログラマティックコミュニケーションと制御が可能になります。
npm i livecodes
例：（産物で開く）
import { createPlayground } from 'livecodes' ;
createPlayground ( '#container' , {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
view : 'result' ,
} ) ;JavaScript SDKはフレームワーク/ライブラリに不可知論されています。ただし、ラッパーコンポーネントは人気のあるライブラリ（現在のReactおよびVue）にも提供されています。 SDKは、ラッパーなしで直接Svelteで使用できます。タイプスクリプトサポートは、タイプセーフティと優れた開発者エクスペリエンスを提供します。
ReactSDKの例：（ LiveCodeで開く）
import LiveCodes from 'livecodes/react' ;
const config = {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ;
const Playground = ( ) => < LiveCodes config = { config } view = "result" /> ;
export default Playground ;vue sdkの例：（産物で開く）
< script setup >
import LiveCodes from 'livecodes/vue' ;
const config = {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ;
</ script >
< template >
< LiveCodes :config =" config " view =" result " />
</ template >さらに、SDKにより、プレイグラウンドへのリンクを作成できます。
import { getPlaygroundUrl } from 'livecodes' ;
const url = getPlaygroundUrl ( {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
} ) ;
console . log ( url ) ;詳細については、SDKドキュメントを参照してください。
機能、開始、構成、SDKの包括的なドキュメントは次のとおりです。
https://livecodes.io/docs/
ドキュメントには、デモ、コードサンプル、スクリーンショット、ストーリーブック、タイプスクリプトタイプが含まれます。
最新の変更についていく：
フィードバックを歓迎します！
新しい問題や議論を始めてください。
セキュリティレポートについては、security.mdを参照してください。
また、連絡先フォームを使用して私たちに連絡することもできます。
貢献は歓迎され、高く評価されています。
私たちの素晴らしい貢献者への大きな叫び声！あなたのハードワークはすべての違いを生みます！
貢献ガイドを参照してください。
LiveCodesは、以下によって寛大に提供されるサービスを使用します。
LiveCodesとそのライセンスで使用されるパッケージは、ここにリストされています。
MITライセンス©HATEM HOSNY
LiveCodesは無料でオープンソースです。アプリには広告が含まれていないか、サブスクリプションが必要です。制限なしに無制限の使用を可能にします。
LiveCodeを後援することにより、プロジェクトの継続的な開発とメンテナンスをサポートするだけでなく、開発者コミュニティにとって価値のあるリソースのままであることを確認するのに役立ちます。
スポンサーになることを検討してください。
