I am using bookdown to write some maths lecture notes. I find myself very often using the > blockquote feature. Often, this is because my environments, such as remarks and exercises take multiple lines. It is then ambiguous where the theorem ends and where 'chat' begins after.1 I'm pretty happy with doing this. I like the fact that the blockquote singles out the environments so it's very easy to see when one is changing to another. The thing I don't like is that it "softens" the text colour.
See the following screenshot, comparing the boldness of the font in the first paragraph with that in the blockquote.
Is there any way of removing this "softening"?
1
LaTeX gets around this by adding extra white-space around something like \begin{example} ... \end{example}. Alternatively, one can configure them to add a \qedsymbol to indicate that they have come to an end. I don't feel the first option would look nice in bookdown and I don't think the second option is even possible. It would actually be great for my long examples if it did!
Per your request, you can change the styles in HTML outputted R Markdown scripts by adding styles. There are a few different ways you can add them. Typically, I just place this content in between chunks.
<style>
blockquote {
font-color: black;
opacity: 1;}
</style>
You can attach an external style document or use a CSS chunk. I just find this easier for most projects.
You can read more about this here.
Related
I have mistakenly pasted couple of CSS selectors in the same CSS file twice, as time passes I am being able to track them manually and delete the later one. I wanted to know if there is any better way to find if a CSS selector has been used twice in my CSS file so that I could merge/delete them?
Here is one possible solution:
Copy both files into a CSS code formatting tool e.g. http://www.codebeautifier.com/
Format it so each CSS ruleset is on one line, e.g. p { font-size: 13px }
Put the result into a sorting program, e.g. the sort command on Linux/Mac terminal.
There are online tools that can do this too.
Now all the duplicated selectors should be next to each other. You should be able to combine them by hand pretty easily.
Also, don't forget that different ordering of CSS rules can have different results.
Also try this https://codebeautify.org/remove-duplicate-lines
What's the name for the CSS style / best-practice that WordPress uses?
I ask because, with PHP, we have Pear style, GNU style, K&R, etc... Is there any keyword or name for the css style used by WP?
Is there a nomenclature for css formatting conventions at all?
ie:
.this,
.and-this {
display: none;
}
rather than:
.this,.and-this{display: none;}
Drupal has CSS formatting guidelines as well. But, I'm unable to find any resource except maybe this one which gives titles to different css formatting conventions in any way.
There is no special CSS that WordPress uses: it just employs regular old CSS like any other site. That page you linked to is showing preferred syntax conventions. I just skimmed through the page and the examples of CSS syntax that they don't like were marked incorrect ... even though most would actually function just fine from what I can tell. A little misleading.
Regarding your two snippets above: those will have the same results (though in the second one you need a space after the comma: .this, .and-this{display: none;}). The first snippet referred to as human-friendly or human-readable, with extra whitespace and line breaks to make it easier for people to read and write. The second is simply minified for faster processing by computers, which removes whitespacing and line breaks.
It should be noted that this principle of minification from your example really only applies when scaled up to hundreds/thousands of lines of code and doesn't make much of a difference with less than that.
I'm trying to do a script that generates a font from SVG's, which works (more or less the same code as provided on https://www.npmjs.com/package/gulp-iconfont for usage)
So that's good so now my real question comes, is it possible to use that gulp package to generate two colored emoji's?, if so can i get a link to read more about it or a sample?
Font icons are one colour - because they are treated as text by the web browser. This is done so that CSS rules like color: red; can be applied.
You can make two-colour SVGs, and use them directly in the DOM with an <img> tag. However, support for older browsers (IE 8 and below) is limited. You'll need some kind of fallback (a PNG image works quite well).
You might consider making use of negative space to give the effect of having two colours. However, I can't find any examples (only did a quick search) of this being used within emojis.
I hope this helps.
I want to clean the code like this:
Before:
.title {
text-align:right;
width:100px;
}
To
.title {
text-align:right; width:100px;
}
Is there a website to clean the code?
What you're looking for is a css minifier.
Minification: Definition
Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute. ~Wikipedia
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
THIS ONLINE MINIFIER does what you want.
It's description:
Online CSS Minifier/Compressor.
Free! Provides an API. Simple Quick and Fast.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Here's a website that lists five free tools which can be used to clean up your css, (especially any 'dirty' markup that appears after 'tweaking' your css over time)
Both versions are clean code. The second just has the values on one line. If you want to speed up your css load times, use a minify tool such as http://cssminifier.com/
http://www.lonniebest.com/FormatCSS/
This site is best that i have used. This will provide you much more option that when do u have to use space, new line etc. Just visit it you will get what you need.
I'm using this site for formatting purposes on my CSS code:
http://www.cssportal.com/format-css/index.php
I previously asked a question about how to export a HTML table in R and have control over line borders.
I'm used to LaTeX where when you create a table, the formatting of the table is largely determined by the text and markup that appears at that point. This works well for Sweave, because your R code chunk can output LaTeX table markup at that point. I also understand that there are tools like xtable that can produce HTML markup for a table.
However, control over HTML tables seems to rely on style sheets, which are meant to appear in the header of the document and not in the location where the R code chunk is placed. Of course, I could just put content in the style sheet, but in scientific applications often there can be some quite specific table formatting that varies in some respects from table to table.
Thus, my question:
In general, how do you format an HTML table with literate programming like R Markdown or even from raw HTML if formatting of the output requires output to be created in a separate place in the document (i.e., CSS for the table in the header) to where the R code chunk is placed (i.e.,the table itself in the body)?
I can think of three ways without messing with your toolchain, all of them are kind of hacky.
Just output the <style> right in the body. This isn't technically valid, but it will work fine in any major browser.
Emit JavaScript that creates a <style> block at runtime and appends it to the head (here's one way). This will look a little gross in the HTML source and in the R code, but it will work and it will validate.
Use a scoped style block. This would be exactly what you are looking for, except that the scope attribute is new to HTML5 and not yet implemented in any major browser. However, if you base your styles on uniquely generated IDs (i.e. your rules are written such that even if they apply to the whole document they won't mess anything up), I imagine the browsers will just ignore the "scoped" attribute and everything will work properly--then this becomes effectively a version of option 1 that happens to validate!
(I would go with #3, personally.)
If you haven't already, it'd be worth starting a thread at the RStudio support forum about this; even though it's not strictly an RStudio issue, we're obviously doing a lot of work on the end-to-end scenario of publishing reports in R Markdown and would love to find out more about your specific examples. Tables are clearly going to be a big part of what people do with this reports and we know this is a weak spot right now, one that we do want to address in future versions.
An alternative method would be to use pander as R markdown backend (sorry for this marketing-like answer, but I do think my Pandoc.brew function could be really handy for this purpose).
It is similar to knitr (parsing/evaling R commands in a markdown formatted file) but using brew syntax for R code blocks (e.g. <%...%> for general R code - like loops etc. and <%=...%> for returning results in a block). But differs from brew as Pandoc.brew does not only cat results in a code block, but runs my pander generic method which transforms (quite q wide variety of) R objects to (IMHO) pretty Pandoc's markdown format.
So running Pandoc.brew on a markdown formatted file would result in a clean markdown file with all R code blocks run - and you do not have to deal with xtable and other tweaks (not even with plots as all R code blocks resulting in an image is rendered to a png file and linked in the markdown text file).
And about why I started to answer here: with pander you can pass special options to pandoc, e.g. adding a custom CSS stylesheet (or JS etc.) to your generated HTML's header, see details on Pandoc's homepage. Based on that you could easily add your CSS file(s) or even just a bunch of style parameter. This could be done in pander with Pandoc.convert's option. BTW you do not even have to use my forked brew function, you can generate your markdown file with e.g. knitr and call Pandoc with the above function.
pander adds some CSS/JS to generated HTML files, which would generate (IMHO) quite pretty output, but you can easily customize that and adding your own files there.
For example: you would get this HTML file based this markdown by default which was Pandoc.brewed from this quite short markdown syntax brew file. BTW my github page was also generated/automatically styled by my markdown parser. I would really appreciate if you would try it :)
NOTE: to try the above calls you would need Pandoc pre-installed, also you'd need an up-to-date version of both rapport, both pander. See installation details.
One option which doesn't completely solve the problem is to use gvisTable:
Here is a basic gvisTable:
```{r message=FALSE}
# install.packages("googleVis")
library(googleVis)
library(MASS)
data(Animals)
```
```{r results='asis'}
tab1 <- gvisTable(Animals,
options = list(width = 600, height = 650,
page = "enable",
pageSize = nrow(Animals)))
print(tab1, "chart")
```
?print.gvis explains some of the options for printing the gvis object.
In partiuclar the tag="chart" option is required for R Markdown documents as this means that the output is just what is required for the object, rather than a complete HTML page as is the default.
See the output of this and a little more here
Ok, hope I got it now. You should set some additional knitr options, and you could cat() the css dynamically if you like.
<!DOCTYPE html>
<head>
<style type="text/css">
.greenback {
background-color: teal;
color: white;
}
.greenback td {
border: dotted gray;
}
.bluescreen {
background-color: blue;
color: white;
}
.bluescreen td {
border: thick solid;
padding:2px;
margin:2px;
}
</style>
</head>
<body>
<table class="greenback">
<tr><td>Hello</td><td>Mars</td><tr>
<tr><td>World</td><td>Moon</td><tr>
</table>
Could use some xtable code here instead.
<!--begin.rcode
cat('
<table class="bluescreen">
<tr><td>Hello</td><td>Mars</td><tr>
<tr><td>World</td><td>Moon</td><tr>
</table>
')
end.rcode-->
</body>
</html>
Neil Saunders has a tutorial on customising CSS for HTML generated using RStudio. It shows how you can modify the built in style file and source this alternative file.