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%); } } } -