Referera till CSS-filen
I stället för att lägga till stilar direkt i varje Markdown-fil kan du skapa en CSS-fil (Cascading Style Sheet) med dina stilar och typsnitt, och sedan referera till den varje gång du skapar en ny fil.
I den här övningen har de stilar du angett lagts till i en CSS-fil som heter styles.css. Du ska referera till den här filen i YAML-huvudet i stället för att definiera stilarna direkt i Markdown-filen.
Den här övningen är en del av kursen
Rapportering med R Markdown
Övningsinstruktioner
- Lägg till ett
css-fält i YAML-huvudet efter fältethtml_documentoch före fältettoc. - Ange namnet på CSS-filen,
styles.css, som innehåller de stilar du har angett för Markdown-filen.
Interaktiv övning med praktiskt arbete
Testa den här övningen genom att slutföra den här exempelkoden.
{"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"}