| fig_retina = 2, | fig_retina = 2, | ||||
| keep_md = FALSE, | keep_md = FALSE, | ||||
| dev = "png", | dev = "png", | ||||
| toc = FALSE, | |||||
| toc_depth = 3, | |||||
| pandoc_args = NULL, | pandoc_args = NULL, | ||||
| extra_dependencies = NULL | extra_dependencies = NULL | ||||
| ) { | ) { | ||||
| # browser() | # browser() | ||||
| } | } | ||||
| pandoc_args <- c(pandoc_args, rmarkdown::pandoc_toc_args(toc, toc_depth)) | |||||
| rmarkdown::output_format( | rmarkdown::output_format( | ||||
| knitr = rmarkdown::knitr_options_html( | knitr = rmarkdown::knitr_options_html( | ||||
| fig_width, fig_height, fig_retina, keep_md, dev | fig_width, fig_height, fig_retina, keep_md, dev |
| .tabs-content li.is-active { | .tabs-content li.is-active { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| #toc-aside { | |||||
| position: sticky; | |||||
| top: 2em; | |||||
| position: -webkit-sticky; | |||||
| } | |||||
| </style> | </style> | ||||
| $for(css)$ | $for(css)$ | ||||
| <link rel="stylesheet" href="$css$" /> | <link rel="stylesheet" href="$css$" /> | ||||
| <section class="section"> | <section class="section"> | ||||
| <div class="container"> | <div class="container"> | ||||
| <div class="content" id="content-body"> | |||||
| $if(author)$ | |||||
| <div class="level"> | |||||
| $for(author)$ | |||||
| <div class="level-item has-text-centered"> | |||||
| <div> | |||||
| $if(author.name)$ | |||||
| <p class="title is-5"> | |||||
| $if(author.url)$ | |||||
| <a href="$author.url$">$author.name$</a> | |||||
| $else$ | |||||
| $author.name$ | |||||
| $endif$ | |||||
| </p> | |||||
| $endif$ | |||||
| $if(author.extra)$ | |||||
| <p class="subtitle is-6"> | |||||
| $for(author.extra)$$author.extra$$sep$<br>$endfor$ | |||||
| </p> | |||||
| $endif$ | |||||
| <div class="columns"> | |||||
| <div class="column $if(toc)$is-three-quarters-desktop is-full-tablet is-full-mobile$else$is-full$endif$"> | |||||
| <div class="content" id="content-body"> | |||||
| $if(author)$ | |||||
| <section class="section" id="authors"> | |||||
| <div class="content"> | |||||
| <div class="level"> | |||||
| $for(author)$ | |||||
| <div class="level-item has-text-centered"> | |||||
| <div> | |||||
| $if(author.name)$ | |||||
| <p class="title is-5"> | |||||
| $if(author.url)$ | |||||
| <a href="$author.url$">$author.name$</a> | |||||
| $else$ | |||||
| $author.name$ | |||||
| $endif$ | |||||
| </p> | |||||
| $endif$ | |||||
| $if(author.extra)$ | |||||
| <p class="subtitle is-6"> | |||||
| $for(author.extra)$$author.extra$$sep$<br>$endfor$ | |||||
| </p> | |||||
| $endif$ | |||||
| </div> | |||||
| </div> | |||||
| $endfor$ | |||||
| </div> | |||||
| </div> | |||||
| </section> | |||||
| $endif$ | |||||
| $body$ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| $endfor$ | |||||
| <div class="column"> | |||||
| <aside class="menu" id="toc-aside"> | |||||
| $if(toc)$$table-of-contents$$endif$ | |||||
| </aside> | |||||
| </div> | |||||
| </div> | </div> | ||||
| $endif$ | |||||
| $body$ | |||||
| </div> | |||||
| </div> | </div> | ||||
| </section> | </section> | ||||
| tables[i].classList.add(...tableClasses); | tables[i].classList.add(...tableClasses); | ||||
| } | } | ||||
| }) | }) | ||||
| // Add appropriate TOC classes | |||||
| document.addEventListener("DOMContentLoaded", function(event) { | |||||
| var toc = document.getElementById('toc-aside').getElementsByTagName("ul"); | |||||
| for (var i = 0; i < toc.length; i++) { | |||||
| toc[i].classList.add("menu-list"); | |||||
| } | |||||
| }) | |||||
| </script> | </script> | ||||
| $if(mathjax-url)$ | $if(mathjax-url)$ | ||||
| <!-- dynamically load mathjax for compatibility with self-contained --> | <!-- dynamically load mathjax for compatibility with self-contained --> |
| \title{Bulma Document Renderer} | \title{Bulma Document Renderer} | ||||
| \usage{ | \usage{ | ||||
| bulma_document(..., css = NULL, fig_width = 10, fig_height = 7, | bulma_document(..., css = NULL, fig_width = 10, fig_height = 7, | ||||
| fig_retina = 2, keep_md = FALSE, dev = "png", pandoc_args = NULL, | |||||
| extra_dependencies = NULL) | |||||
| fig_retina = 2, keep_md = FALSE, dev = "png", toc = FALSE, | |||||
| toc_depth = 3, pandoc_args = NULL, extra_dependencies = NULL) | |||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{...}{Arguments passed on to \code{rmarkdown::html_document_base} | \item{...}{Arguments passed on to \code{rmarkdown::html_document_base} |
| output: | output: | ||||
| bulma::bulma_document: | bulma::bulma_document: | ||||
| keep_md: TRUE | keep_md: TRUE | ||||
| toc: yes | |||||
| toc_depth: 2 | |||||
| # css: custom.css | # css: custom.css | ||||
| html_document_base: | html_document_base: | ||||
| pandoc_args: ["--template", "/Users/4468739/work/bulmaRmd/inst/bulma/bulma-min.html" ] | pandoc_args: ["--template", "/Users/4468739/work/bulmaRmd/inst/bulma/bulma-min.html" ] | ||||
| </div> | </div> | ||||
| --> | --> | ||||
| # Introduction | |||||
| A bit of an _introduction_ here. We no longer need to start an article by writing this: | |||||
| ```latex | |||||
| \documentclass{article} | |||||
| \begin{document} | |||||
| \end{document} | |||||
| ``` | |||||
| # Bulma Tests | |||||
| ::::::{.columns} | ::::::{.columns} | ||||
| :::::{.column .is-half .is-offset-one-quarter} | :::::{.column .is-half .is-offset-one-quarter} | ||||
| ::::{.message} | ::::{.message} | ||||
| `r bulma::bulma_level("Tweets" = 3456, Following = 123, Followers = "456K", Likes = 789, style = "header")` | `r bulma::bulma_level("Tweets" = 3456, Following = 123, Followers = "456K", Likes = 789, style = "header")` | ||||
| A bit of an _introduction_ here. We no longer need to start an article by writing this: | |||||
| ```latex | |||||
| \documentclass{article} | |||||
| \begin{document} | |||||
| \end{document} | |||||
| ``` | |||||
| # Start with a cool section | # Start with a cool section | ||||
| You can use traditional **Markdown** syntax, such as [links](http://yihui.name/knitr) and `code`. Here is a quote: | You can use traditional **Markdown** syntax, such as [links](http://yihui.name/knitr) and `code`. Here is a quote: | ||||
| Our regression equation is $Y=`r b[1]`+`r b[2]`x$, and the model is: | Our regression equation is $Y=`r b[1]`+`r b[2]`x$, and the model is: | ||||
| $$ Y = \beta_0 + \beta_1 x + \epsilon$$ | |||||
| $$Y = \beta_0 + \beta_1 x + \epsilon$$ | |||||
| ## Some math still has issues | |||||
| This is the equation for the PDF of the normal distribution. | |||||
| It currently isn't rendering correctly. | |||||
| $$\frac{1}{\sigma\sqrt{2\pi}}\,e^{ -\frac{(x-\mu)^2}{2\sigma^2} }$$ | |||||
| # Pandoc extensions {.tabs} | # Pandoc extensions {.tabs} | ||||
| - name: Home | - name: Home | ||||
| url: https://gerkelab.com | url: https://gerkelab.com | ||||
| icon: '`r bulma::fa_icon("home")`' | icon: '`r bulma::fa_icon("home")`' | ||||
| output: bulma::bulma_document | |||||
| output: | |||||
| bulma::bulma_document: | |||||
| toc: yes | |||||
| editor_options: | editor_options: | ||||
| chunk_output_type: console | chunk_output_type: console | ||||
| --- | --- | ||||
| library(bulma) | library(bulma) | ||||
| ``` | ``` | ||||
| <a class="button is-primary"> | |||||
| <span class="icon is-small"> | |||||
| `r bulma::fa_icon("r-project", as_html = TRUE)` | |||||
| </span> | |||||
| <span>Souce Code</span> | |||||
| </a> | |||||
| ## Level | ## Level | ||||
| ### Basic | ### Basic |