In diesem Artikel werden wir SandPack, ein beliebtes Spielplatz-Framework von CodeSandbox, erkunden und diskutieren, wie Sie damit eine dynamischere und interaktivere Umgebung für Ihre Benutzer erstellen können.
Dieser Artikel behandelt so ziemlich alle grundlegenden Dinge, die Sie über SandPack wissen müssen. Erweiterte Funktionen wie Hooks und benutzerdefinierte Komponenten sowie coole Anpassungsoptionen werden jedoch ausführlich in meinem Blog besprochen.
Sehen Sie sich die ausführliche Version dieses Artikels an
SandPack ist ein Komponenten-Toolkit zum Erstellen von Live-Code-Editoren für Ihre Blogs und technischen Dokumente. In diesem Artikel konzentrieren wir uns auf Sandpack-React und nicht auf Sandpack-Client, einen einfachen JavaScript-Bundler.
Was SandPack auszeichnet, ist die große Auswahl an verfügbaren Anpassungsoptionen. Außerdem ist der Einstieg wirklich einfach. Zu den nützlichsten Funktionen von Sandpack-React gehören:
Um mit Sandpack-React zu beginnen, führen Sie diesen npm- oder Yarn-Befehl aus:
npm i @codesandbox/sandpack-react
oder
Garn hinzufügen @codesandbox/sandpack-react
Als nächstes importieren Sie den Sandpack-Spielplatz und rendern ihn mit dem folgenden Code:
import { Sandpack } from "@codesandbox/sandpack-react";
export default function App() {
return <Sandpack />
}
Das
Lassen Sie uns den Standardspielplatz an unseren Stil anpassen und ein unterhaltsames Beispiel zum Herumspielen erstellen. Wenn Sie den Editor so anpassen, dass er zu Ihrem Website-Thema passt, kann er sich nahtlos einfügen und nicht wie eine Einbettung eines Drittanbieters wirken. Zuerst verwenden wir die Dateistütze, um eine einfache Zählerschaltfläche zu erstellen. Neben der App.js-Datei erstellen wir auch die App.css-Datei.
Sehen Sie sich das Beispiel und den Code unten an:
In diesem Beispiel wird eine Thekenkomponente auf dem Spielplatz gerendert. Das Dateiobjekt enthält den Code für App.js und App.css. Wir haben ein Thema aus der zuvor erwähnten vorgefertigten Liste ausgewählt, das aus Sandpack-Themen stammt und einen Hauch von Stil verleiht. Zeilennummern wurden ebenfalls auf „true“ gesetzt.
Darüber hinaus können Sie die Gestaltung des Spielplatzes ganz einfach anpassen. Dies kann entweder durch die Anwendung benutzerdefinierter Klassen oder durch die Nutzung der vorgefertigten Optionen von SandPack erfolgen. Sie können beispielsweise benutzerdefinierte Klassen wie diese verwenden:
<Sandpack
theme={theme}
template="react"
options={{
classes: {
"sp-wrapper": "custom-wrapper",
"sp-layout": "custom-layout",
"sp-tab-button": "custom-tab",
},
}}
/>
Sie können dann das Erscheinungsbild und Layout mithilfe von CSS optimieren, wodurch Sie viel mehr Kontrolle über das visuelle Design haben.
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.
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:
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中文网其他相关文章！
