LoslegenKostenlos loslegen

Die CSS-Datei referenzieren

Anstatt in jeder Markdown-Datei die Stile direkt zu definieren, kannst du eine Cascading Style Sheet (CSS)-Datei erstellen und bei jedem neuen Dokument darauf verweisen, das bestimmte Stile und Schriftarten enthalten soll.

In dieser Übung wurden die von dir angegebenen Stile in eine CSS-Datei namens styles.css ausgelagert. Du verweist auf diese Datei im YAML-Header, anstatt die Stile innerhalb der Markdown-Datei anzugeben.

Diese Übung ist Teil des Kurses

Berichten mit R Markdown

Kurs anzeigen

Anleitung zur Übung

  • Füge im YAML-Header nach dem Feld html_document und vor dem Feld toc ein Feld css hinzu.
  • Trage den Namen der CSS-Datei ein, styles.css, die die von dir für die Markdown-Datei festgelegten Stile enthält.

Interaktive Übung

Vervollständige den Beispielcode, um diese Übung erfolgreich abzuschließen.

{"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"}
Code bearbeiten und ausführen