I'm using Prettify (from Google Code - https://code.google.com/p/google-code-prettify/). When one adds the linenums attribute then it renders the program using alternating background colors on each line (i.e., it uses "stripes" or "piano keys"). When one removes that attribute Prettify no longer stripes the lines.
Is it possible to get Prettify to stripe source code WITHOUT also adding line numbers?
If you look at the themes gallery you'll see that this is affected by the stylesheet, and that there are some with line numbers on every line.
Something like
<style>li.L4, li.L9 { list-style-type: none }</style>
should do it.
The operative part of the default stylesheet is
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
which turns off list bulleting for all items with index i where (i % 10) ∉ (4,9), hence the li.L4, li.L9 selector fills the gaps.
Answer is yes. Mike Samuel's answer seems to misinterpret or ignore the question.
The "piano keys" striping of code (not line numbers) occurs with every other line of text having an alternating background color whenever line numbers are requested. I wanted to turn it off when showing line numbers, but the original questioner wanted to know how to turn it on (like for an Excel spreadsheet) but without showing line numbers. Neither question, however, would seem to have anything to do with the line numbers or the li style directly, hence the confusion.
To fix this, a background-color property can be added; this overrides the striping colors of the numbered prettify commands and allows custom stripes.
An answer to both my problem and the original was eventually found. A style was added to override the current prettify code such as the following. You must still specify linenums in the prettify class but none will be shown:
highlight every 5th line no nums:
<style>
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8
{ background:#000022 !important; list-style-type:none !important}
li.L4,li.L9
{ background:#080833 !important; list-style-type:none !important}
</style>
highlight every 5th line with nums:
<style>
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8
{ background:#000022 !important; list-style-type:decimal !important}
li.L4,li.L9
{ background:#080833 !important; list-style-type:decimal !important}
</style>
Important: there is no comma before the curly bracket. If you insert such
a comma the style will fail!
Related
I am considering making my presentations using markdown in RStudio rather than beamer. In beamer I often use incremental appearance of the content, with the option "highly dynamic", which makes the next item to appear show in light gray before appearing fully. Apart from looking nice, this helps me present as it prevents me from being surprised if I forget the next point on the slide.
My question is: Is there any way to achieve a similar effect if I make my slides in RStudio, for instance as an R presentation, or rmarkdown presentation using ioslides, or Slidy?
I am aware that I can set incremental: true in R presentations, but this only gives incremental appearance, not the "highly dynamic" effect.
There are several different ways to produce slides in RMarkdown: ioslides, slidy, revealjs, xaringan, etc. I tend to use ioslides, and this method works there. I have added a couple of other
variations below.
What you need to do is to change the CSS for the selector .build .to-build so that instead of making items transparent, it only makes them partially transparent. You can do this by creating a file containing this:
.build .to-build {
opacity: 0.1
}
If you call that file incremental.css, then in your YAML for the presentation, you have this:
output:
ioslides_presentation:
incremental: true
css: incremental.css
Then you will see something like this when you display the sample presentation after showing the first bullet:
Edited to add:
Here's the CSS to use if you're using slidy_presentation instead of ioslides_presentation:
body.single_slide .invisible {
opacity: 0.1;
visibility: visible;
}
And here's what to use for revealjs::revealjs_presentation:
.reveal .slides section .fragment {
opacity: 0.1;
visibility: visible;
}
You can probably put all three recipes into the incremental.css file, and then switch between the formats until you find which one you like best.
If you are making beamer presentations from Rmarkdown, this works:
---
output:
beamer_presentation:
incremental: true
header-includes:
- \setbeamercovered{highly dynamic}
---
- one
- two
- three
I use darken to define another color, however if the base color has important flag, it fails to compile. This is my scss
$baseColor: #FF6600 !important;
.my-link:active {
color: darken($baseColor, 20%);
}
and this is the error
... (#FF6600 !important) is not a color for 'darken'
If I change important to default, everything works fine. I do need important flag as this variable is overwritten in different places. I'm wondering how I can fix this? Thanks.
The error is quite clearly telling you what's wrong. You're trying to pass in a list containing a color (#FF6600) and a string (!important) to a function that is expecting a color. The !default flag is not a string, it is a Sass language construct.
If you need to use !important often enough that you need to use it every time you use this variable, I strongly recommend that you reevaluate your code. This is considered to be a code smell.
If you really really really need it, you have to use the nth() function to extract the first element of the list.
$baseColor: #FF6600 !important;
.my-link:active {
color: darken(nth($baseColor, 1), 20%) nth($baseColor, 2);
}
Note that this will raise an error if your variable is not actually a list (because you're trying to select an element that doesn't exist). If you don't actually need !important here, then this will work fine with or without a list:
$baseColor: #FF6600 !important;
.my-link:active {
color: darken(nth($baseColor, 1), 20%);
}
I don't know anything about HTML codes and I'm using the 'Galauness Blogger Theme' I found on the internet. I changed some things that weren't too hard and the only thing I currently don't like about my blog is the fact that it seems like the wrong title belongs to the wrong blogpost.
If you visit my website it looks like the second row of text belongs to the first row of images but that isn't the case.
Would anyone mind helping me with a) decreasing the space between the text and the image or b) increasing the first row of images and the second row of text?
My website is www.lemontierres.com
Thank you in advance
Decreasing the space between headline and image is possible, but can get complicated. The reason is each headline in your CSS has a height set to 40px and a padding of 10px. You'll find this in the css for the selector .post h3. If the height:40px; would be removed, it looks better as currently all your headlines only have one line, but in case of a single headline with 2 lines the three entries in each row wouldn't be aligned anymore - the fixed height takes care about keeping everything aligned.
To have more space between the entries, you can add padding for a wrapper element - e.g. every entry is wrapped in a div with the classes post and hentry, so adding
.post.hentry {
padding-bottom: 30px;
}
will add more space between each row.
I've noticed that adding padding to the outermost wrapper - the div with the class date-outer - leads to weird results, but adding it to .post.hentry seems to work.
In my Sass, I have a variable like this:
$icon-pencil: \270e;
Then, later I have this:
i.icon-pencil:before {
content: "#{$entypo-icon-pencil}";
height: inherit;
}
(Yes, I know that I don't need interpolation there. I actually have a function there, but I'm simplifying to make the question easier to follow.)
That outputs this:
i.icon-pencil:before {
content: "\\270e";
height: inherit;
}
The extra slash makes it just output the text instead of the HTML entity (i.e., the pencil icon).
Why is it being escaped? What can I do to prevent it?
I found this comment which seems like my issue, but not sure where to go from here.
I keep getting this weird error message when compiling. Very hard to debug.
(By the way: opacity in the example is a mixin)
But I'm stuck on
> 59| .red { opacity 0.4 }
expected "indent", got "eos"
I've tried
.red { opacity(0.4) }
.red { opacity(0.4); }
and nothing.
I've also found that you can get this error if you mix spaces and tabs. It's a strange error to get for this issue. Just make sure that you stick with one or the other.
I found this was caused by an erroneous curly brace left behind when conversing css or a mixin
myMixin(var = 1){ <--- nooooooo
color red
etc etc
Problem A
The issue is that for some syntax reasons, stylus doesn't permit mixins alone in a selector
The solution(s)
is to use multi line
.red {
opacity(0.4);
}
add a bogus property (make sure it doesn't affect your styling)
.red { opacity(0.4); zoom:1; }
Problem B
Another issue was with reset styles, being without a new line between them.
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none} ...
The solution
To put each of the style on individual lines:
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
...
Very very weird issues and even weirder solution :P
Hope that this save some of your time (because I've wasted a lot of mine on this :( ).
I just had the same problem. As it turns out, this problem can also be caused if you have two consecutive, adjacent hashes when defining a color:
color #FFF <- good
color ##FFF <- easy to miss, will cause very unhelpful 'eos' message at file end
I had this issue and (after about 30 min) realized it was an extra opening brace that my IDE put in - clearly I should have been watching more carefully! I would suggest looking at all your git (or what have you) changes very carefully and be sure you have no double opening braces:
.class-name-of-greatness {
{
color: blue;
border: gold
}
For all the Vi(m) users: Can also be triggered by
$width--s = 24rem:wq
(last 3 chars)