React와 SandPack을 사용하여 올인원 코드 편집기 만들기

在本文中，我們將探索 SandPack（CodeSandbox 的一個流行的 Playground 框架），並討論如何使用它為用戶創建一個更動態和互動的環境。

本文涵蓋了您需要了解的有關 SandPack 的幾乎所有基本知識。但是，我的部落格上詳細討論了更高級的功能，例如掛鉤和自訂元件以及很酷的自訂選項。

查看本文詳細版本

---

什麼是沙包

SandPack 是一個元件工具包，用於為部落格和技術文件建立即時程式碼編輯器。在本文中，我們將重點放在 sandpack-react 而不是 sandpack-client，它是一個輕量級的 JavaScript 捆綁器。

SandPack 的脫穎而出之處在於提供廣泛的客製化選項。另外，它真的很容易上手。 sandpack-react 最有用的功能包括：

• 針對流行語言和框架的預先建構範本
• 為編輯器提供大量預先建置主題以及建立自訂主題的選項。
• 支援所有 npm 依賴項和主要 JavaScript 框架。
• 自訂 UI 和遊樂場幾乎各個方面的選項。
• 您可以使用預先建置的可組合元件來建立一個完全自訂的 Playground。
• 提供者和自訂掛鉤可用於建立自訂元件。

---

遊樂場概覽

要開始使用 sandpack-react，請執行此 npm 或紗線命令：

npm 我@codesandbox/sandpack-react

或
紗線添加@codesandbox/sandpack-react

接下來，導入 Sandpack 遊樂場並使用以下程式碼渲染它：

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

>組件設定了一個空的遊樂場供您直接跳進去。預設情況下，遊樂場包含一個基本的 React 模板。讓我們來看看自訂模板、主題等的基本道具：

• template：此屬性接受預先定義的範本清單。預設情況下，設定為 vanilla。
• files：這是一個非常有用的屬性。您可以使用自訂程式碼建立多個文件，類似於常規資料夾結構。文件物件包含一個值（相對文件路徑）和鍵（文件內容）。然後，該物件中的檔案也會自動顯示在選項卡中。
• 選項：您可以使用選項物件自訂多個功能。您可以在此處查看完整清單。一些最有用的包括：
  • showLineNumbers：切換行號的可見度。
  • showTabs：切換選項卡的可見性。
  • 類別：您可以將自訂類別名稱指派給現有範本類別以進行進一步自訂。
• 依賴項：依賴項物件可以包含應用程式所需的任何 NPM 套件。格式和語法與 package.json 檔案類似。
• 主題：您可以選擇預先建立的主題或指派完全自訂的主題。

客製化遊樂場

讓我們調整預設的 Playground 以適應我們的風格，並創建一個有趣的範例來玩。自訂編輯器以匹配您的網站主題可以使其無縫融合，而不是感覺像第三方嵌入。首先，讓我們使用 files 屬性來建立一個簡單的計數器按鈕。除了 App.js 檔案之外，我們還將建立 App.css 檔案。

看看下面的範例和程式碼：

在此範例中，計數器元件在 Playground 中渲染。檔案物件包含 App.js 和 App.css 的程式碼。我們從前面提到的預建清單中選擇了一個主題，該主題源自沙包主題，並添加了一絲風格。行號也已設定為 true。

此外，您可以輕鬆自訂遊樂場的佈局。這可以透過應用自訂類別或利用 SandPack 提供的預先建置選項來完成。例如，您可以使用這樣的自訂類別：

<Sandpack
  theme={theme}
  template="react"
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

然後，您可以使用 CSS 調整外觀和佈局，從而更好地控制視覺設計。

Another useful feature is the ability to switch between different layout modes. SandPack offers three modes: preview, tests, and console. The default mode is preview, while the tests mode provides a suite for running tests and the console mode renders a terminal/console component instead of a preview window. The console mode is useful for displaying outputs of server side logic. You can also switch the layout direction using the rtl (Right to left layout) option.

Customizing the Output

Besides the editor itself, the output display can be customized as well. For instance, you can choose to show or hide the console, change the layout, or even modify the appearance of the preview window. Pretty cool right!. Code editors often have heavily customized editing windows, but the actual output is not paid attention to as much.

The console displays all sorts of errors and console logs. Depending on the type of code snippet being showcased, you'd either want to show or hide the console. You can also toggle the visibility of the show console button. By default, the console is hidden. As with all the SandPack components, the styling can be individually modified using custom CSS classes.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showConsole: true,
    showConsoleButton: true,
  }}
/>;

Besides the console, the display window itself can be customized as well. For example, you can turn the navigator bar on or off with the showNavigator option and decide if you want the panels to be resizable with the resizablePanels option.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showLineNumbers: true,
    showNavigator: true,
    resizablePanels: true,
  }}
/>

The result will look somewhat like this:

Conclusion

Sandpack isn't just easy to use—it's also super customizable. This makes it a great choice for blogs, documentation, or any platform where live code editing adds value, while still allowing developers to customize it based on their sites.

---

You can check the detailed version of this article here
Thanks for reading!

위 내용은 React와 SandPack을 사용하여 올인원 코드 편집기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!