User guide, installation as module: improvements

userguide/content/en/docs/Get started/Docsy-As-Module/example-site-as-template.md

@@ -15,7 +15,7 @@ If you prefer to create a site from scratch, follow the instructions in Start a
 
 At your Unix shell or Windows command line, run the following command:
 
-```
+```bash
 git clone https://github.com/google/docsy-example.git my-new-site
 cd  my-new-site
 hugo server
@@ -38,7 +38,7 @@ There are two different routes to get a local clone of the example site:
 
 If you want  to use a remote repository other than GitHub (such as [GitLab](https://gitlab.com), [BitBucket](https://bitbucket.org/), [AWS CodeCommit](https://aws.amazon.com/codecommit/), [Gitea](https://gitea.io/)) or if you don't want a remote repo at all, simply make a local working copy of the example site directly using `git clone`. As last parameter, give your chosen local repo name (here: `my-new-site`):
 
-```
+```bash
 git clone https://github.com/google/docsy-example.git my-new-site
 ```
 
@@ -54,23 +54,22 @@ As the Docsy example site repo is a [template repository](https://github.blog/20
 
 1. Make a local copy of your newly created GitHub repository by using `git clone`, giving your repo's web URL as last parameter.
 
-    <pre>
-    git clone <em>https://github.com/me-at-github/my-new-site.git</em>
-    </pre>
+    ```bash
+    git clone https://github.com/me-at-github/my-new-site.git
+    ```
 
-Now you can make local edits and test your copied site locally with Hugo.
 {{% alert title="Note" color="primary" %}}
 Depending on your environment you may need to tweak the [module top level settings](https://github.com/google/docsy-example/blob/1c7f7e300c90cd690ca5be66b43fe58713bb21c9/config.toml#L221-L228) inside your `config.toml` slightly, for example by adding a proxy to use when downloading remote modules.
 You can find details of what these configuration settings do in the [Hugo modules documentation](https://gohugo.io/hugo-modules/configuration/#module-config-top-level). 
 {{% /alert %}}
 
-Once your site is up and running, you can edit your own versions of the site’s source files.
+Now you can make local edits and test your copied site locally with Hugo.
 
 ### Preview your site
 
 To build and preview your site locally, switch to the root of your cloned project and use hugo's `server` command:
 
-```
+```bash
 cd my-new-site
 hugo server
 ```

userguide/content/en/docs/Get started/Docsy-As-Module/installation-prerequisites.md

@@ -21,7 +21,7 @@ Be careful using `sudo apt-get install hugo`, as it [doesn't get you the `extend
 
 If you've already installed Hugo, check your version:
 
-```
+```bash
 hugo version
 ```
 If the result is `v0.73` or earlier, or if you don't see `Extended`, you'll need to install the latest version. You can see a complete list of Linux installation options in [Install Hugo](https://gohugo.io/getting-started/installing/#linux). The following shows you how to install Hugo from the release page:
@@ -32,17 +32,23 @@ If the result is `v0.73` or earlier, or if you don't see `Extended`, you'll need
 3.  Download the latest extended version (`hugo_extended_0.9X_Linux-64bit.tar.gz`).
 4.  Create a new directory:
 
-        mkdir hugo
+    ```bash
+    mkdir hugo
+    ```
 
 5.  Extract the files you downloaded to `hugo`.
 
 6.  Switch to your new directory:
 
-        cd hugo
+    ```bash
+    cd hugo
+    ```
 
 7.  Install Hugo:
 
-        sudo install hugo /usr/bin
+    ```bash
+    sudo install hugo /usr/bin
+    ```
 
 ### On macOS
 
@@ -52,7 +58,7 @@ Install Hugo using [Brew](https://gohugo.io/getting-started/installing/#homebrew
 
 You can install Hugo as an `npm` module using [`hugo-bin`](https://www.npmjs.com/package/hugo-bin). This adds `hugo-bin` to your `node_modules` folder and adds the dependency to your `package.json` file.  To install the extended version of Hugo:
 
-```
+```bash
 npm install hugo-extended --save-dev
 ```
 
@@ -62,7 +68,7 @@ See the [`hugo-bin` documentation](https://www.npmjs.com/package/hugo-bin) for u
 
 Hugo's commands for module management require that the Go programming language is installed on your system. Check whether `go` is already installed:
 
-```
+```bash
 $ go version
 go version go1.17.6 windows/amd64
 ```
@@ -76,7 +82,7 @@ If the `go` language is not installed on your system yet or if you need to upgra
 
 Hugo's commands for module management require that the `git` client is installed on your system. Check whether `git` is already present in your system:
 
-```
+```bash
 git version
 git version 2.35.1.windows.1
 ```
@@ -87,14 +93,14 @@ If no `git` client is installed on your system yet, go to the [Git website](http
 
 To build or update your site's CSS resources, you also need [`PostCSS`](https://postcss.org/) to create the final assets. If you need to install it, you must have a recent version of [NodeJS](https://nodejs.org/en/) installed on your machine so you can use `npm`, the Node package manager. By default `npm` installs tools under the directory where you run [`npm install`](https://docs.npmjs.com/cli/v6/commands/npm-install#description):
 
-```
+```bash
 npm install -D autoprefixer
 npm install -D postcss-cli
 ```
 
 Starting in [version 8 of `postcss-cli`](https://github.com/postcss/postcss-cli/blob/master/CHANGELOG.md), you must also separately install `postcss`:
 
-```
+```bash
 npm install -D postcss
 ```
 
@@ -106,4 +112,3 @@ With all prerequisites installed, choose how to start off with your new Hugo sit
 
 * [Start with a prepopulated site (for beginners)](/docs/get-started/docsy-as-module/example-site-as-template/)
 * [Start site from scratch (for experts)](/docs/get-started/docsy-as-module/start-from-scratch/)
-

userguide/content/en/docs/Get started/Docsy-As-Module/start-from-scratch.md

@@ -16,7 +16,7 @@ These instructions give you a minimum file structure for your site project only,
 At your command prompt, run the following:
 
 {{< tabpane >}}
-{{< tab header="Unix shell" >}}
+{{< tab header="Unix shell"  lang="Bash" >}}
 hugo new site my-new-site
 cd  my-new-site
 hugo mod init github.com/me/my-new-site
@@ -31,7 +31,7 @@ path = "github.com/google/docsy/dependencies"
 EOL
 hugo server
 {{< /tab >}}
-{{< tab header="Windows command line" >}}
+{{< tab header="Windows command line" lang="Batchfile" >}}
 hugo new site my-new-site
 cd  my-new-site
 hugo mod init github.com/me/my-new-site
@@ -62,7 +62,7 @@ Specifying the [Docsy theme](https://github.com/google/docsy) as Hugo Module for
 
 To create a new Hugo site project and then add the Docs theme as a submodule, run the following commands from your project's root directory.
 
-```shell
+```bash
 hugo new site my-new-site
 cd  my-new-site
 ```
@@ -73,15 +73,15 @@ This will create a minimal site structure, containing the folders `archetypes`,
 
 Only sites that are Hugo Modules themselves can import other modules. To turn your site into a Hugo Module, run the following commands in your newly created site directory:
 
-```
+```bash
 hugo mod init github.com/me/my-new-site
 ```
 
 This creates two new files, `go.mod` for the module definitions and `go.sum` which holds the checksums for module verification.
 
 Next declare the Docsy theme module as a dependency for your site.
 
-```
+```bash
 hugo mod get github.com/google/docsy@v0.2.0
 ```
 
@@ -92,7 +92,7 @@ This command adds the `docsy` theme module to your definition file `go.mod`.
 Add the settings in the following snippet at the end of your site configuration file (default: `config.toml`) and save the file.
 
 {{< tabpane >}}
-{{< tab header="config.toml" >}}
+{{< tab header="config.toml"  lang="toml" >}}
 [module]
   proxy = "direct"
   # uncomment line below for temporary local development of module
@@ -107,7 +107,7 @@ Add the settings in the following snippet at the end of your site configuration
     path = "github.com/google/docsy/dependencies"
     disable = false
 {{< /tab >}}
-{{< tab header="config.yaml" >}}
+{{< tab header="config.yaml" lang="yaml" >}}
 module:
   proxy: direct
   hugoVersion:
@@ -120,7 +120,7 @@ module:
     - path: github.com/google/docsy/dependencies
       disable: false
 {{< /tab >}}
-{{< tab header="config.json" >}}
+{{< tab header="config.json"  lang="yaml" >}}
 {
   "module": {
     "proxy": "direct",
@@ -150,7 +150,7 @@ Depending on your environment you may need to tweak them slightly, for example b
 
 To build and preview your site locally:
 
-```
+```bash
 hugo server
 ```
 

userguide/content/en/docs/Updating/Convert-site-to-module.md

@@ -11,7 +11,7 @@ description: >
 Run the following from the command line:
 
 {{< tabpane >}}
-{{< tab header="Unix shell" >}}
+{{< tab header="Unix shell" lang="Bash" >}}
 cd /path/to/my-existing-site
 hugo mod init github.com/me-at-github/my-existing-site
 hugo mod get github.com/google/docsy@v0.2.0
@@ -26,7 +26,7 @@ path = "github.com/google/docsy/dependencies"
 EOL
 hugo server
 {{< /tab >}}
-{{< tab header="Windows command line" >}}
+{{< tab header="Windows command line" lang="Batchfile" >}}
 cd  my-existing-site
 hugo mod init github.com/me-at-github/my-existing-site
 hugo mod get github.com/google/docsy@v0.2.0
@@ -54,44 +54,65 @@ hugo server
 
 At the command prompt, change to the root directory of your existing site.
 
-```
+```bash
 cd /path/to/my-existing-site
 ```
 
 Only sites that are Hugo Modules themselves can import other Hugo Modules. Turn your existing site into a Hugo Module by running the following command from your site directory, replacing `github.com/me/my-existing-site` with your site repository:
 
-```
+```bash
 hugo mod init github.com/me/my-existing-site
 ```
 
 This creates two new files, `go.mod` for the module definitions and `go.sum` which holds the checksums for module verification.
 
 Next declare the Docsy theme module as a dependency for your site.
 
-```
+```bash
 hugo mod get github.com/google/docsy@v0.2.0
 ```
 
 This command adds the `docsy` theme module to your definition file `go.mod`.
 
 ### Update your config file
 
-In your `config.toml` file, update the theme setting to use Hugo Modules. Find the following line:
+In your `config.toml`/`config.yaml`/`config.json` file, update the theme setting to use Hugo Modules. Find the following line:
 
-```
+{{< tabpane >}}
+{{< tab header="toml" lang="toml" >}}
 theme = ["docsy"]
-```
+{{< /tab >}}
+{{< tab header="yaml" lang="yaml" >}}
+theme: docsy
+{{< /tab >}}
+{{< tab header="json"  lang="json" >}}
+"theme": "docsy"
+{{< /tab >}}
+{{< /tabpane >}}
 
 Change this line to:
 
-```
+{{< tabpane >}}
+{{< tab header="toml" lang="toml" >}}
 theme = ["github.com/google/docsy", "github.com/google/docsy/dependencies"]
-```
+{{< /tab >}}
+{{< tab header="yaml" lang="yaml" >}}
+theme:
+  - github.com/google/docsy
+  - github.com/google/docsy/dependencies
+{{< /tab >}}
+{{< tab header="json"  lang="json" >}}
+"theme": [
+  "github.com/google/docsy",
+  "github.com/google/docsy/dependencies"
+]
+{{< /tab >}}
+{{< /tabpane >}}
 
 Alternatively, you can omit this line altogether and replace it with the settings given in the following snippet:
 
 {{< tabpane >}}
-{{< tab header="config.toml" >}}
+{{< tab header="toml" lang="toml" >}}
 [module]
   proxy = "direct"
   # uncomment line below for temporary local development of module
@@ -106,7 +127,7 @@ Alternatively, you can omit this line altogether and replace it with the setting
     path = "github.com/google/docsy/dependencies"
     disable = false
 {{< /tab >}}
-{{< tab header="config.yaml" >}}
+{{< tab header="yaml" lang="yaml" >}}
 module:
   proxy: direct
   hugoVersion:
@@ -119,7 +140,7 @@ module:
     - path: github.com/google/docsy/dependencies
       disable: false
 {{< /tab >}}
-{{< tab header="config.json" >}}
+{{< tab header="json" lang="json" >}}
 {
   "module": {
     "proxy": "direct",
@@ -153,7 +174,7 @@ If you have a multi language installation, please make sure that the section `[l
 
 To make sure that your configuration settings are correct, run the command `hugo mod graph` which prints a module dependency graph:
 
-```
+```bash
 hugo mod graph
 hugo: collected modules in 1092 ms
 github.com/me/my-existing-site github.com/google/docsy@v0.2.0
@@ -167,7 +188,7 @@ Make sure that three lines with dependencies `docsy`, `bootstrap` and `Font-Awes
 {{% alert title="Tip" %}}
 In order to clean up your module cache, issue the command `hugo mod clean`
 
-```
+```bash
 hugo mod clean
 hugo: collected modules in 995 ms
 hugo: cleaned module cache for "github.com/FortAwesome/Font-Awesome"
@@ -182,29 +203,29 @@ hugo: cleaned module cache for "github.com/twbs/bootstrap"
 Since your site now uses Hugo Modules, you can remove `docsy` from the `themes` directory, as instructed below.
 First, change to the root directory of your site:
 
-```
+```bash
 cd /path/to/my-existing-site
 ```
 
 ### Previous use of Docsy theme as git clone
 
 Simply remove the subdirectory `docsy` inside your `themes` directory: 
 
-```
+```bash
 rm -rf themes/docsy
 ```
 
 ### Previous use of Docsy theme as git submodule
 
 If your Docsy theme was installed as submodule, use git's `rm` subcommand to remove the subdirectory `docsy` inside your `themes` directory: 
 
-```
+```bash
 git rm -rf themes/docsy
 ```
 
 You are now ready to commit your changes to your repository: 
 
-```
+```bash
 git commit -m "Removed docsy git submodule"
 ```