Tweak formatting

Author: javiereguiluz

frontend/encore/advanced-config.rst

@@ -103,15 +103,13 @@ state of the current configuration to build a new one:
 When running Encore, both configurations will be built in parallel. If you
 prefer to build configs separately, pass the ``--config-name`` option:
 
-.. configuration-block::
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn encore dev --config-name firstConfig
 
-        $ yarn encore dev --config-name firstConfig
-
-    .. code-block:: terminal
-
-        $ npm run dev -- --config-name firstConfig
+    # if you use the npm package manager
+    $ npm run dev -- --config-name firstConfig
 
 Next, define the output directories of each build:
 

frontend/encore/bootstrap.rst

@@ -5,15 +5,13 @@ This article explains how to install and integrate the `Bootstrap CSS framework`
 in your Symfony application using :doc:`Webpack Encore </frontend>`.
 First, to be able to customize things further, we'll install ``bootstrap``:
 
-.. configuration-block::
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn add bootstrap --dev
 
-        $ yarn add bootstrap --dev
-
-    .. code-block:: terminal
-
-        $ npm install bootstrap --save-dev
+    # if you use the npm package manager
+    $ npm install bootstrap --save-dev
 
 Importing Bootstrap Styles
 --------------------------
@@ -46,17 +44,15 @@ Importing Bootstrap JavaScript
 First, install the JavaScript dependencies required by the Bootstrap version
 used in your application:
 
-.. configuration-block::
-
-    .. code-block:: terminal
-
-        // jQuery is only required in versions prior to Bootstrap 5
-        $ yarn add jquery @popperjs/core --dev
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    # (jQuery is only required in versions prior to Bootstrap 5)
+    $ yarn add jquery @popperjs/core --dev
 
-        // jQuery is only required in versions prior to Bootstrap 5
-        $ npm install jquery @popperjs/core --save-dev
+    # if you use the npm package manager
+    # (jQuery is only required in versions prior to Bootstrap 5)
+    $ npm install jquery @popperjs/core --save-dev
 
 Now, require bootstrap from any of your JavaScript files:
 

frontend/encore/dev-server.rst

@@ -4,15 +4,13 @@ Using webpack-dev-server and HMR
 While developing, instead of using ``yarn encore dev --watch``, you can use the
 `webpack-dev-server`_:
 
-.. configuration-block::
-
-    .. code-block:: terminal
-
-        $ yarn encore dev-server
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn encore dev-server
 
-        $ npm run dev-server
+    # if you use the npm package manager
+    $ npm run dev-server
 
 This builds and serves the front-end assets from a new server. This server runs at
 ``localhost:8080`` by default, meaning your build assets are available at ``localhost:8080/build``.
@@ -27,15 +25,13 @@ you're done: the paths in your templates will automatically point to the dev ser
 The ``dev-server`` command supports all the options defined by `webpack-dev-server`_.
 You can set these options via command line options:
 
-.. configuration-block::
-
-    .. code-block:: terminal
-
-        $ yarn encore dev-server --https --port 9000
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn encore dev-server --https --port 9000
 
-        $ npm run dev-server -- --https --port 9000
+    # if you use the npm package manager
+    $ npm run dev-server -- --https --port 9000
 
 You can also set these options using the ``Encore.configureDevServerOptions()``
 method in your ``webpack.config.js`` file:

frontend/encore/installation.rst

@@ -11,17 +11,15 @@ Installing Encore in Symfony Applications
 Run these commands to install both the PHP and JavaScript dependencies in your
 project:
 
-.. configuration-block::
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    $ composer require symfony/webpack-encore-bundle
 
-        $ composer require symfony/webpack-encore-bundle
-        $ yarn install
+    # if you use the Yarn package manager
+    $ yarn install
 
-    .. code-block:: terminal
-
-        $ composer require symfony/webpack-encore-bundle
-        $ npm install
+    # if you use the npm package manager
+    $ npm install
 
 If you are using :ref:`Symfony Flex <symfony-flex>`, this will install and enable
 the `WebpackEncoreBundle`_, create the ``assets/`` directory, add a
@@ -37,15 +35,13 @@ Installing Encore in non Symfony Applications
 
 Install Encore into your project via Yarn:
 
-.. configuration-block::
-
-    .. code-block:: terminal
-
-        $ yarn add @symfony/webpack-encore --dev
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn add @symfony/webpack-encore --dev
 
-        $ npm install @symfony/webpack-encore --save-dev
+    # if you use the npm package manager
+    $ npm install @symfony/webpack-encore --save-dev
 
 This command creates (or modifies) a ``package.json`` file and downloads
 dependencies into a ``node_modules/`` directory. Yarn also creates/updates a

frontend/encore/postcss.rst

@@ -21,15 +21,13 @@ Encore, you're done!
 
 Next, download any plugins you want, like ``autoprefixer``:
 
-.. configuration-block::
+.. code-block:: terminal
 
-  .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn add autoprefixer --dev
 
-      $ yarn add autoprefixer --dev
-
-  .. code-block:: terminal
-
-      $ npm install autoprefixer --save-dev
+    # if you use the npm package manager
+    $ npm install autoprefixer --save-dev
 
 Next, create a ``postcss.config.js`` file at the root of your project:
 

