From 314808aa3e43af28a61f37d9c5197053a123468f Mon Sep 17 00:00:00 2001
From: Antonio <zolotuhin87@gmail.com>
Date: Fri, 25 Mar 2022 20:21:21 +0200
Subject: [PATCH] docs: refactored installation to become quickstart guide

---
 docs/installation.md |  68 --------------------------
 docs/quickstart.md   | 113 +++++++++++++++++++++++++++++++++++++++++++
 mkdocs.yml           |   7 ++-
 3 files changed, 118 insertions(+), 70 deletions(-)
 delete mode 100644 docs/installation.md
 create mode 100644 docs/quickstart.md

diff --git a/docs/installation.md b/docs/installation.md
deleted file mode 100644
index 6c08b96..0000000
--- a/docs/installation.md
+++ /dev/null
@@ -1,68 +0,0 @@
-## Packages
-
-### npm (server-side)
-
-```
-npm install showdown
-```
-
-### Bower
-
-```
-bower install showdown
-```
-
-### NuGet
-
-```
-PM> Install-Package showdownjs
-```
-
-More information about the package you can find on the [NuGet website](https://www.nuget.org/packages/showdownjs/).
-
-### Tarball
-
-You can download the latest tarball directly from [releases][releases].
-
-## CDN
-
-You can also use one of several CDNs available:
-
-### jsDelivr
-
-```
-https://cdn.jsdelivr.net/npm/showdown@<version>/dist/showdown.min.js
-```
-
-[Showndown page on jsDelivr](https://www.jsdelivr.com/package/npm/showdown)
-
-### cdnjs
-
-```
-https://cdnjs.cloudflare.com/ajax/libs/showdown/<version>/showdown.min.js
-```
-
-[Showndown page on cdnjs](https://cdnjs.com/libraries/showdown)
-
-### unpkg
-
-```
-https://unpkg.com/showdown/dist/showdown.min.js
-```
-
-[Showndown page on unpkg](https://unpkg.com/browse/showdown@latest/)
-
-!!! note ""
-    Replace `<version>` with an actual full length version you're interested in. For example, `2.0.3`.
-
-## Previous versions
-
-If you're looking for Showdown prior to version 1.0.0, you can find them in the [legacy branch][legacy-branch].
-
-## Changelog
-
-The full changelog is available [here][changelog].
-
-[legacy-branch]: https://github.com/showdownjs/showdown/tree/legacy
-[releases]: https://github.com/showdownjs/showdown/releases
-[changelog]: https://github.com/showdownjs/showdown/blob/master/CHANGELOG.md
\ No newline at end of file
diff --git a/docs/quickstart.md b/docs/quickstart.md
new file mode 100644
index 0000000..30e6f86
--- /dev/null
+++ b/docs/quickstart.md
@@ -0,0 +1,113 @@
+To quickstart with Showdown, install it as a package (for server-side) or include it to your browser (client-side) via CDN:
+
+## Installation
+
+### Server-side
+
+=== "npm"
+
+    ```
+    npm install showdown
+    ```
+
+=== "bower"
+
+    ```
+    bower install showdown
+    ```
+
+=== "NuGet"
+
+    ```
+    PM> Install-Package showdownjs
+    ```
+
+    More information about the package you can find on the [NuGet website](https://www.nuget.org/packages/showdownjs/).
+
+### Client-side
+
+=== "jsDelivr"
+
+    ```
+    https://cdn.jsdelivr.net/npm/showdown@<version>/dist/showdown.min.js
+    ```
+    
+    [Showndown page on jsDelivr](https://www.jsdelivr.com/package/npm/showdown)
+
+=== "cdnjs"
+
+    ```
+    https://cdnjs.cloudflare.com/ajax/libs/showdown/<version>/showdown.min.js
+    ```
+
+    [Showndown page on cdnjs](https://cdnjs.com/libraries/showdown)
+
+=== "unpkg"
+
+    ```
+    https://unpkg.com/showdown/dist/showdown.min.js
+    ```
+
+    [Showndown page on unpkg](https://unpkg.com/browse/showdown@latest/)
+
+!!! note ""
+    Replace `<version>` with an actual full length version you're interested in. For example, `2.0.3`.
+
+## Usage
+
+Once installed, you can use Showndown according to the chosen method:
+
+### Server-side
+
+!!! example "Node.js"
+
+    === "code"
+
+        ```js
+        var showdown  = require('showdown'),
+            converter = new showdown.Converter(),
+            text      = '# hello, markdown!',
+            html      = converter.makeHtml(text);
+        ```
+    
+    === "output"
+
+        ```html
+        <h1 id="hellomarkdown">hello, markdown!</h1>
+        ```
+
+### Client-side
+
+!!! example "Browser"
+
+    === "code"
+
+        ```js
+        var converter = new showdown.Converter(),
+            text      = '# hello, markdown!',
+            html      = converter.makeHtml(text);
+        ```
+
+    === "output"
+
+        ```html
+        <h1 id="hellomarkdown">hello, markdown!</h1>
+        ```
+
+## Other installation methods
+
+### Tarball
+
+You can download the latest tarball directly from [releases][releases].
+
+## Previous versions
+
+If you're looking for Showdown prior to version 1.0.0, you can find them in the [legacy branch][legacy-branch].
+
+## Changelog
+
+The full changelog is available [here][changelog].
+
+[legacy-branch]: https://github.com/showdownjs/showdown/tree/legacy
+[releases]: https://github.com/showdownjs/showdown/releases
+[changelog]: https://github.com/showdownjs/showdown/blob/master/CHANGELOG.md
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 034dc80..1d9a846 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -15,6 +15,9 @@ theme:
 
 markdown_extensions:
   - admonition
+  - pymdownx.superfences
+  - pymdownx.tabbed:
+      alternate_style: true 
   - pymdownx.emoji:
       emoji_index: !!python/name:materialx.emoji.twemoji
       emoji_generator: !!python/name:materialx.emoji.to_svg
@@ -27,6 +30,6 @@ nav:
   - Home:
     - Introduction: index.md
     - Donations: donations.md
-  - Installation:
-    - Installation: installation.md
+  - Quickstart:
+    - Quickstart: quickstart.md
     - Compatibility: compatibility.md
\ No newline at end of file