CODEWITHSUNDEEP
rwordpressknitr
Sean Murphy
Sean Murphy

Reputation: 1247

Wrapping R code chunks in KnitR to fit width in html when posting to Wordpress

I'm trying to use the knit2wp() function of knitr in order to blog to Wordpress as discussed here: http://yihui.name/knitr/demo/wordpress/

My problem is that, despite trying various options to control chunk width, including setting tidy.opts in the chunk options, and adjusting global width settings as seen here, my R code chunks won't wrap around, resulting in overly wide code chunks that require scrolling sideways to view them, like this.

Is there a setting that I'm missing that will cause R code chunks to wrap around? Also, is there a setting that will widen the grey boxes that appear in Wordpress for the code chunks? None of the width options seem to have any effect.

This is what my setup chunk currently looks like:

```{r setup, echo=FALSE}
library(knitr)
opts_knit$set(upload.fun = function(file) imgur_upload(file, key = "xxxx"))
opts_chunk$set(fig.width=5, fig.height=5, fig.align = 'center', cache=TRUE, tidy = FALSE)
````

I have also tried adding the line options(width = 80) to that chunk, as well as setting tidy.opts within each chunk, and none of these has had any effect.

Upvotes: 2

Views: 738

Answers (1)

Artem Fedosov
Artem Fedosov

Reputation: 2203

As a dirty fix, you may add word-wrap: break-word; in css file to your pre element. Or embed it to a html file.

EDIT1:

Final advise is on the bottom. I am not an expert in WP, so you will have to work out the solution yourself.

As for how it will look, you may try it in a browser. There is an example with this page. You choose the element and may see a style on left. You may fix it in your browser (Right click, then "Inspect element" in Chrome) to see how it will look. However, this is not a permanent change: you change your local version. Refresh the page to get back to original.

enter image description here

Now I turn word wrapping off (better change it to break-word):

enter image description here

If you satisfied with result of in-browser if, there are to options to make change it in server:

  1. If we play dirty anyway, you may embed the style tag into your template somewhere. Wrap it in a style tag (Editor removes them, so i am not able to post it):

    pre {word-wrap: break-word}

  2. Edit you css and either create a new class or fix the ones that you have. I ma not sure how to do it with wordpress, but there is some information here: https://wordpress.org/support/topic/how-to-edit-css-style-sheet

I believe that the right approach is the second, but if you want result ASAP, you may try the first one as it looks easier.

Upvotes: 2

Related Questions