Začněte nyníZačněte zdarma

Odkazování na soubor CSS

Místo přidávání stylů přímo do každého Markdown souboru můžeš vytvořit soubor CSS (Cascading Style Sheet) a odkazovat na něj pokaždé, když vytváříš nový soubor s konkrétními styly a fonty.

V tomto cvičení byly styly, které jsi definoval/a, přidány do souboru CSS s názvem styles.css. Tento soubor teď odkážeš v záhlaví YAML místo toho, abys styly zadával/a přímo do Markdown souboru.

Toto cvičení je součástí kurzu

Reporting with R Markdown

Zobrazit kurz

Pokyny k cvičení

  • Přidej pole css do záhlaví YAML za pole html_document a před pole toc.
  • Uveď název souboru CSS, styles.css, který obsahuje styly definované pro tento Markdown soubor.

Interaktivní cvičení na vyzkoušení si v praxi

Vyzkoušejte si toto cvičení dokončením tohoto ukázkového kódu.

{"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"}
Upravit a spustit kód