Add details shortcode

4 files changed, 35 insertions, 30 deletions

diff --git a/website/content/setup/index.md b/website/content/setup/index.md
index 14984a6..db4ed40 100644
--- a/website/content/setup/index.md
+++ b/website/content/setup/index.md
@@ -6,17 +6,16 @@ title = "Setup"
 
 ## Installing Rust
 
-Before installing Rustlings, you need to have the **latest version of Rust** installed.
-Visit [www.rust-lang.org/tools/install](https://www.rust-lang.org/tools/install) for further instructions on installing Rust.
+Before installing Rustlings, you must have the **latest version of Rust** installed.
+Visit [www.rust-lang.org/tools/install](https://www.rust-lang.org/tools/install) for further instructions.
 This will also install _Cargo_, Rust's package/project manager.
 
-> 🐧 If you are on Linux, make sure you have installed `gcc` (for a linker).
+> 🐧 If you are on Linux, make sure you have `gcc` installed (_for a linker_).
 >
-> Deb: `sudo apt install gcc`
->
-> Dnf: `sudo dnf install gcc`
+> Debian: `sudo apt install gcc`\
+> Fedora: `sudo dnf install gcc`
 
-> 🍎 If you are on MacOS, make sure you have installed Xcode and its developer tools by running `xcode-select --install`.
+> 🍎 If you are on MacOS, make sure you have _Xcode and its developer tools_ installed: `xcode-select --install`
 
 ## Installing Rustlings
 
@@ -26,14 +25,13 @@ The following command will download and compile Rustlings:
 cargo install rustlings
 ```
 
-<details>
-<summary><strong>If the installation fails…</strong> (<em>click to expand</em>)</summary>
+{% details(summary="If the installation fails…") %}
 
-> - Make sure you have the latest Rust version by running `rustup update`
-> - Try adding the `--locked` flag: `cargo install rustlings --locked`
-> - Otherwise, please [report the issue](https://github.com/rust-lang/rustlings/issues/new)
+- Make sure you have the latest Rust version by running `rustup update`
+- Try adding the `--locked` flag: `cargo install rustlings --locked`
+- Otherwise, please [report the issue](https://github.com/rust-lang/rustlings/issues/new)
 
-</details>
+{% end %}
 
 ## Initialization
 
@@ -43,18 +41,17 @@ After installing Rustlings, run the following command to initialize the `rustlin
 rustlings init
 ```
 
-<details>
-<summary><strong>If the command <code>rustlings</code> can't be found…</strong> (<em>click to expand</em>)</summary>
+{% details(summary="If the command <code>rustlings</code> can't be found…") %}
 
-> You are probably using Linux and installed Rust using your package manager.
->
-> Cargo installs binaries to the directory `~/.cargo/bin`.
-> Sadly, package managers often don't add `~/.cargo/bin` to your `PATH` environment variable.
->
-> - Either add `~/.cargo/bin` manually to `PATH`
-> - Or uninstall Rust from the package manager and [install it using the official way with `rustup`](https://www.rust-lang.org/tools/install)
+You are probably using Linux and installed Rust using your package manager.
+
+Cargo installs binaries to the directory `~/.cargo/bin`.
+Sadly, package managers often don't add `~/.cargo/bin` to your `PATH` environment variable.
+
+- Either add `~/.cargo/bin` manually to `PATH`
+- Or uninstall Rust from the package manager and [install it using the official way with `rustup`](https://www.rust-lang.org/tools/install)
 
-</details>
+{% end %}
 
 Now, go into the newly initialized directory and launch Rustlings for further instructions on getting started with the exercises:
 
diff --git a/website/content/usage/index.md b/website/content/usage/index.md
index 7c8b0dd..eecb7d2 100644
--- a/website/content/usage/index.md
+++ b/website/content/usage/index.md
@@ -23,14 +23,13 @@ After the [initialization](@/setup/index.md#initialization), Rustlings can be la
 This will start the _watch mode_ which walks you through the exercises in a predefined order (what we think is best for newcomers).
 It will rerun the current exercise automatically every time you change the exercise's file in the `exercises/` directory.
 
-<details>
-<summary><strong>If detecting file changes in the <code>exercises/</code> directory fails…</strong> (<em>click to expand</em>)</summary>
+{% details(summary="If detecting file changes in the <code>exercises/</code> directory fails…") %}
 
-> You can add the **`--manual-run`** flag (`rustlings --manual-run`) to manually rerun the current exercise by entering `r` in the watch mode.
->
-> Please [report the issue](https://github.com/rust-lang/rustlings/issues/new) with some information about your operating system and whether you run Rustlings in a container or virtual machine (e.g. WSL).
+You can add the **`--manual-run`** flag (`rustlings --manual-run`) to manually rerun the current exercise by entering `r` in the watch mode.
 
-</details>
+Please [report the issue](https://github.com/rust-lang/rustlings/issues/new) with some information about your operating system and whether you run Rustlings in a container or virtual machine (e.g. WSL).
+
+{% end %}
 
 ## Exercise List
 
diff --git a/website/input.css b/website/input.css
index 3dd5501..b253675 100644
--- a/website/input.css
+++ b/website/input.css
@@ -41,7 +41,7 @@
     @apply md:w-3/4 lg:w-3/5;
   }
   blockquote {
-    @apply px-3 pt-2 pb-0.5 my-4 border-s-4 border-white/80 bg-white/7 rounded-sm italic;
+    @apply px-3 pt-2 pb-0.5 my-4 border-s-4 border-white/80 bg-white/7 rounded-sm;
   }
 
   pre {
diff --git a/website/templates/shortcodes/details.html b/website/templates/shortcodes/details.html
new file mode 100644
index 0000000..c32d7c8
--- /dev/null
+++ b/website/templates/shortcodes/details.html
@@ -0,0 +1,9 @@
+<details>
+    <summary>
+        <strong>{{ summary | safe }}</strong> (<em>click to expand</em>)
+    </summary>
+
+    <blockquote>
+        {{ body | markdown | safe }}
+    </blockquote>
+</details>