Connecting a .css file to a markdown .doc file

I have been attempting to incorporate some .css styling into my Rmarkdown file. To achieve this, I first created a notepad file containing the following code:

#nextsteps {
color: blue;
}  

.emphasized {
font-size: 1.2em;
}

Subsequently, I saved this file as styles.css.

Next, I generated an .Rmd file in the same directory with the following content:

---
title: "test2"
output: html_document
 theme: null
 highlight: null
 css: styles.css
 ---

 ## Next Steps {#nextsteps}

However, upon attempting to knit the file, I encountered the following error message:

 Error in yaml::yaml.load(enc2utf8(string), ...) : 
 Scanner error: mapping values are not allowed in this context at line 3, column 9
 Calls: <Anonymous> ... yaml_load_utf8 -> mark_utf8 -> <Anonymous> -> .Call
 Execution halted

Do you have any insights into what might be causing this issue?

Answer №1

Proper formatting is key when working with YAML.

---
title: "sample"
output: 
  html_document:
    theme: none
    highlight: none
    css: styles.css
---

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The plot should consist of only a single panel, with a marginal box plot overlaid on a faceted scatter

As a beginner in programming, I recently learned how to create faceted scatterplots and marginal box plots for scatter plots by following the guidance provided in this helpful link: Now my query is about incorporating marginal box plots into my faceted sc ...

CSS media queries fail to accurately detect the screen size of the device

I am currently developing a mobile web application and have implemented a media query to specifically target phones with a screen height lower than that of the iPhone X+ (812px): @media (max-height: 811px) { } While this media query works flawlessly on ...

How can I create a CSS animation that fades in text blocks when hovering over an image?

I have been trying to implement CSS3 transitions to create a hover effect where the text and background color fade in when hovering over an image. Despite my attempts with various selectors and transition types, I can't seem to achieve the desired res ...

What is the reason behind the extra space generated when a keyframe content contains a diacritic mark?

My Angular app's home page features dynamic word changes defined in CSS: .header-text:after { display: inline-block; content:''; animation: fide-in 5s linear infinite; } @keyframes fide-in { 0% { content:'BLA'; opacit ...

Formatting list items in HTML

I have just finished coding the following HTML code: My main goal is to align the list items - HOME | All About Kittens | Feeding Your Kitten in a proper layout. Currently, they are displayed as a simple list. However, I would like them to be aligned ...

What is the reason for Javascript's inability to apply height using the ex unit measurement?

Is there a way to use JavaScript in order to increase the height of an element based on its current CSS height value? I've been able to do it using px units, but not with ex units. Can anyone provide a solution for this? Here is the HTML structure: ...

Is the link's clickable area bigger than its corresponding image?

After countless attempts and experimenting with various solutions, I am still facing a persistent issue related to the size of the clickable area of an image linked to a video. The problem seems to be that the clickable area extends beyond the actual imag ...

The .remove() method is ineffective when used within an Ajax success function

I am facing an issue with removing HTML divs generated using jinja2 as shown below: {% for student in students %} <div class="item" id="{{ student.id }}_div"> <div class="right floated content"> <div class="negative ui button compa ...

Is there a way to enhance the processing speed of optimx for this particular code?

After a month of coding and overcoming struggles with 'optimx' and function design, I finally got my code up and running. However, the new challenge is the processing time, taking almost 45 minutes to complete 18 parameters on a DualCore 3Ghz pro ...

When using position:sticky, the overflow:auto behavior may not function as intended

My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...

Managing the stacking order in ggplot's geom_col when faceting requires grouping

After setting up factor levels to control the order of stacked bars in ggplot's geom_col, I encountered an issue while trying to facet the bar plots by an additional factor. Adding "group" to the aes for geom_col caused the bars to lose their ordering ...

The DIV element is not visible on the page, and the z-index property does not seem to be working

I am attempting to replicate the diagonal stripe layout using CSS, similar to the design shown here: Here is my codepen: http://codepen.io/Chiz/pen/zvWRNW Although my layout appears acceptable, the issue lies in the "div class="blacktop" not displaying. ...

Are the Bootstrap columns arranged in a vertical stack instead of side by side?

I currently have two large columns that are stacked vertically on top of one another. I want them to be side by side, like | 1 | 2 |, so that the user can view both columns simultaneously. I am seeking tips or suggestions on how to resolve this issue. Whil ...

My confusion is running high when it comes to navigating the mobile version of my website

Creating a navigation bar for my website has been challenging. Whenever I switch to mobile view, the list in my navigation bar shifts 40px to the right side of the screen where there's nothing. Is there any way you can assist me with this issue? ...

Struggling to align navbar to the center using css

I am having trouble centering this bootstrap code... I have tried using float: center, text-align: center but it is not working. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="h ...

Exploring Laravel 4's CSS Routing

Attempting to connect my CSS document in Laravel 4 has been a bit challenging. The location of my CSS file is: public/css/style.css In the view, I have the following link: <link type="text/css" rel="stylesheet" href="{{URL::asset('css/style.css ...

Preventing a webpage from responding to events by utilizing either CSS or jQuery

I apologize if the title is unclear, but I couldn't find the right words to phrase my question. On my website -- -- there is an alert box that appears onLoad. I need to convert it into a modal box so that when it appears, users are unable to use the ...

Completing the timeline

Looking at my daily rainfall data from 1843-2016, I noticed that some days are missing entirely. I am considering infilling dates for these missing data and assigning a code of N/A in the rainfall column. Would this be a feasible solution? The structure o ...

Aligning the image at the center within a flex container

I am struggling with aligning an image and a link inside a div using the display: flex property. This is how my code looks: <div style="display: flex;"> <div class="site-title-container"> <img style="border-radius: 7px; width: 34px; h ...

Tips for overlaying text onto a MaterialUI icon

https://i.stack.imgur.com/cFr5Y.pngI am currently working on a project that requires me to overlay a number on top of an icon. Specifically, I am utilizing the MaterialUI ModeComment icon and attempting to display text over it. Despite trying the following ...