diff --git a/content/de/guide/v8/switching-to-preact.md b/content/de/guide/v8/switching-to-preact.md index bdbf0b681..4cdaf726d 100755 --- a/content/de/guide/v8/switching-to-preact.md +++ b/content/de/guide/v8/switching-to-preact.md @@ -26,7 +26,7 @@ Das ermöglicht es einem, mit dem Schreiben von React/ReactDOM-Code fortzufahren Der Installationsprozess ist in zwei Schritte unterteilt. Zuerst muss man `preact` und `preact-compat`, zwei separate Pakete, installieren: -```sh +```bash npm i -S preact preact-compat ``` @@ -89,7 +89,7 @@ Dieser Ansatz wird im nächsten Abschnitt erläutert. Beachtet man Small Screen Rendering-Funktionalitäten, kann man das [module-alias](https://npmjs.com/package/module-alias)-Paket zum Ersetzen von React mit Preact verwenden, sollte man keinen Bundler (wie z.B. Webpack) für den Build-Prozess des serverseitigen Codes verwenden. -```sh +```bash npm i -S module-alias ``` @@ -150,7 +150,7 @@ Generell involviert der Prozess des Wechselns zu Preact einige Schritte: Dieser Schritt ist vermutlich der Einfachste: man muss die Bibliothek lediglich installieren, um sie verwenden zu können! -```sh +```bash npm install --save preact # or: npm i -S preact ``` diff --git a/content/de/guide/v8/unit-testing-with-enzyme.md b/content/de/guide/v8/unit-testing-with-enzyme.md index e2b40d74a..12457bd65 100644 --- a/content/de/guide/v8/unit-testing-with-enzyme.md +++ b/content/de/guide/v8/unit-testing-with-enzyme.md @@ -20,7 +20,7 @@ Wir benötigen zwei Module: - `preact-compat-enzyme`: Um weitere interne React-Properties bereitzustellen. - `preact-test-utils`: Um Teile der `react-addons-test-utils`-API, die von `enzyme` genutzt werden, bereitzustellen. -```sh +```bash npm install --save-dev preact-compat-enzyme preact-test-utils ``` diff --git a/content/de/index.md b/content/de/index.md index 02591980c..5252e2582 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -138,7 +138,7 @@ function Counter() {

To Do-Listen-Komponente

- 

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -173,7 +173,7 @@ render(<TodoList />, document.getElementById("app"));

Laufendes Beispiel

- 

+        

 import ToDoList from './todo-list';

 render(<ToDoList />, document.body);
         

@@ -187,7 +187,7 @@ render(<ToDoList />, document.body);
 

     

         
Zeige GitHub-Stars

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -209,7 +209,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
Laufendes Beispiel

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="developit/preact" />,
diff --git a/content/en/guide/v10/preact-testing-library.md b/content/en/guide/v10/preact-testing-library.md
index 9aad8e9a0..2469ceaa8 100644
--- a/content/en/guide/v10/preact-testing-library.md
+++ b/content/en/guide/v10/preact-testing-library.md
@@ -19,7 +19,7 @@ Unlike [Enzyme](/guide/v10/unit-testing-with-enzyme), Preact Testing Library mus
 
 Install the testing-library Preact adapter via the following command:
 
-```sh
+```bash
 npm install --save-dev @testing-library/preact
 ```
 
diff --git a/content/en/guide/v10/server-side-rendering.md b/content/en/guide/v10/server-side-rendering.md
index c1e0ba9e2..82273b067 100644
--- a/content/en/guide/v10/server-side-rendering.md
+++ b/content/en/guide/v10/server-side-rendering.md
@@ -17,7 +17,7 @@ Server-Side Rendering (often abbreviated as "SSR") allows you to render your app
 
 The server-side renderer for Preact lives in its [own repository](https://github.com/preactjs/preact-render-to-string/) and can be installed via your packager of choice:
 
-```sh
+```bash
 npm install -S preact-render-to-string
 ```
 
diff --git a/content/en/guide/v10/signals.md b/content/en/guide/v10/signals.md
index 0a59657bc..0cbe45d7e 100644
--- a/content/en/guide/v10/signals.md
+++ b/content/en/guide/v10/signals.md
@@ -104,7 +104,7 @@ render(, document.getElementById("app"));
 
 Signals can be installed by adding the `@preact/signals` package to your project:
 
-```sh
+```bash
 npm install @preact/signals
 ```
 
diff --git a/content/en/guide/v10/unit-testing-with-enzyme.md b/content/en/guide/v10/unit-testing-with-enzyme.md
index 9d333aa3d..746be1bcb 100644
--- a/content/en/guide/v10/unit-testing-with-enzyme.md
+++ b/content/en/guide/v10/unit-testing-with-enzyme.md
@@ -31,7 +31,7 @@ Preact differs from Enzyme with React.
 
 Install Enzyme and the Preact adapter using:
 
-```sh
+```bash
 npm install --save-dev enzyme enzyme-adapter-preact-pure
 ```
 
diff --git a/content/en/guide/v8/switching-to-preact.md b/content/en/guide/v8/switching-to-preact.md
index 97bd40bd0..a1527afb7 100755
--- a/content/en/guide/v8/switching-to-preact.md
+++ b/content/en/guide/v8/switching-to-preact.md
@@ -27,7 +27,7 @@ all the necessary tweaks on top of Preact's core to make it work just like `reac
 The process for installation is two steps.
 First, you must install preact and preact-compat (they are separate packages):
 
