I want to write a demo with xaringan for xaringan. I want to write a slide where I explain how students can write inline code or code chunks, but so far my attempts failed. Mostly because the ` are not printed. If i use `r knitr::inline_expr('mean(mtcars$mpg)')` the `are not printed.
Actually, it should work as mentioned in the comment, but it doesn't for some reason. This may be a bug. However, you can simply write a CSS class that highlights monospaced text and adds backticks before and after your code.
Add the following to the styles.css file in your xaringan project directory:
.ilr {
font-family: monospace;
padding: 2px 2px;
background-color: #e4e6e8;
}
.ilr:before, .ilr:after {
content: "`";
}
Use the above as follows:
---
# Test Slide
This is inline code: .ilr[r rnorm(100)].
Related
I am trying to reduce the font size for speaker notes in Quarto's revealjs format. My CSS file looks like this:
.slides h1 {
font-size : 150%;
}
.slides h2 {
font-size: 140%;
}
.speaker-notes {
font-size: 4px;
}
/* .show-speaker-notes .speaker-notes { */
/* font-size: 4px; */
/* } */
/* .slides .speaker-notes { */
/* font-size: 4px; */
/* } */
/* .slides speaker-notes { */
/* font-size: 4px; */
/* } */
The font changes for h1 and h2 work as expected. But I can't figure out how to tweak speaker notes. I've commented out things I tried that didn't work.
I realize that once speaker notes are loaded, it's possible to use Ctrl-- and Ctrl-+ to change the relative font size. But it seems like the default should be adjustable. Also, I don't really want 4px -- that was just to make the change obvious.
Custom CSS provided to the css: key in the YAML header of your .qmd is not used by reveal.js' speaker notes plugin (CSS classes like speaker-notes live in a separate CSS file [...]/libs/revealjs/dist/reveal.css).
You could use ::: blocks to generate divs and apply inline CSS. Here's an example:
## A Slide with speaker notes
Slide content
::: {.notes}
Here are your notes
::: {style="font-size:14px"}
... and here are some small-font notes.
- This doesn't break markdown.
:::
We're larger, again
:::
Result
Update:
I have actually a made Quarto Extension filter style-speaker-note that allows to write css style in a css file and apply those for speaker notes font or other components. Read the repo readme to know about "Installation", "how to use" and for more examples.
You can include a CSS chunk inside the {.notes} Divs. And then in that CSS chunk define a CSS class and specify all the CSS properties you want for that class. And then use that class for elements that you want to change. (Of course, you can define more than one CSS class, but all of them have to be inside that .notes div.
---
title: "Changing styles of Speaker notes."
format: revealjs
engine: knitr
---
## A Slide with speaker notes
Slide content
:::: {.notes}
```{css, echo=FALSE}
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
.change-note {
font-size: 14px;
font-family: 'IBM Plex Mono', monospace;
background-color: #D4FFE9;
}
```
Here are the notes.
::: {.change-note}
These fonts are in smaller size and with different font family.
:::
and these are larger in size.
::::
Now two important things to note,
Since Quarto generates separate HTML bodies for the speaker notes for each different slide, the defined CSS class can only be used for that specific slide note where you defined it.
And (though it is not relevant to the question, just saying for avoiding any confusion) I have used engine: knitr for the above reprex, otherwise it would be rendered using jupyter kernel (since the very first code chunk quarto finds, a CSS chunk).
I am currently preparing html slides for a workshop, for which I use the xaringan package for R, that is based on remark.js. Here the slides are created with RMarkdown. This works well, but for some reasons (explained in a former SO question) I want to switch off slide numbers on some pages, while keeping them visible on most others.
Until now, I am able to switch all slide numbers on and off either in a personal css style file or with an inline chunk:
```{css slide-number-off}
.remark-slide-number {
display: none;
}
```
```{css slide-number-on}
.remark-slide-number {
display: inline;
}
```
But I have not been able to switch page numbers on and off for individual slides.
A quick trick, is to include this property within an inverse class:
.inverse .remark-slide-number {
display: none;
}
How can I add CSS to github's markdown language?
I've been able to do so by using the style property inside html tags, like:
<p style="text-align: center;">This is some random text</p>
But if I move the css to the beginning, like:
<style>
p {
text-align: center;
}
</style>
<p>This is some random text</p>
Github doesn't recognize it, and just writes to the screen the css code.
I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.
Is there a way to do this? Writing css within html tags just feels plain wrong.
After GitHub converts Markdown to HTML,
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.
In any case, GitHub does not permit arbitrary HTML to be included in Markdown.
Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.
|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|
Signal
Description
DOP
Horizontal Dilution of precision
FIX
GPS Fix Quality indicator: 0 - fix not available1 - GPS fix
You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).
Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.
E.g.
/* CSS as copied from github's own stylesheet here, which is all one line anyway */
...
/* And then your own CSS */
/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }
/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }
/* let's also give images a subtle border */
img { border: 1px solid #DDD; }
In Jekyll, when I set the Markdown converter to kramdown and bundle exec jekyll serve, this fenced code block
```javascript
function hey(name) {
return 'Hey ' + name;
}
console.log(hey('Brienna'));
```
renders like this:
This happens no matter what I do. I've tried setting the input: GFM option, but it doesn't make a difference whether or not it's included.
However, when I set the Markdown converter to Redcarpet, the same code block renders like this:
This is what I want to see! But I don't want to use Redcarpet. I want to use kramdown.
As you can see from the rendered HTML below, the code block gets highlighted. I'm using a CSS stylesheet for Pygments, which Rouge is supposed to be able to work with. I noticed that the div's class changed between Markdown converters. With kramdown, its class is .highlighter-rouge, whereas with Redcarpet, its class is just highlight. Do I need to manually modify the CSS if switching between Markdown converters?
Kramdown:
Redcarpet:
Your Pygments CSS file looks like this:
.highlight { font-size: 13px; }
div.highlight, div.highlight code, div.highlight pre { background: #29281e; }
div.highlight code { padding: 0; }
div.highlight .c { color: #75715e } /* Comment */
In the Kramdown output, the .highlight block is no longer a <div>, so simply removing all "div" instances from the CSS would restore syntax highlighting.
Bonus: without specifically targeting <div>, your CSS now works with output of both Markdown processors.
For the fenced code blocks to work in Kramdown, you need to turn on recognition of GitHub Flavored Markdown:
kramdown:
input: GFM
Note that Jekyll reads _config.yml only once at execution time. You need to restart jekyll serve for further changes to apply.
I'm trying to use the syntax highlighting for a presentation in reveal.js, but I don't want to use zenburn (the default) and I want to highlight code written in R. I used highlight.js to produce css customized for R but the issue is that highlight.js denotes code in html with 'hljs' while reveal.js uses 'pre code.' For example highlight.js css looks like:
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #fdf6e3;
color: #657b83;
-webkit-text-size-adjust: none;
}
While reveal.js highlighting css looks like:
pre code {
display: block; padding: 0.5em;
background: #3F3F3F;
color: #DCDCDC;
}
Can reveal generate alternate themes for syntax highlighting, or is the solution to go through and change all the selectors?
You may be working on an outdated version of reveal.js that is affected by this GitHub issue.
In this case (and if you cannot upgrade) you would replace the inlined minified version of highlight (in plugin/highlight/highlight.js) by the latest stable version.
In all other cases just add the desired higlight css file (e.g. idea.css) to lib/css and replace the zenburn.css link in index.html (by e.g. <link rel="stylesheet" href="lib/css/idea.css">)
Expect that .reveal pre code in reveal's theme css may interfere with some highlight styles so they may be hard to read or look bad without further modifications.