2

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.

Community
  • 1
  • 1
Sean Murphy
  • 1,217
  • 8
  • 15
  • did you try adding `tidy = FALSE` to the global chunk options? – Tyler Rinker Sep 15 '14 at 12:24
  • I have tried that, though I'll double-check it – Sean Murphy Sep 15 '14 at 14:22
  • Have double checked - opts_chunk(tidy = false) does not do the trick – Sean Murphy Sep 16 '14 at 00:30
  • I have worked on this some more - tidy = FALSE stops knitr from removing manually inserted new lines, so it is helpful if you want to manually format all of your code to fit within a certain width (which would perhaps be easy enough with the formatR package). However, this still doesn't work for table output, and an automatic solution would be preferable. – Sean Murphy Sep 17 '14 at 01:13

1 Answers1

2

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.

Artem Fedosov
  • 2,163
  • 2
  • 18
  • 28
  • I'm not really very experienced with css, so could you elaborate? Would I add this code somewhere in a single css sheet for my Wordpress blog, or on each individual post page? – Sean Murphy Sep 21 '14 at 09:21
  • I think, you should add it to a single page. A template (if you paste the style in html) or change the css file. – Artem Fedosov Sep 21 '14 at 09:46
  • Ok, so I have added that line to the end of the pre element in the theme css (accessed through 'appearance' -> 'editor'). However, this does not appear to change the output. – Sean Murphy Sep 21 '14 at 09:51
  • Could you give me a link to your blog? I will have a look. – Artem Fedosov Sep 21 '14 at 09:54
  • I tinkered around a little and now word-wrap: break-word; in the pre section of the css seems to be working as intended (not sure why I couldn't get it happening before, perhaps a typo). I appreciate the time and thought-out answer. At the end of the day, it seems like manually breaking my code and comments and allowing wide tables to scroll might end up looking more attractive, but I'm glad to have this level of control, and my question is answered. Thanks! – Sean Murphy Sep 21 '14 at 10:15
  • Thank you too. I saw this guys breaking the code manually http://www.carlboettiger.info/2012/02/28/knitr-with-flickr-and-wordpress.html. They also have word-wrap: break-word; but it looks ugly when it happens. – Artem Fedosov Sep 21 '14 at 10:19