frontend/encore/reactjs.rst

@@ -8,16 +8,13 @@ Enabling React.js
 
 Using React? First add some dependencies with Yarn:
 
+.. code-block:: terminal
 
-.. configuration-block::
+    # if you use the Yarn package manager
+    $ yarn add react react-dom prop-types
 
-    .. code-block:: terminal
-
-        $ yarn add react react-dom prop-types
-
-    .. code-block:: terminal
-
-        $ npm install react react-dom prop-types --save
+    # if you use the npm package manager
+    $ npm install react react-dom prop-types --save
 
 Enable react in your ``webpack.config.js``:
 

frontend/encore/simple-example.rst

@@ -57,31 +57,34 @@ together and - thanks to the first ``app`` argument - output final ``app.js`` an
 
 .. _encore-build-assets:
 
-To build the assets, run:
+To build the assets, run the following if you use the Yarn package manager:
 
-.. configuration-block::
+.. code-block:: terminal
+
+    # compile assets once
+    $ yarn encore dev
 
-    .. code-block:: terminal
+    # or, recompile assets automatically when files change
+    $ yarn encore dev --watch
 
-        # compile assets once
-        $ yarn encore dev
+    # on deploy, create a production build
+    $ yarn encore production
 
-        # or, recompile assets automatically when files change
-        $ yarn encore dev --watch
+    # if you use the npm package manager
+    $ npm install react react-dom prop-types --save
 
-        # on deploy, create a production build
-        $ yarn encore production
+If you use the npm package manager, run the following commands instead:
 
-    .. code-block:: terminal
+.. code-block:: terminal
 
-        # compile assets once
-        $ npm run dev
+    # compile assets once
+    $ npm run dev
 
-        # or, recompile assets automatically when files change
-        $ npm run watch
+    # or, recompile assets automatically when files change
+    $ npm run watch
 
-        # on deploy, create a production build
-        $ npm run build
+    # on deploy, create a production build
+    $ npm run build
 
 .. note::
 
@@ -166,15 +169,13 @@ files. First, create a file that exports a function:
 
 We'll use jQuery to print this message on the page. Install it via:
 
-.. configuration-block::
-
-    .. code-block:: terminal
-
-        $ yarn add jquery --dev
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn add jquery --dev
 
-        $ npm install jquery --save-dev
+    # if you use the npm package manager
+    $ npm install jquery --save-dev
 
 Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
 
@@ -264,16 +265,13 @@ Next, use ``addEntry()`` to tell Webpack to read these two new files when it bui
 And because you just changed the ``webpack.config.js`` file, make sure to stop
 and restart Encore:
 
+.. code-block:: terminal
 
-.. configuration-block::
-
-    .. code-block:: terminal
-
-        $ yarn run encore dev --watch
-
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn run encore dev --watch
 
-        $ npm run watch
+    # if you use the npm package manager
+    $ npm run watch
 
 Webpack will now output a new ``checkout.js`` file and a new ``account.js`` file
 in your build directory. And, if any of those files require/import CSS, Webpack
@@ -340,17 +338,15 @@ Encore. When you do, you'll see an error!
 Encore supports many features. But, instead of forcing all of them on you, when
 you need a feature, Encore will tell you what you need to install. Run:
 
-.. configuration-block::
-
-    .. code-block:: terminal
-
-        $ yarn add sass-loader@^10.0.0 sass --dev
-        $ yarn encore dev --watch
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn add sass-loader@^10.0.0 sass --dev
+    $ yarn encore dev --watch
 
-        $ npm install sass-loader@^10.0.0 sass --save-dev
-        $ npm run watch
+    # if you use the npm package manager
+    $ npm install sass-loader@^10.0.0 sass --save-dev
+    $ npm run watch
 
 Your app now supports Sass. Encore also supports LESS and Stylus. See
 :doc:`/frontend/encore/css-preprocessors`.

frontend/encore/url-loader.rst

@@ -8,15 +8,13 @@ generated CSS files.
 Webpack Encore provides this feature via Webpack's `URL Loader`_ plugin, but
 it's disabled by default. First, add the URL loader to your project:
 
-.. configuration-block::
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn add url-loader --dev
 
-        $ yarn add url-loader --dev
-
-    .. code-block:: terminal
-
-        $ npm install url-loader --save-dev
+    # if you use the npm package manager
+    $ npm install url-loader --save-dev
 
 Then enable it in your ``webpack.config.js``:
 

frontend/encore/vuejs.rst

@@ -35,15 +35,13 @@ The ``vue-loader`` supports hot module replacement: just update your code and wa
 your Vue.js app update *without* a browser refresh! To activate it, use the
 ``dev-server`` with the ``--hot`` option:
 
-.. configuration-block::
+.. code-block:: terminal
 
-    .. code-block:: terminal
+    # if you use the Yarn package manager
+    $ yarn encore dev-server --hot
 
-        $ yarn encore dev-server --hot
-
-    .. code-block:: terminal
-
-        $ npm run dev-server -- --hot
+    # if you use the npm package manager
+    $ npm run dev-server -- --hot
 
 That's it! Change one of your ``.vue`` files and watch your browser update. But
 note: this does *not* currently work for *style* changes in a ``.vue`` file. Seeing