From 9babfdb0712aef6f79e141a897c7213ec723c055 Mon Sep 17 00:00:00 2001
From: mashehu <mashehu3@gmail.com>
Date: Fri, 26 Jan 2024 16:19:55 +0100
Subject: [PATCH] improve code highlighting

---
 src/content/docs/usage/troubleshooting.md |  18 +--
 src/styles/main.scss                      | 153 ++++++++++++----------
 2 files changed, 91 insertions(+), 80 deletions(-)

diff --git a/src/content/docs/usage/troubleshooting.md b/src/content/docs/usage/troubleshooting.md
index 16f1577808..37a11ee1c7 100644
--- a/src/content/docs/usage/troubleshooting.md
+++ b/src/content/docs/usage/troubleshooting.md
@@ -278,7 +278,7 @@ docker pull nfcore/<pipeline>:dev
 
 If you work in a `dev` branch, you may also want to consider putting a request for a pull in each run you do with nextflow, by putting this line of code in your nextflow.config file:
 
-```nextflow
+```groovy
 docker {
     enabled = true
     runOptions = '--pull=always'
@@ -434,7 +434,7 @@ For example, let's say it's the `MARKDUPLICATES` process that is running out of
   > If you think this would be useful for multiple people in your lab/institute, we highly recommend you make an institutional profile at [nf-core/configs](https://github.com/nf-core/configs). This will simplify this process in the future.
 - Within this file, add the following. Note we have increased the default `4.GB` to `16.GB`.
 
-  ```nextflow
+  ```groovy
   process {
     withName: MARKDUPLICATES {
       memory = 16.GB
@@ -450,7 +450,7 @@ For example, let's say it's the `MARKDUPLICATES` process that is running out of
 
     - If you want this, use the following syntax instead:
 
-      ```nextflow
+      ```groovy
       memory = { check_max( 16.GB * task.attempt, 'memory' ) }
       ```
 
@@ -545,17 +545,17 @@ igenomes_base: '/<path>/<to>/<data>/igenomes'
 
 ## One module container fails due to Docker permissions
 
-The nf-core template `nextflow.config` contains the configuration `docker.runOptions = '-u $(id -u):$(id -g)'` for the profiles `docker` and `arm`.
+The nf-core template `nextflow.config` contains the configuration `docker.runOptions = '-u $(id -u):$(id -g)'{:groovy}` for the profiles `docker` and `arm`.
 This is done to emulate the user inside the container.
 
 In some containers, this option may cause permission errors, for example when the Docker container writes to the `$HOME` directory, as the emulated user won't have a `$HOME` directory.
 
-One solution is to override this Docker option with a config file, with `docker.runOptions = ''`. However, this change will affect all the Docker containers, and can't be overriden only in one single process.
-To solve this, one option is to replace `docker.runOptions` and use `containerOptions` instead.
+One solution is to override this Docker option with a config file, with `docker.runOptions = ''{:groovy}`. However, this change will affect all the Docker containers, and can't be overriden only in one single process.
+To solve this, one option is to replace `docker.runOptions{:groovy}` and use `containerOptions` instead.
 
-Your `nextflow.config` file will look like this:
+Your new `nextflow.config` file should look like this:
 
-```nextflow
+```groovy title="nextflow.config"
 profiles {
   docker {
     process.containerOptions = '-u $(id -u):$(id -g)'
@@ -568,7 +568,7 @@ profiles {
 
 And you can override this value for a particular process selecting it by name, in the `modules.config` file:
 
-```nextflow
+```groovy title="modules.config"
 process {
   withName: <TOOL> {
         containerOptions = ''
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 085a5399d1..eabe924136 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -3,12 +3,19 @@
 .hide-light {
   display: none;
 }
-figure[data-rehype-pretty-code-figure]{
-code[data-theme*=' '],
-code[data-theme*=' '] span {
-  color: var(--shiki-light);
-  background-color: var(--shiki-light-bg);
+figure[data-rehype-pretty-code-figure] {
+  code[data-theme*=' '],
+  code[data-theme*=' '] span {
+    color: var(--shiki-light);
+    background-color: var(--shiki-light-bg);
+  }
 }
+
+span[data-rehype-pretty-code-figure] {
+  code[data-theme*=' '],
+  code[data-theme*=' '] span {
+    color: var(--shiki-light);
+  }
 }
 
 body {
@@ -290,50 +297,50 @@ code:not(pre code),
       padding-left: 1.5em;
       padding-right: 1.5em;
     }
-    &[data-line-numbers]{
+    &[data-line-numbers] {
       counter-reset: line;
 
-    & > [data-line]::before {
-      counter-increment: line;
-      content: counter(line);
-      display: inline-block;
-      width: 1.75rem;
-      margin-right: 1rem;
-      padding-right: 0.5rem;
-      text-align: right;
-      color: $gray-400;
-      border-right: 1px solid $gray-400;
-    }
-    & > [data-line]:first-child::before {
-      padding-top: 0.45rem;
-    }
-    & > [data-line]:last-child::before {
-      padding-bottom: 0.25rem;
-    }
-    & > [data-line][data-highlighted-line]::before {
-      color: $gray-600;
-    }
-    // handle offset for line numbers with more than 1 digit
-    &[data-line-numbers-max-digits='2'] > [data-line]::before {
-      width: 2.25rem;
-    }
-    &[data-line-numbers-max-digits='2'] > [data-highlighted-line][data-line]::before{
+      & > [data-line]::before {
+        counter-increment: line;
+        content: counter(line);
+        display: inline-block;
+        width: 1.75rem;
+        margin-right: 1rem;
+        padding-right: 0.5rem;
+        text-align: right;
+        color: $gray-400;
+        border-right: 1px solid $gray-400;
+      }
+      & > [data-line]:first-child::before {
+        padding-top: 0.45rem;
+      }
+      & > [data-line]:last-child::before {
+        padding-bottom: 0.25rem;
+      }
+      & > [data-line][data-highlighted-line]::before {
+        color: $gray-600;
+      }
+      // handle offset for line numbers with more than 1 digit
+      &[data-line-numbers-max-digits='2'] > [data-line]::before {
+        width: 2.25rem;
+      }
+      &[data-line-numbers-max-digits='2'] > [data-highlighted-line][data-line]::before {
         width: calc(2.25rem - 2px); // 2px for border offset
       }
 
-    &[data-line-numbers-max-digits='3'] > [data-line]::before {
-      width: 3rem;
-    }
-    &[data-line-numbers-max-digits='3'] > [data-highlighted-line][data-line]::before{
+      &[data-line-numbers-max-digits='3'] > [data-line]::before {
+        width: 3rem;
+      }
+      &[data-line-numbers-max-digits='3'] > [data-highlighted-line][data-line]::before {
         width: calc(3rem - 2px); // 2px for border offset
       }
       &[data-line-numbers-max-digits='4'] > [data-line]::before {
-      width: 3.5rem;
-    }
-    &[data-line-numbers-max-digits='4'] > [data-highlighted-line][data-line]::before{
+        width: 3.5rem;
+      }
+      &[data-line-numbers-max-digits='4'] > [data-highlighted-line][data-line]::before {
         width: calc(3.5rem - 2px); // 2px for border offset
       }
-  }
+    }
   }
 }
 
@@ -1264,16 +1271,16 @@ Launch Page
 
 figure[data-rehype-pretty-code-figure] [data-theme*=' ']:not([data-rehype-pretty-code-title]) {
   [data-highlighted-line] {
-    background-color: tint-color($success-text-emphasis-dark,80%);
+    background-color: tint-color($success-text-emphasis-dark, 80%);
     border-left: 2px solid $success-text-emphasis-dark;
-    span{
-      background-color: tint-color($success-text-emphasis-dark,80%);
+    span {
+      background-color: tint-color($success-text-emphasis-dark, 80%);
     }
   }
   [data-highlighted-chars] {
-    background-color: tint-color($gray-500,80%);
+    background-color: tint-color($gray-500, 80%);
   }
-  [data-rehype-pretty-code-caption]{
+  [data-rehype-pretty-code-caption] {
     margin-top: -0.75rem;
     font-size: $small-font-size;
     color: $secondary;
@@ -1283,18 +1290,18 @@ figure[data-rehype-pretty-code-figure] [data-theme*=' ']:not([data-rehype-pretty
 .main-content figure[data-rehype-pretty-code-figure] pre .copy-code-button {
   margin-top: 0.75rem;
   margin-right: 0.7rem;
-  &:hover{
+  &:hover {
     opacity: 1 !important;
   }
-  &.single-line{
+  &.single-line {
     margin-top: 0.425rem;
   }
 }
 
 .main-content figure[data-rehype-pretty-code-figure]:has([data-rehype-pretty-code-title]) pre {
-  code{
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  code {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
   .copy-code-button {
     margin-top: 0.75rem;
@@ -1353,13 +1360,19 @@ div.mermaid {
       display: block;
     }
   }
-  figure[data-rehype-pretty-code-figure]{
-  code[data-theme*=' '],
-  code[data-theme*=' '] span {
-    color: var(--shiki-dark);
-    background-color: var(--shiki-dark-bg);
+  figure[data-rehype-pretty-code-figure] {
+    code[data-theme*=' '],
+    code[data-theme*=' '] span {
+      color: var(--shiki-dark);
+      background-color: var(--shiki-dark-bg);
+    }
+  }
+  span[data-rehype-pretty-code-figure] {
+    code[data-theme*=' '],
+    code[data-theme*=' '] span {
+      color: var(--shiki-dark);
+    }
   }
-}
   [data-rehype-pretty-code-title][data-theme*=' '] {
     border: 1px solid $border-color-dark;
   }
@@ -1379,7 +1392,7 @@ div.mermaid {
     border-color: shade-color($nf-core-color-dark, 5%);
     color: $white;
   }
-  .btn-success:not(:disabled):not(.disabled){
+  .btn-success:not(:disabled):not(.disabled) {
     background-color: $nf-core-color-dark;
     border-color: shade-color($nf-core-color-dark, 5%);
     color: $white;
@@ -1458,26 +1471,24 @@ div.mermaid {
     color: $body-color-dark;
   }
   .main-content pre code {
-    &[data-line-numbers]{
-    & > [data-line]::before {
-      border-color: $border-color-dark;
-      color: $border-color-dark;
-    }
-    & > [data-line][data-highlighted-line]::before {
-      color: $gray-500;
+    &[data-line-numbers] {
+      & > [data-line]::before {
+        border-color: $border-color-dark;
+        color: $border-color-dark;
+      }
+      & > [data-line][data-highlighted-line]::before {
+        color: $gray-500;
+      }
     }
   }
-
-}
-  figure[data-rehype-pretty-code-figure] [data-theme*=' '] [data-highlighted-line]{
-    background-color: shade-color($success-text-emphasis-dark,70%);
-    border-left: 2px solid shade-color($success-text-emphasis-dark,25%);
+  figure[data-rehype-pretty-code-figure] [data-theme*=' '] [data-highlighted-line] {
+    background-color: shade-color($success-text-emphasis-dark, 70%);
+    border-left: 2px solid shade-color($success-text-emphasis-dark, 25%);
     span {
-      &:first-child{
+      &:first-child {
         padding-top: 0;
       }
-      background-color: shade-color($success-text-emphasis-dark,70%);
+      background-color: shade-color($success-text-emphasis-dark, 70%);
     }
   }
 }
-