-```sh
+```bash
 npm i -S preact preact-compat
 ```
 
@@ -107,7 +107,7 @@ That approach is covered in the next section.
 
 For SSR purposes, if you are not using a bundler like webpack to build your server side code, you can use the [module-alias](https://www.npmjs.com/package/module-alias) package to replace react with preact.
 
-```sh
+```bash
 npm i -S module-alias
 ```
 
@@ -168,7 +168,7 @@ Generally, the process of switching to Preact involves a few steps:
 
 This one is simple: you'll need to install the library in order to use it!
 
-```sh
+```bash
 npm install --save preact  # or: npm i -S preact
 ```
 
diff --git a/content/en/guide/v8/unit-testing-with-enzyme.md b/content/en/guide/v8/unit-testing-with-enzyme.md
index b4fdd3293..05e7f4318 100644
--- a/content/en/guide/v8/unit-testing-with-enzyme.md
+++ b/content/en/guide/v8/unit-testing-with-enzyme.md
@@ -31,7 +31,7 @@ Preact differs from Enzyme with React.
 
 Install Enzyme and the Preact adapter using:
 
-```sh
+```bash
 npm install --save-dev enzyme enzyme-adapter-preact-pure
 ```
 
diff --git a/content/en/index.md b/content/en/index.md
index a3339db07..031304451 100755
--- a/content/en/index.md
+++ b/content/en/index.md
@@ -135,7 +135,7 @@ function Counter() {
 

     

         
Todo List

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -170,7 +170,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
Running Example

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -183,7 +183,7 @@ render(<TodoList />, document.body);
 

     

         
Fetch GitHub Stars

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -205,7 +205,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
Running Example

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="preactjs/preact" />,
diff --git a/content/es/guide/v10/getting-started.md b/content/es/guide/v10/getting-started.md
index 317889dbd..3e30a8bf0 100644
--- a/content/es/guide/v10/getting-started.md
+++ b/content/es/guide/v10/getting-started.md
@@ -69,13 +69,13 @@ El proyecto `preact-cli` es una solución preparada para agrupar aplicaciones Pr
 
 Como su nombre lo indica, `preact-cli` es una herramienta de línea de comandos que se puede ejecutar en el terminal de su máquina. Instálelo globalmente ejecutando:
 
-```node 
+```bash
  npm install -g preact-cli
 ```
 
 Después de eso, tendrá un nuevo comando en su terminal llamado `preact`. Con él puedes crear una nueva aplicación ejecutando el siguiente comando:
 
-```node 
+```bash
  preact create default my-project
 ```
 
@@ -90,7 +90,7 @@ El comando anterior extrae la plantilla de `preactjs-templates/default`, solicit
 
 Ahora estamos listos para comenzar nuestra aplicación. Para iniciar el servidor de desarrollo, ejecute el siguiente comando dentro de la carpeta del proyecto recién generado (`my-project` en este ejemplo):
 
-```node 
+```bash
 # Go into the generated project folder
 cd my-project/
 
@@ -105,7 +105,7 @@ Una vez que el servidor está activo, puede acceder a su aplicación en la URL q
 
 Llega un momento en que debe implementar su aplicación en algún lugar. La CLI entrega un práctico comando `build` que generará una compilación altamente optimizada para su ambiente de producción.
 
-```node 
+```bash
 npm run build
 ```
 
diff --git a/content/es/guide/v8/switching-to-preact.md b/content/es/guide/v8/switching-to-preact.md
index f8b95584c..d5ffba9c7 100755
--- a/content/es/guide/v8/switching-to-preact.md
+++ b/content/es/guide/v8/switching-to-preact.md
@@ -25,7 +25,7 @@ Esto te permite continuar escribiendo código de React/ReactDOM sin hacer cambio
 El proceso de instalación consta de dos pasos.
 Primero, tienes que instalar preact y preact-compat (son paquetes separados):
 
-```sh
+```bash
 npm i -S preact preact-compat
 ```
 
@@ -106,7 +106,7 @@ En general, este proceso de cambiar a Preact envuelve unos pocos pasos:
 
 Este es simple: Tienes que instalar la librería para poder usarla!
 
-```sh
+```bash
 npm install --save preact  # ó: npm i -S preact
 ```
 
diff --git a/content/es/guide/v8/unit-testing-with-enzyme.md b/content/es/guide/v8/unit-testing-with-enzyme.md
index c009d9e72..7f16960fe 100644
--- a/content/es/guide/v8/unit-testing-with-enzyme.md
+++ b/content/es/guide/v8/unit-testing-with-enzyme.md
@@ -20,7 +20,7 @@ Necesitamos dos módulos:
 - `Preact-compat-enzyme`: Para proporcionar propiedades internas adicionales de `React`.
 - `Preact-test-utils`: Para proporcionar partes de la API del `react-addons-test-utils` usadas por el `enzyme`.
 
-```sh
+```bash
 npm install --save-dev preact-compat-enzyme preact-test-utils
 ```
 
diff --git a/content/es/index.md b/content/es/index.md
index b5239729c..b7d0d0210 100755
--- a/content/es/index.md
+++ b/content/es/index.md
@@ -144,7 +144,7 @@ function Counter() {
 

     

         
Componente de Todo List

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -179,7 +179,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
Ejemplo corriendo

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -193,7 +193,7 @@ render(<TodoList />, document.body);
 

     

         
Buscando las estrellas de Github

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -215,7 +215,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
Ejemplo corriendo

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="developit/preact" />,
diff --git a/content/fr/guide/v8/switching-to-preact.md b/content/fr/guide/v8/switching-to-preact.md
index d7338f779..238f2717e 100755
--- a/content/fr/guide/v8/switching-to-preact.md
+++ b/content/fr/guide/v8/switching-to-preact.md
@@ -25,7 +25,7 @@ Cela vous permet de continuer à écrire du code pour React/ReactDOM sans aucun
 Le processus d'installation comprend deux étapes :
 Premièrement, vous devez installer preact et preact-compat (ce sont deux packages séparés) :
 
-```sh
+```bash
 npm i -S preact preact-compat
 ```
 
@@ -85,7 +85,7 @@ Cette approche est couverte dans la prochaine section.
 
 Pour des raison de rendu côté serveur, si vous n'utilisez pas un bundler comme webpack pour construire votre code côté serveur, vous pouvez utiliser le package [module-alias](https://www.npmjs.com/package/module-alias) pour remplacer react par preact.
 
-```sh
+```bash
 npm i -S module-alias
 ```
 
@@ -145,7 +145,7 @@ Généralement, le processus pour passer à Preact comporte quelques étapes :
 
 Cette étape est simple : vous allez devoir installer la bibliothèque avant de pouvoir l'utiliser !
 
-```sh
+```bash
 npm install --save preact  # ou : npm i -S preact
 ```
 
diff --git a/content/fr/guide/v8/unit-testing-with-enzyme.md b/content/fr/guide/v8/unit-testing-with-enzyme.md
index 640f66330..0aa13cb6b 100644
--- a/content/fr/guide/v8/unit-testing-with-enzyme.md
+++ b/content/fr/guide/v8/unit-testing-with-enzyme.md
@@ -20,7 +20,7 @@ Nous avons besoin de deux modules :
 - `preact-compat-enzyme`: pour fournir les propriétés internes de React aditionnelles
 - `preact-test-utils`: pour fournir les parties de l'API de `react-addons-test-utils` utilisées par `enzyme`
 
-```sh
+```bash
 npm install --save-dev preact-compat-enzyme preact-test-utils
 ```
 
diff --git a/content/fr/index.md b/content/fr/index.md
index b2ab43829..2efdf1f8b 100755
--- a/content/fr/index.md
+++ b/content/fr/index.md
@@ -137,7 +137,7 @@ function Counter() {
 

     

         
Composant liste de tâches

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -172,7 +172,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
Exemple interactif

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -186,7 +186,7 @@ render(<TodoList />, document.body);
 

     

         
Récupérer les Stars Github

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -208,7 +208,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
Exemple fonctionnel

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="developit/preact" />,
diff --git a/content/it/index.md b/content/it/index.md
index 9ff950bcb..af02bc10a 100755
--- a/content/it/index.md
+++ b/content/it/index.md
@@ -144,7 +144,7 @@ function Counter() {
 

     

         
Componente Lista delle attività

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -179,7 +179,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
Esempio in esecuzione

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -193,7 +193,7 @@ render(<TodoList />, document.body);
 

     

         
Visualizzare le stelle su GitHub

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -215,7 +215,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
Esempio in esecuzione

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="developit/preact" />,
diff --git a/content/ja/guide/v10/preact-testing-library.md b/content/ja/guide/v10/preact-testing-library.md
index 051482a0c..228e1ba27 100644
--- a/content/ja/guide/v10/preact-testing-library.md
+++ b/content/ja/guide/v10/preact-testing-library.md
@@ -22,7 +22,7 @@ description: 'Testing Libraryを使用してPreactアプリケーションのテ
 
 以下のコマンドでtesting-libraryのPreact用のアダプタをインストールします。
 
-```sh
+```bash
 npm install --save-dev @testing-library/preact
 ```
 
diff --git a/content/ja/guide/v10/server-side-rendering.md b/content/ja/guide/v10/server-side-rendering.md
index 34d48bdbd..968b4d745 100644
--- a/content/ja/guide/v10/server-side-rendering.md
+++ b/content/ja/guide/v10/server-side-rendering.md
@@ -20,7 +20,7 @@ description: 'サーバでPreactアプリケーションをレンダリングし
 Preact用のサーバサイドレンダラ(`preact-render-to-string`)は[こちらのレポジトリ](https://github.com/preactjs/preact-render-to-string/)にあります。
 好きなパッケージマネージャを使ってインストールできます。
 
-```sh
+```bash
 npm install -S preact-render-to-string
 ```
 
diff --git a/content/ja/guide/v10/unit-testing-with-enzyme.md b/content/ja/guide/v10/unit-testing-with-enzyme.md
index de45b3504..14a6c2629 100644
--- a/content/ja/guide/v10/unit-testing-with-enzyme.md
+++ b/content/ja/guide/v10/unit-testing-with-enzyme.md
@@ -26,7 +26,7 @@ Enzymeの詳しい使い方とAPIリファレンスは[Enzymeのドキュメン
 
 以下のようにEnzymeとPreactアダプタをインストールします。
 
-```sh
+```bash
 npm install --save-dev enzyme enzyme-adapter-preact-pure
 ```
 
diff --git a/content/ja/index.md b/content/ja/index.md
index f376f33d5..cdb5fe751 100755
--- a/content/ja/index.md
+++ b/content/ja/index.md
@@ -134,7 +134,7 @@ function Counter() {
 

     

         
Todoリスト

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -169,7 +169,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
実行結果

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -182,7 +182,7 @@ render(<TodoList />, document.body);
 

     

         
GitHubのスター数を取得

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -204,7 +204,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
実行結果

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="preactjs/preact" />,
diff --git a/content/kr/index.md b/content/kr/index.md
index b0855875c..924d1cdf8 100644
--- a/content/kr/index.md
+++ b/content/kr/index.md
@@ -130,7 +130,7 @@ function Counter() {
 

     

         
Todo 리스트

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -165,7 +165,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
실행 예시

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -178,7 +178,7 @@ render(<TodoList />, document.body);
 

     

         
GitHub Star 가져오기

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -200,7 +200,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
실행 예시

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="preactjs/preact" />,
diff --git a/content/pt-br/guide/v10/server-side-rendering.md b/content/pt-br/guide/v10/server-side-rendering.md
index 8f8603ebc..ea392c8aa 100644
--- a/content/pt-br/guide/v10/server-side-rendering.md
+++ b/content/pt-br/guide/v10/server-side-rendering.md
@@ -17,7 +17,7 @@ A renderização no servidor (geralmente abreviada como "SSR") permite renderiza
 
 O renderizador do lado do servidor para o Preact reside em seu [próprio repositório](https://github.com/preactjs/preact-render-to-string/) e pode ser instalado através do seu gerenciador de pacotes de sua escolha:
 
-```sh
+```bash
 npm install -S preact-render-to-string
 ```
 
diff --git a/content/pt-br/guide/v10/unit-testing-with-enzyme.md b/content/pt-br/guide/v10/unit-testing-with-enzyme.md
index 7c6277c71..e6b3eb677 100644
--- a/content/pt-br/guide/v10/unit-testing-with-enzyme.md
+++ b/content/pt-br/guide/v10/unit-testing-with-enzyme.md
@@ -31,7 +31,7 @@ O Preact difere da Enzyme com o React.
 
 Instale o Enzyme e o adaptador Preact usando:
 
-```sh
+```bash
 npm install --save-dev enzyme enzyme-adapter-preact-pure
 ```
 
diff --git a/content/pt-br/guide/v8/switching-to-preact.md b/content/pt-br/guide/v8/switching-to-preact.md
index d03de0198..ff31733c3 100755
--- a/content/pt-br/guide/v8/switching-to-preact.md
+++ b/content/pt-br/guide/v8/switching-to-preact.md
@@ -27,7 +27,7 @@ Isso te permite continuar escrevendo código React/ReactDOM sem mudanças ao seu
 O processo pra instalação é de apenas dois passos.
 Primeiro, você precisa instalar `preact` e `preact-compat` (eles são pacotes separados):
 
-```sh
+```bash
 npm i -S preact preact-compat
 ```
 
@@ -111,7 +111,7 @@ Geralmente, o processo de mudança involve alguns passos:
 
 Esta é simples: você precisará instalar a biblioteca pra utilizá-la!
 
-```sh
+```bash
 npm install --save preact  # or: npm i -S preact
 ```
 
diff --git a/content/pt-br/guide/v8/unit-testing-with-enzyme.md b/content/pt-br/guide/v8/unit-testing-with-enzyme.md
index 93cee680f..90fa2f7d4 100644
--- a/content/pt-br/guide/v8/unit-testing-with-enzyme.md
+++ b/content/pt-br/guide/v8/unit-testing-with-enzyme.md
@@ -20,7 +20,7 @@ Precisamos de dois módulos:
 - `Preact-compat-enzyme`: para fornecer propriedades internas adicionais do `React`.
 - `Preact-test-utils`: para fornecer partes da API do `react-addons-test-utils` usadas pelo `enzyme`.
 
-```sh
+```bash
 npm install --save-dev preact-compat-enzyme preact-test-utils
 ```
 
diff --git a/content/pt-br/index.md b/content/pt-br/index.md
index 2549fa3b3..e6ca28dfc 100755
--- a/content/pt-br/index.md
+++ b/content/pt-br/index.md
@@ -134,7 +134,7 @@ function Counter() {
 

     

         
Componente de Todo List 

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -169,7 +169,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
Exemplo em ação

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -183,7 +183,7 @@ render(<TodoList />, document.body);
 

     

         
Buscar estrelas no Github

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -205,7 +205,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
Exemplo em ação

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="developit/preact" />,
diff --git a/content/ru/guide/v10/preact-testing-library.md b/content/ru/guide/v10/preact-testing-library.md
index 884167ca4..241130f0d 100644
--- a/content/ru/guide/v10/preact-testing-library.md
+++ b/content/ru/guide/v10/preact-testing-library.md
@@ -19,7 +19,7 @@ description: 'Тестирование приложений Preact стало п
 
 Установите адаптер `testing-library` с помощью следующей команды:
 
-```sh
+```bash
 npm install --save-dev @testing-library/preact
 ```
 
diff --git a/content/ru/guide/v10/server-side-rendering.md b/content/ru/guide/v10/server-side-rendering.md
index dea06bcad..cd93c3f07 100644
--- a/content/ru/guide/v10/server-side-rendering.md
+++ b/content/ru/guide/v10/server-side-rendering.md
@@ -17,7 +17,7 @@ Server-Side Rendering (сокращённо SSR) позволяет вывест
 
 Серверный рендерер для Preact находится в [собственном репозитории](https://github.com/preactjs/preact-render-to-string/) и может быть установлен с помощью выбранного вами упаковщика:
 
-```sh
+```bash
 npm install -S preact-render-to-string
 ```
 
diff --git a/content/ru/guide/v10/signals.md b/content/ru/guide/v10/signals.md
index 372aa0f46..ee667a216 100644
--- a/content/ru/guide/v10/signals.md
+++ b/content/ru/guide/v10/signals.md
@@ -104,7 +104,7 @@ render(, document.getElementById('app'));
 
 Сигналы можно установить, добавив в проект пакет `@preact/signals`:
 
-```sh
+```bash
 npm install @preact/signals
 ```
 
diff --git a/content/ru/guide/v10/unit-testing-with-enzyme.md b/content/ru/guide/v10/unit-testing-with-enzyme.md
index e6a746eab..62d729a0e 100644
--- a/content/ru/guide/v10/unit-testing-with-enzyme.md
+++ b/content/ru/guide/v10/unit-testing-with-enzyme.md
@@ -22,7 +22,7 @@ Enzyme поддерживает тесты, которые выполняютс
 
 Установите Enzyme и адаптер Preact, используя:
 
-```sh
+```bash
 npm install --save-dev enzyme enzyme-adapter-preact-pure
 ```
 
diff --git a/content/ru/guide/v8/switching-to-preact.md b/content/ru/guide/v8/switching-to-preact.md
index 9d953443e..12ea00f6b 100644
--- a/content/ru/guide/v8/switching-to-preact.md
+++ b/content/ru/guide/v8/switching-to-preact.md
@@ -27,7 +27,7 @@ permalink: '/guide/switching-to-preact'
 Процесс установки состоит из двух шагов.
 Сначала необходимо установить preact и preact-compat (это отдельные пакеты):
 
-```sh
+```bash
 npm i -S preact preact-compat
 ```
 
@@ -105,7 +105,7 @@ Parcel поддерживает определение псевдонимов м
 
 Для целей SSR, если вы не используете бандлер вроде webpack для сборки кода на стороне сервера, вы можете использовать пакет [module-alias](https://www.npmjs.com/package/module-alias), чтобы заменить react на preact.
 
-```sh
+```bash
 npm i -S module-alias
 ```
 
@@ -166,7 +166,7 @@ API Preact практически идентичен API React, и многие
 
 Это очень просто: чтобы использовать библиотеку, вам нужно будет установить ее!
 
-```sh
+```bash
 npm install --save preact  # или: npm i -S preact
 ```
 
diff --git a/content/ru/guide/v8/unit-testing-with-enzyme.md b/content/ru/guide/v8/unit-testing-with-enzyme.md
index 4610488f5..fbf98b13e 100644
--- a/content/ru/guide/v8/unit-testing-with-enzyme.md
+++ b/content/ru/guide/v8/unit-testing-with-enzyme.md
@@ -22,7 +22,7 @@ Enzyme поддерживает тесты, которые выполняютс
 
 Установите Enzyme и адаптер Preact, используя:
 
-```sh
+```bash
 npm install --save-dev enzyme enzyme-adapter-preact-pure
 ```
 
diff --git a/content/ru/index.md b/content/ru/index.md
index 5f9087ff0..811bdb79b 100644
--- a/content/ru/index.md
+++ b/content/ru/index.md
@@ -133,7 +133,7 @@ function Counter() {
 

     

         
Список дел

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -168,7 +168,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
Пример выполнения

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
 

@@ -183,7 +183,7 @@ render(<TodoList />, document.body);
 

     

         
Получение звёзд GitHub

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -205,7 +205,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
Пример выполнения

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="preactjs/preact" />,
diff --git a/content/tr/guide/v8/switching-to-preact.md b/content/tr/guide/v8/switching-to-preact.md
index 0228dbf52..d36301912 100755
--- a/content/tr/guide/v8/switching-to-preact.md
+++ b/content/tr/guide/v8/switching-to-preact.md
@@ -26,7 +26,7 @@ Tek bir modülün içerisinde Preact'ı `react` ve `react-dom` gibi çalışmas
 Yükleme iki adımdan oluşur.
 Öncelikle preact ve preact-compat'i indirmelisiniz (ikisi farklı paketlerdir):
 
-```sh
+```bash
 npm i -S preact preact-compat
 ```
 
@@ -87,7 +87,7 @@ Bu yaklaşımı sonraki bölümde göreceksiniz.
 
 SSR için, eğer sunucu taraflı projenizde webpack gibi bir bundler kullanmıyorsanız, [module-alias](https://www.npmjs.com/package/module-alias) kullanarak react'ı preact ile değiştirebilirsiniz.
 
-```sh
+```bash
 npm i -S module-alias
 ```
 
@@ -146,7 +146,7 @@ Genelde, Preact'a geçiş birkaç adımdan oluşur.
 
 Oldukça basit, kütüphaneyi kullanabilmeniz için yüklemeniz gerekir!
 
-```sh
+```bash
 npm install --save preact  # ya da: npm i -S preact
 ```
 
diff --git a/content/tr/guide/v8/unit-testing-with-enzyme.md b/content/tr/guide/v8/unit-testing-with-enzyme.md
index 781ea50d6..3190c0c0c 100644
--- a/content/tr/guide/v8/unit-testing-with-enzyme.md
+++ b/content/tr/guide/v8/unit-testing-with-enzyme.md
@@ -21,7 +21,7 @@ Preact bileşenlerini `enzyme` kullanarak test etmek, `preact-compat`'ın üzeri
 - `preact-compat-enzyme`: dahili React property'lerini sağlamak için.
 - `preact-test-utils`: `enzyme` kullanarak `react-addons-test-utils` API'sini sağlamak için.
 
-```sh
+```bash
 npm install --save-dev preact-compat-enzyme preact-test-utils
 ```
 
diff --git a/content/tr/index.md b/content/tr/index.md
index 4ea40aabe..d24452a24 100755
--- a/content/tr/index.md
+++ b/content/tr/index.md
@@ -146,7 +146,7 @@ function Counter() {
 

     

         
TodoList (yapılacaklar listesi) Component'i

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -181,7 +181,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
Çalışan Örnek

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -195,7 +195,7 @@ render(<TodoList />, document.body);
 

     

         
Github Yıldız Sayısını Çekmek

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -217,7 +217,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
Çalışan Örnek

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="developit/preact" />,
diff --git a/content/zh/guide/v10/server-side-rendering.md b/content/zh/guide/v10/server-side-rendering.md
index 72a58e3d9..5770d39db 100644
--- a/content/zh/guide/v10/server-side-rendering.md
+++ b/content/zh/guide/v10/server-side-rendering.md
@@ -17,7 +17,7 @@ description: '通过服务端渲染来向用户快速呈现您的 Preact 应用
 
 Preact 的服务端渲染程序有一个[独立仓库](https://github.com/preactjs/preact-render-to-string/)，您可以使用您偏好的包管理器安装：
 
-```sh
+```bash
 npm install -S preact-render-to-string
 ```
 
diff --git a/content/zh/guide/v10/signals.md b/content/zh/guide/v10/signals.md
index 9546eb730..e9da2f9d2 100644
--- a/content/zh/guide/v10/signals.md
+++ b/content/zh/guide/v10/signals.md
@@ -98,7 +98,7 @@ render(, document.getElementById("app"));
 
 可以通过将 `@preact/signals` 包添加到您的项目来安装信号：
 
-```sh
+```bash
 npm install @preact/signals
 ```
 
diff --git a/content/zh/guide/v8/switching-to-preact.md b/content/zh/guide/v8/switching-to-preact.md
index 1e3ad94c0..bf8b03f57 100755
--- a/content/zh/guide/v8/switching-to-preact.md
+++ b/content/zh/guide/v8/switching-to-preact.md
@@ -24,7 +24,7 @@ permalink: '/guide/switching-to-preact'
 
 安装过程分为两步。第一步，安装 preact 和 preact-compat（它们是独立的包）：
 
-```sh
+```bash
 npm i -S preact preact-compat
 ```
 
@@ -94,7 +94,7 @@ npm i -S preact preact-compat
 
 这一步很简单，在使用这个库之前，你必须先安装
 
-```sh
+```bash
 npm install --save preact  # or: npm i -S preact
 ```
 
diff --git a/content/zh/guide/v8/unit-testing-with-enzyme.md b/content/zh/guide/v8/unit-testing-with-enzyme.md
index a6d3c27de..608b1b48c 100644
--- a/content/zh/guide/v8/unit-testing-with-enzyme.md
+++ b/content/zh/guide/v8/unit-testing-with-enzyme.md
@@ -21,7 +21,7 @@ React提供了`react-addons-test-utils`来测试组件，而Airbnb开发的`enzy
 
 `preact-test-utils`: 提供了`enzyme`所需要的`react-addons-test-utils`中的部分功能
 
-```sh
+```bash
 npm install --save-dev preact-compat-enzyme preact-test-utils
 ```
 
diff --git a/content/zh/index.md b/content/zh/index.md
index 141e7887b..bcd5c51e2 100755
--- a/content/zh/index.md
+++ b/content/zh/index.md
@@ -138,7 +138,7 @@ function Counter() {
 

     

         
待办事项

-        

+        

 // --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
@@ -173,7 +173,7 @@ render(<TodoList />, document.getElementById("app"));
     

     

         
实际示例

-        

+        

 import TodoList from './todo-list';

 render(<TodoList />, document.body);
         

@@ -186,7 +186,7 @@ render(<TodoList />, document.body);
 

     

         
获取 GitHub 标星数

-        

+        

 // --repl
 export default class Stars extends Component {
     async componentDidMount() {
@@ -208,7 +208,7 @@ render(<Stars repo="preactjs/preact" />, document.getElementById("app"));
     

     

         
实际示例

-        

+        

 import Stars from './stars';

 render(
     <Stars repo="preactjs/preact" />,
diff --git a/package-lock.json b/package-lock.json
index 149dec785..78250401b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "htm": "^3.1.1",
         "magic-string": "^0.25.7",
         "marked": "^0.8.0",
+        "node-html-parser": "^6.1.13",
         "preact": "10.15.1",
         "preact-custom-element": "^4.3.0",
         "preact-iso": "^2.6.3",
@@ -5295,6 +5296,7 @@
       "version": "6.1.13",
       "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-6.1.13.tgz",
       "integrity": "sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==",
+      "license": "MIT",
       "dependencies": {
         "css-select": "^5.1.0",
         "he": "1.2.0"
diff --git a/package.json b/package.json
index 56628fac3..7c4e3d4c5 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "htm": "^3.1.1",
     "magic-string": "^0.25.7",
     "marked": "^0.8.0",
+    "node-html-parser": "^6.1.13",
     "preact": "10.15.1",
     "preact-custom-element": "^4.3.0",
     "preact-iso": "^2.6.3",
diff --git a/plugins/precompile-markdown/index.js b/plugins/precompile-markdown/index.js
index 4bfc82ef4..9cb18b0f0 100644
--- a/plugins/precompile-markdown/index.js
+++ b/plugins/precompile-markdown/index.js
@@ -1,6 +1,9 @@
 import yaml from 'yaml';
 import marked from 'marked';
+import { parse } from 'node-html-parser';
 import { replace } from './gh-emoji/index.js';
+import { Prism } from './prism.js';
+import { textToBase64 } from '../../src/components/controllers/repl/query-encode.js';
 
 /**
  * @param {string} content
@@ -10,8 +13,9 @@ import { replace } from './gh-emoji/index.js';
 export function precompileMarkdown(content, path) {
 	const parsed = parseContent(content, path);
 	const emojified = applyEmojiToContent(parsed);
+	const htmlified = markdownToHTML(emojified);
+	const result = highlightCodeBlocks(htmlified);
 
-	const result = markdownToHTML(emojified);
 	// client only needs `.html` and `.meta` fields
 	delete result.content;
 
@@ -65,6 +69,10 @@ function parseContent(content, path) {
 	};
 }
 
+/**
+ * @param {{ content: string }} data
+ * @returns {{ html: string, content: string }}
+ */
 function markdownToHTML(data) {
 	data.html = marked(data.content);
 	return data;
@@ -142,3 +150,117 @@ function extractTutorialCodeBlocks(markdown) {
 
 	return { markdown, tutorial };
 }
+
+/**
+ * @param {{ html: string, content: string }} data
+ * @returns {{ html: string, content: string }}
+ */
+function highlightCodeBlocks(data) {
+	const doc = parse(data.html, { blockTextElements: { code: true } });
+
+	const codeBlocks = doc.querySelectorAll('pre:has(> code[class])');
+	for (const block of codeBlocks) {
+		const child = block.childNodes[0];
+
+		/**
+		 * Slight hack to facilitate blank lines in code blocks in HTML in markdown, i.e.,
+		 *
+		 * 

+		 *   import TodoList from './todo-list';

+		 *   render(<TodoList />, document.body);
+		 * 

+		 *
+		 * Blank lines are an end condition to the code block so instead we must use `
`
+		 * and switch it back to `\n` for the code content after marked is through with it.
+		 * We only do this on the home/index page at the moment.
+		 */
+		const rawCodeBlockText = unescapeHTML(child.innerText.trim().replace('
', '\n'));
+		const [code, source, runInRepl] = processRepl(rawCodeBlockText);
+
+		const lang = child.getAttribute('class').replace('language-', '');
+
+		Prism.languages[lang] == null
+			// TODO: Bash is the only missing one at the moment
+			? console.warn(`No Prism highlighter for language: ${lang}`)
+			: child.innerHTML = Prism.highlight(code, Prism.languages[lang], lang);
+
+		// TODO: These next lines should be moved to marked but we'd need to bump it to do so.
+		block.insertAdjacentHTML('beforebegin', '
');
+		const container = block.previousSibling;
+		container.appendChild(block);
+		block.setAttribute('class', 'highlight');
+
+		if (runInRepl) {
+			block.insertAdjacentHTML(
+				'afterend',
+				`
+					Run in REPL
+				`
+			);
+		}
+	}
+
+	data.html = doc.toString();
+	return data;
+}
+
+
+/**
+ * Marked escapes HTML entities, which is normally great,
+ * but we want to feed the raw code into Prism for highlighting.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+function unescapeHTML(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '<')
+        .replace(/>/g, '>')
+        .replace(/"/g, '"')
+        .replace(/'/g, "'");
+}
+
+/**
+ * @param {string} code
+ * @returns {[string, string, boolean]}
+ */
+function processRepl(code) {
+	let source = code,
+		runInRepl = false;
+	if (code.startsWith('// --repl')) {
+		runInRepl = true;
+		const idx = code.indexOf('\n');
+		if (idx > -1) {
+			code = code.slice(idx + 1);
+			source = source.slice(idx + 1);
+		}
+
+		const beforeMarker = '// --repl-before';
+		const beforeIdx = code.indexOf(beforeMarker);
+		if (beforeIdx > -1) {
+			const pos = beforeIdx + beforeMarker.length + 1;
+			code = code.slice(pos);
+			// Only replace comment line with newline in source
+			source = source.slice(0, beforeIdx) + '\n' + source.slice(pos);
+		}
+
+		const afterMarker = '// --repl-after';
+		const afterIdx = code.indexOf(afterMarker);
+		if (afterIdx > -1) {
+			code = code.slice(0, afterIdx);
+
+			// Only replace comment line with newline in source
+			// ATTENTION: We cannot reuse the index from `code`
+			// as the content and thereby offsets are different
+			const sourceAfterIdx = source.indexOf(afterMarker);
+			source =
+				source.slice(0, sourceAfterIdx) +
+				'\n' +
+				source.slice(sourceAfterIdx + afterMarker.length + 1) +
+				'\n';
+		}
+	}
+
+	return [code, source, runInRepl];
+}
diff --git a/src/lib/prism.js b/plugins/precompile-markdown/prism.js
similarity index 100%
rename from src/lib/prism.js
rename to plugins/precompile-markdown/prism.js
diff --git a/src/components/code-block/index.jsx b/src/components/code-block/index.jsx
deleted file mode 100644
index 2b2cb0b5e..000000000
--- a/src/components/code-block/index.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useMemo } from 'preact/hooks';
-import { Suspense } from 'preact/compat';
-import { wrap } from 'comlink';
-import { textToBase64 } from '../controllers/repl/query-encode.js';
-import { useResource } from '../../lib/use-resource';
-
-let prismWorker;
-
-/**
- * @param {{ code: string, lang: string }} props
- */
-function HighlightedCode({ code, lang }) {
-	// lazy init to ensure `globalThis.markedWorker` is available w/ prerendering
-	if (!prismWorker) {
-		prismWorker = typeof window === 'undefined'
-			? globalThis.prismWorker
-			: wrap(new Worker(new URL('./prism.worker.js', import.meta.url), { type: 'module' }));
-	}
-
-	const highlighted = useResource(() => prismWorker.highlight(code, lang), [code, lang]);
-
-	const htmlObj = useMemo(() => ({ __html: highlighted }), [highlighted]);
-	return ;
-}
-
-function processRepl(code, repl) {
-	let source = code;
-	if (code.startsWith('// --repl')) {
-		repl = true;
-		const idx = code.indexOf('\n');
-		if (idx > -1) {
-			code = code.slice(idx + 1);
-			source = source.slice(idx + 1);
-		}
-
-		const beforeMarker = '// --repl-before';
-		const beforeIdx = code.indexOf(beforeMarker);
-		if (beforeIdx > -1) {
-			const pos = beforeIdx + beforeMarker.length + 1;
-			code = code.slice(pos);
-			// Only replace comment line with newline in source
-			source = source.slice(0, beforeIdx) + '\n' + source.slice(pos);
-		}
-
-		const afterMarker = '// --repl-after';
-		const afterIdx = code.indexOf(afterMarker);
-		if (afterIdx > -1) {
-			code = code.slice(0, afterIdx);
-
-			// Only replace comment line with newline in source
-			// ATTENTION: We cannot reuse the index from `code`
-			// as the content and thereby offsets are different
-			const sourceAfterIdx = source.indexOf(afterMarker);
-			source =
-				source.slice(0, sourceAfterIdx) +
-				'\n' +
-				source.slice(sourceAfterIdx + afterMarker.length + 1) +
-				'\n';
-		}
-	}
-
-	return [code, source, repl];
-}
-
-/**
- * @param {{ code: string, lang: string, repl?: string }} props
- */
-function HighlightedCodeBlock({ code, lang }) {
-	let repl = false,
-		source = code;
-
-	[code, source, repl] = processRepl(source, repl);
-
-	// Show unhighlighted code as a fallback until we're ready
-	const fallback = {code};
-
-	return (
-		

-			
-				
-					
-				
-			

-			{repl && (
-				
-					Run in REPL
-				
-			)}
-		

-	);
-}
-
-const getChild = props =>
-	Array.isArray(props.children) ? props.children[0] : props.children;
-
-const CodeBlock = props => {
-	let child = getChild(props);
-	let isHighlight = child && child.type === 'code';
-
-	if (isHighlight) {
-		const lang = (child.props.class || '').match(
-			/(?:lang|language)-([a-z]+)/
-		)[1];
-		// Slight hack to facilitate multi-line code blocks, w/ blank lines, in HTML in Markdown.
-		// Blank lines are an end condition to the code block, so we instead use a `
`
-		// which then requires a conversion back to `\n` for the code content.
-		const children = child.props.children.map(el => el.type == 'br' ? '\n' : el).join('');
-		const code = children.replace(/(^\s+|\s+$)/g, '');
-		return ;
-	}
-
-	return 
;
-};
-
-export default CodeBlock;
diff --git a/src/components/code-block/prism.worker.js b/src/components/code-block/prism.worker.js
deleted file mode 100644
index d631525a2..000000000
--- a/src/components/code-block/prism.worker.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Prism } from '../../lib/prism.js';
-import { expose } from 'comlink';
-
-export function highlight(code, lang) {
-	if (lang == 'sh') lang = 'bash';
-	if (Prism.languages[lang] != null) {
-		return Prism.highlight(code, Prism.languages[lang], lang);
-	}
-	return code;
-}
-
-if (typeof process !== 'object') {
-	expose({ highlight });
-}
diff --git a/src/components/content-region/index.jsx b/src/components/content-region/index.jsx
index 817d0915b..ad78a0ae0 100644
--- a/src/components/content-region/index.jsx
+++ b/src/components/content-region/index.jsx
@@ -8,10 +8,11 @@ import { prefetchContent } from '../../lib/use-resource';
 
 const COMPONENTS = {
 	...widgets,
-	pre: widgets.CodeBlock,
+	// TODO: Move to marked
 	img(props) {
 		return ;
 	},
+	// TODO: Move to marked
 	a(props) {
 		if (!props.target && props.href.match(/:\/\//)) {
 			props.target = '_blank';
diff --git a/src/components/widgets.js b/src/components/widgets.js
index 55004ac11..d5f25ac7b 100644
--- a/src/components/widgets.js
+++ b/src/components/widgets.js
@@ -1,4 +1,3 @@
-import CodeBlock from './code-block';
 import Jumbotron from './jumbotron';
 import GithubStars from './github-stars';
 import TodoList from './todo-list';
@@ -12,7 +11,6 @@ import Branding from './branding';
 export default {
 	Toc,
 	BlogOverview,
-	CodeBlock,
 	Jumbotron,
 	GithubStars,
 	TodoList,
diff --git a/src/index.jsx b/src/index.jsx
index 9fa8e1b11..3a4fd868d 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -31,8 +31,6 @@ let initialized = false,
 	};
 export async function prerender() {
 	const init = async () => {
-		globalThis.prismWorker = await import('./components/code-block/prism.worker.js');
-
 		// DOMParser polyfill for `preact-markup`
 		const { DOMParser } = await import('@xmldom/xmldom');
 		globalThis.DOMParser = DOMParser;