CommencerCommencer gratuitement

Référencer le fichier CSS

Plutôt que d’ajouter des styles dans chaque fichier Markdown, vous pouvez créer un fichier Cascading Style Sheet (CSS) et le référencer chaque fois que vous créez un nouveau fichier qui doit utiliser des styles et des polices spécifiques.

Dans cet exercice, les styles que vous avez définis ont été ajoutés à un fichier CSS appelé styles.css. Vous allez référencer ce fichier dans l’en-tête YAML au lieu de définir les styles directement dans le fichier Markdown.

Cet exercice fait partie du cours

Créer des rapports avec R Markdown

Afficher le cours

Instructions

  • Ajoutez un champ css à l’en-tête YAML après le champ html_document et avant le champ toc.
  • Indiquez le nom du fichier CSS, styles.css, qui contient les styles que vous avez définis pour le fichier Markdown.

Exercice interactif pratique

Essayez cet exercice en complétant cet exemple de code.

{"investment_report.Rmd":"---\ntitle: \"Investment Report for Projects in `r params$country`\"\noutput: \n  html_document:\n    toc: true\n    toc_float: true\ndate: \"`r format(Sys.time(), '%d %B %Y')`\"\nparams:\n  country: Brazil\n  year_start: 2017-07-01\n  year_end: 2018-06-30\n  fy: 2018\n---\n\n```{r setup, include = FALSE}\nknitr::opts_chunk$set(fig.align = 'center', echo = TRUE)\n```\n\n```{r data, include = FALSE}\nlibrary(readr)\nlibrary(dplyr)\nlibrary(ggplot2)\n\ninvestment_annual_summary <- read_csv(\"https://assets.datacamp.com/production/repositories/5756/datasets/d0251f26117bbcf0ea96ac276555b9003f4f7372/investment_annual_summary.csv\")\ninvestment_services_projects <- read_csv(\"https://assets.datacamp.com/production/repositories/5756/datasets/bcb2e39ecbe521f4b414a21e35f7b8b5c50aec64/investment_services_projects.csv\")\n```\n\n\n## Datasets \n\n### Investment Annual Summary\nThe `investment_annual_summary` dataset provides a summary of the dollars in millions provided to each region for each fiscal year, from 2012 to 2018.\n```{r investment-annual-summary}\nggplot(investment_annual_summary, aes(x = fiscal_year, y = dollars_in_millions, color = region)) +\n  geom_line() +\n  labs(\n    title = \"Investment Annual Summary\",\n    x = \"Fiscal Year\",\n    y = \"Dollars in Millions\"\n  )\n```\n\n### Investment Projects in `r params$country`\nThe `investment_services_projects` dataset provides information about each investment project from 2012 to 2018. Information listed includes the project name, company name, sector, project status, and investment amounts. Projects that do not have an associated investment amount are excluded from the plot.\n\n```{r country-investment-projects}\ncountry_investment_projects <- investment_services_projects %>%\n  filter(country == params$country) \n\nggplot(country_investment_projects, aes(x = date_disclosed, y = total_investment, color = status)) +\n  geom_point() +\n  labs(\n    title = \"Investment Services Projects\",\n    x = \"Date Disclosed\",\n    y = \"Total IFC Investment in Dollars in Millions\"\n  )\n```\n\n### Investment Projects in `r params$country` in `r params$fy`\nThe `investment_services_projects` dataset was filtered below to focus on information about each investment project from the `r params$fy` fiscal year, and is referred to as `country_annual_investment_projects`. Projects that do not have an associated investment amount are excluded from the plot.\n```{r country-annual-investment-projects}\ncountry_annual_investment_projects <- investment_services_projects %>%\n  filter(country == params$country,\n         date_disclosed >= params$year_start,\n         date_disclosed <= params$year_end) \n\nggplot(country_annual_investment_projects, aes(x = date_disclosed, y = total_investment, color = status)) +\n  geom_point() +\n  labs(\n    title = \"Investment Services Projects\",\n    x = \"Date Disclosed\",\n    y = \"Total IFC Investment in Dollars in Millions\"\n  ) \n```\n\n\n","styles.css":"#TOC {\n  color: #708090;\n  font-family: Calibri;\n  font-size: 16px; \n  border-color: #708090;\n}\nh1.title {\n  color: #F08080;\n  background-color: #F5F5F5;\n  opacity: 0.6;\n  font-family: Calibri;\n  font-size: 20px;\n}\nh4.author {\n  color: #708090;\n  font-family: Calibri;\n  background-color: #F5F5F5;\n}\nh4.date {\n  color: #708090;  \n  font-family: Calibri;\n  background-color: #F5F5F5;\n}\nbody {\n  color: #708090;\n  font-family: Calibri;\n  background-color: #F5F5F5;\n}\npre {\n  color: #708090;\n  background-color: #F8F8FF;\n}\n\n\n"}
Modifier et exécuter le code