Skip to content

Commit

Permalink
improve code highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
@mashehu
mashehu committed Jan 26, 2024
1 parent b851326 commit 9babfdb
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 80 deletions.
18 changes: 9 additions & 9 deletions src/content/docs/usage/troubleshooting.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand All @@ -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' ) }
```
Expand Down Expand Up @@ -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)'
Expand All @@ -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 = ''
Expand Down
153 changes: 82 additions & 71 deletions src/styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
}
}
}
}
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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%);
}
}
}

0 comments on commit 9babfdb

Please sign in to comment.