Refactor screenshots to code blocks and fix step numbering (closes #210)

docs/container_setup/local_setup/localsetup.md

@@ -17,48 +17,57 @@ prerequisites installed.
 
 1. Clone the [R Dev Container Github
    repo](https://github.com/r-devel/r-dev-env/)
+
 2. In a terminal, change directory to r-dev-env
 
-```bash
-cd r-dev-env
-```
+      ```bash
+      cd r-dev-env
+      ```
 
 3. Restart VSCode in the `r-dev-env` directory with the command:
 
-```bash
-code .
-```
+      ```bash
+      code .
+      ```
 
 4. Checkout the main branch and pull the latest changes
 
-```bash
-git checkout main
-git pull
-```
+      ```bash
+      git checkout main
+      git pull
+      ```
 
-The main branch provides the stable release. If you require an in-development
-feature, use the devel branch instead.
+      The main branch provides the stable release. If you require an in-development
+      feature, use the devel branch instead.
 
 5. After this step please be sure that your docker engine is started. If you
    have installed Docker Desktop just open the Docker Desktop app the engine
    starts automatically and if you are using just docker engine make sure to
    start it with the following command
 
-```bash
-systemctl start docker
-```
+      ```bash
+      systemctl start docker
+      ```
 
 6. We can see pop-up at the bottom right of the VSCode editor which says reopen
-in Dev Container.  Click on `Reopen in DevContainer` button.  ![start
-localsetup](../../assets/rdev13.png)
+in Dev Container.
+Click on `Reopen in DevContainer` button.
+![startlocalsetup](../../assets/rdev13.png)
 
 7. After clicking on that button we will see our container is getting ready. It
 will take some time. So till that time you can have coffee :) ![start
 localsetup](../../assets/rdev24.png)
+
 8. We can also test whether the dev container is working or not by just printing
-the environment variables mentioned in the welcome message on the terminal. And
-there we go!!! We have setup our R Dev Container locally.  ![start
-localsetup](../../assets/rdev25.png)
+the environment variables mentioned in the welcome message on the terminal.
+
+      ```console
+      $ echo $BUILDDIR
+      /workspaces/r-dev-env/bin/R
+      ```
+
+      And there we go!!! We have setup our R Dev Container locally.  ![start
+      localsetup](../../assets/rdev25.png)
 
 9. The container will be closed when you close VSCode. To reopen the container,
    open the `r-dev-env` directory in VSCode.

docs/css/custom.css

@@ -0,0 +1,37 @@
+/* customise CSS for bash code chunks and bash sessions ("console") */
+
+/* .gp = Generic Prompt (e.g., shell prompt like $ or >) */
+/* default: var(--md-code-hl-generic-color); */
+/* prompts treated as normal code in bash code chunks */
+.language-console.highlight code span.gp{
+  color: #7aa2cd;
+}
+
+/* .go = Generic output: output from a command */
+/* default: var(--md-code-hl-generic-color); */
+.language-console.highlight code span.go,
+.language-bash.highlight code span.go {
+  color: var(--md-code-hl-generic-color);
+}
+
+/* .nb = Built-in name like print, echo */
+/* default: var(--md-code-hl-constant-color); */
+.language-console.highlight code span.nb,
+.language-bash.highlight code span.nb {
+  color: var(--md-code-hl-constant-color);
+}
+
+/* .nv = Named variables like $BUILDDIR */
+/* default: var(--md-code-hl-variable-color); */
+/* use same as normal text: var(--md-code-fg-color); */
+.language-console.highlight code span.nv,
+.language-bash.highlight code span.nv {
+  color: var(--md-code-fg-color);
+}
+
+/* .c1 = Built-in name like print, echo */
+/* default: var(--md-code-hl-comment-color); */
+.language-console.highlight code span.c1,
+.language-bash.highlight code span.c1 {
+  color: var(--md-code-hl-comment-color);
+}

mkdocs.yml

@@ -58,6 +58,9 @@ theme:
       primary: indigo
       accent: blue
 
+extra_css:
+  - css/custom.css
+
 plugins:
   - social
   - search
@@ -71,6 +74,8 @@ extra:
 
 markdown_extensions:
   - pymdownx.highlight:
+      use_pygments: true
+      pygments_lang_class: true
       anchor_linenums: true
   - pymdownx.inlinehilite
   - pymdownx.snippets