r code chunk is not presented properly under tab with xaringan template

Question

I am preparing a presentation using a xaringan template. I designed multiple tabs on one slide and included an R code chunk under one tab. The code chunk was not presented properly.

[extra words to fill the whitespace. I have nothing more to say]

Here are my codes:

<!-- Tab links -->
<div class="tab">
  <button class="tablinks active" onclick="tablabel(event, 'tab11')">Tab 1</button> 
</div>

<!-- Tab content -->
<div id="tab11" class="tabcontent" style="display:block">
   ```{r, eval=F}
BPPARAM <- SnowParam(detectCores()-1, progressbar = TRUE)
params <- list()
pks <- findChromPeaks([OnDiskMSnExp instant], param = params$CentWave, BPPARAM = BPPARAM)

```css
<style type ="text/css">
/* Style the tab */
.tab {
overflow: hidden;
/*border: 1px solid #ccc;*/
/*background-color: #f1f1f1;*/
}



/* Style the buttons that are used to open the tab content */
.tab tab_button {
text-align:left;
background-color: #f1e4ff;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
margin-left:0.3em;
}

/* Change background color of buttons on hover */
.tab tab_button:hover {
background-color: #e4e5ff;
}

/* Create an active/current tablink class */
.tab tab_button.active {
background-color: #ffe4ff;
color: #fff;
background-color: #2b8cc4;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
/*border: 1px solid #ccc;*/
border-top: none;
/*text-align: left;*/
font-size: 20px;
/*font-style: normal;*/
/* background-color: #f2ffe4;*/
}

</style>