Source code language next to code boxes

[gadenbuie]

For js4shiny, I built CSS styles that add the language name next to the code box. They're included in the (somewhat hidden) xaringan template in the js4shiny R package but the CSS for the code boxes specifically comes from https://github.com/gadenbuie/js4shiny/blob/main/inst/template-html/css/code.css

These styles (or something similar) could be moved in to xaringanExtra.

Screenshots

[jorgesinval]

I added:

pre.stan,
...

pre.stan::after,
...

pre.stan {
  border-color: var(--red);
}

pre.stan::after {
  content: 'stan';
  color: var(--red);
}

But it did not work:

[gadenbuie]

oh no! I forgot an important component, which is the JavaScript in this file that moves the source code class from the child <code> element to the <pre> parent element (too many flavors of markdown, amiright?). You'd also have to add stan to the languages that get special treatment (at the top of that script) and then include that whole thing in an .html file containing that <script> tag using the includes: after_body option (here's an example).

Hope this helps!

[jorgesinval]

Thank you! I managed to add the 'stan' reference to the `HTML file:

    const langSpecial = ['r', 'stan', 'js', 'yaml', 'json', 'bash']

However, every time I change the code.css file in ~/js4shiny-main/inst/template-html/css/code.css, adding:

...

pre.stan {
  border-color: var(--blue);
}

pre.stan::after {
  content: 'stan';
  color: var(--blue);
}
...
pre.r,
pre.stan,
pre.js,
pre.md,
pre.markdown,
pre.yaml,
pre.json,
pre.bash,
pre.html,
pre.css {
  background: none;
}

pre.r::after,
pre.stan::after,
pre.js::after,
pre.md::after,
pre.markdown::after,
pre.yaml::after,
pre.json::after,
pre.bash::after,
pre.html::after,
pre.css::after {
  text-transform: uppercase;
  font-family: var(--font-header);
  left: -1.35em;
  bottom: -1.1em;
  transform-origin: top left;
  transform: rotate(-90deg);
}

But the result is the same:

By the way, the file code.css in the directory ~/js4shiny-main/inst/rmarkdown/templates/js4shiny-xaringan/skeleton/assets/libs/js4shiny/css is always rewritten to its previous version.

Any idea of what's happening?

Thanks.

PS: I copied your repo I just tried to add some stan code to a new slide.

[jorgesinval]

Dear @gadenbuie, did you have to opportunity to see what is happening?

Thank you for your time.

[jorgesinval]

oh no! I forgot an important component, which is the JavaScript in this file that moves the source code class from the child <code> element to the \<pre\> parent element (too many flavors of markdown, amiright?). You'd also have to add stan to the languages that get special treatment (at the top of that script) and then include that whole thing in an .html file containing that <script> tag using the includes: after_body option (here's an example).

Hope this helps!

As I mentioned before the ~/aaa/assets/libs/js4shiny/css/code.css — for some reason — is being rewritten every time I knit the rmd into HTML, and it returns to the original form (without my custom language code box names). Due to my lack of understanding of the reason behind such behavior I opted for a simple solution:

sudo chattr +i /aaa/assets/libs/js4shiny/css/code.css

In other words I just forced Linux to prevent the file to be overwritten. I hope that this helps someone.