ÎncepețiÎncepe gratuit

Referențierea fișierului CSS

În loc să adaugi stiluri direct în fiecare fișier Markdown, poți crea un fișier Cascading Style Sheet (CSS) și să îl referențiezi ori de câte ori creezi un fișier nou care necesită anumite stiluri și fonturi.

În acest exercițiu, stilurile pe care le-ai specificat au fost adăugate într-un fișier CSS numit styles.css. Vei referenția acest fișier în antetul YAML, în loc să definești stilurile direct în fișierul Markdown.

Acest exercițiu face parte din cursul

Raportare cu R Markdown

Vezi cursul

Instrucțiuni pentru exercițiu

  • Adaugă un câmp css în antetul YAML după câmpul html_document și înainte de câmpul toc.
  • Specifică numele fișierului CSS, styles.css, care conține stilurile definite pentru fișierul Markdown.

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

{"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"}
Editează și rulează codul