Source code language next to code boxes
gadenbuie opened this issue · comments
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
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!
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.
Dear @gadenbuie, did you have to opportunity to see what is happening?
Thank you for your time.
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 addstan
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 theincludes: 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.