CODEWITHSUNDEEP
cssrr-markdown
Rorschach
Rorschach

Reputation: 32466

Hide scrollbar in rmarkdown code blocks

I'm trying to hide the horizontal scroll bars that seem to occur by default when using rmarkdown with code_folding (I think you need to get the version of github). But, I can't seem to get the CSS right, I thought it would be simply setting overflow to 'hidden'.

There are a couple of files, one with R code, one with CSS. Example:

test.R

##' ---
##' title: "Testing Overflow"
##' author: ""
##' date: ""
##' output_format: 
##'   html_document:
##'     theme: readable
##'     highlight: zenburn
##'     code_folding: show
##'     css: styles.css
##' ---
##' 
##' # Some code
##' How can I hide this scroll bar??
##'
##' --------------------------------
##--- test

library(knitr)
opts_chunk$set(message=FALSE, cache=FALSE)

##'

Things I tried in

styles.css

.sourceCode {
    overflow: hidden;
}

pre {
    overflow: hidden;
}

From R console, you should be able to run

browseURL(rmarkdown::render("test.R"))

and see the following enter image description here

Edit: the requested jsfiddle for those without R.

Upvotes: 0

Views: 3039

Answers (1)

Aziz
Aziz

Reputation: 7793

This CSS line is overriding your rules:

div.sourceCode { overflow-x: auto; }

Either get rid of it or use the same specificity for your next rule, like:

div.sourceCode {
    overflow: hidden;
}

Upvotes: 3

Related Questions