You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As mentioned above, text and summary tables can be styled using CSS ids. The CSS ids are inserted into text by using braces (i.e. \{) with a CSS id hashtag following the opening brace (e.g. \{#bggrey example\}). In the previous example, the word "example" would be identified with the CSS id #bggrey and could be styled using CSS.
27
+
As mentioned above, text and summary tables can be styled using CSS ids or classes. The CSS ids (or classes) are inserted into text by using braces (i.e. \{) with a CSS id hashtag following the opening brace (e.g. `\{#bggrey example\}`). In the previous example, the word "example" would be identified with the CSS id #bggrey and could be styled using CSS.
28
28
29
29
There are two ways to create styling within a markdown summary table. The first option is useful if the markdown summary table is created manually (i.e. type by hand). In this scenario you simply need to add the hashtag to the desired cell of the summary table. Perhaps the more common workflow for adding hashtags to a summary table would be dynamically with R code. To do this, the function `table_id_inject` is used to create conditional arguments for adding the hashtags to a markdown summary table. This is shown in more detail with the example below.
30
30
31
-
## Simple Example of Package Workflow
31
+
## Adding CSS ids manually
32
+
Suppose you have a summary table like the following (note: this table was created by typing manually, a more typical workflow is shown later using R directly):
33
+
34
+
| Color Name | Number |
35
+
|----------- | ------------ |
36
+
| Red | 25 |
37
+
| Blue | 40 |
38
+
| Green | 4 |
39
+
| Orange | 87 |
40
+
41
+
You could then add styling by adding the following tags to the table, again this was added by hand, but a conditional example with R is shown later.
42
+
43
+
| Color Name | Number |
44
+
|----------- | ------------ |
45
+
| Red | 25 #bgred |
46
+
| Blue | 40 #bgblue |
47
+
| Green | 4 |
48
+
| Orange | 87 |
49
+
50
+
The addition of the *#bgblue* and *#bgred* indicates which cells will be changed. After turning the markdown document into an html file, this package can now be used to post-process the html file. The post-processing will add an id value for each cell with the *#bgblue* or *#bgred* and remove those from the table.
51
+
52
+
The CSS for these ids could be as simple as the following to change the background color of the cells with the CSS id inserted above:
53
+
54
+
````
55
+
#bgred {background-color: #FF0000;}
56
+
#bgblue {background-color: #0000FF;}
57
+
````
58
+
59
+
## Simple Example of Common Package Workflow
32
60
33
61
Below is a simple example of an Rmd document that combines both elements, text markup and inserting CSS ids dynamically into a table using R code and the `table_id_inject` function. The summary table below is calculating the mean and standard deviation of the chick weights by different feed types. You can imagine creating a similar table in reports that you create.
As mentioned above, text and summary tables can be styled using CSS ids. The CSS ids are inserted into text by using braces (i.e. \{) with a CSS id hashtag following the opening brace (e.g. \{#bggrey example\}). In the previous example, the word "example" would be identified with the CSS id #bggrey and could be styled using CSS.
25
+
As mentioned above, text and summary tables can be styled using CSS ids or classes. The CSS ids (or classes) are inserted into text by using braces (i.e. \{) with a CSS id hashtag following the opening brace (e.g. `\{#bggrey example\}`). In the previous example, the word "example" would be identified with the CSS id #bggrey and could be styled using CSS.
26
26
27
27
There are two ways to create styling within a markdown summary table. The first option is useful if the markdown summary table is created manually (i.e. type by hand). In this scenario you simply need to add the hashtag to the desired cell of the summary table. Perhaps the more common workflow for adding hashtags to a summary table would be dynamically with R code. To do this, the function `table_id_inject` is used to create conditional arguments for adding the hashtags to a markdown summary table. This is shown in more detail with the example below.
28
28
29
-
## Simple Example of Package Workflow
29
+
## Adding CSS ids manually
30
+
Suppose you have a summary table like the following (note: this table was created by typing manually, a more typical workflow is shown later using R directly):
31
+
32
+
| Color Name | Number |
33
+
|----------- | ------------ |
34
+
| Red | 25 |
35
+
| Blue | 40 |
36
+
| Green | 4 |
37
+
| Orange | 87 |
38
+
39
+
You could then add styling by adding the following tags to the table, again this was added by hand, but a conditional example with R is shown later.
40
+
41
+
| Color Name | Number |
42
+
|----------- | ------------ |
43
+
| Red | 25 #bgred |
44
+
| Blue | 40 #bgblue |
45
+
| Green | 4 |
46
+
| Orange | 87 |
47
+
48
+
The addition of the *#bgblue* and *#bgred* indicates which cells will be changed. After turning the markdown document into an html file, this package can now be used to post-process the html file. The post-processing will add an id value for each cell with the *#bgblue* or *#bgred* and remove those from the table.
49
+
50
+
The CSS for these ids could be as simple as the following to change the background color of the cells with the CSS id inserted above:
51
+
52
+
````
53
+
#bgred {background-color: #FF0000;}
54
+
#bgblue {background-color: #0000FF;}
55
+
````
56
+
57
+
## Simple Example of Common Package Workflow
30
58
31
59
Below is a simple example of an Rmd document that combines both elements, text markup and inserting CSS ids dynamically into a table using R code and the `table_id_inject` function. The summary table below is calculating the mean and standard deviation of the chick weights by different feed types. You can imagine creating a similar table in reports that you create.
Copy file name to clipboardexpand all lines: vignettes/the_basics.Rmd
+1-1
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ vignette: >
9
9
%\VignetteEncoding{UTF-8}
10
10
---
11
11
12
-
Have you ever wanted to include some form of styling, either conditional or nonconditional, when going from a (R)markdown input document to a html output document? If so, this package may be worthwhile to you. The `highlightHTML` package inject CSS into the output HTML document automatically via CSS ids (more information on CSS ids here: <http://www.cssbasics.com/css-ids/>).
12
+
Have you ever wanted to include some form of styling, either conditional or nonconditional, when going from a (R)markdown input document to a html output document? If so, this package may be worthwhile to you. The `highlightHTML` package inject CSS into the output HTML document automatically via CSS ids and classes (more information on CSS ids and classes: <http://www.cssbasics.com/css-ids/> and <http://www.cssbasics.com/css-classes/>).
13
13
14
14
The examples below start by showing the syntax in somewhat trivial examples initially. This is done to help show the markdown syntax a bit more simply. Toward the end of the document, a more typical workflow going from Rmd to HTML is shown that puts all the pieces together.
0 commit comments