Coder Social home page Coder Social logo

prettydoc's Introduction

Creating Pretty Documents From R Markdown

Have you ever tried to find a lightweight yet nice theme for the R Markdown documents, like this page?

Themes for R Markdown

With the powerful rmarkdown package, we could easily create nice HTML document by adding some meta information in the header, for example

---
title: Nineteen Years Later
author: Harry Potter
date: July 31, 2016
output:
  rmarkdown::html_document:
    theme: lumen
---

The html_document engine uses the Bootswatch theme library to support different styles of the document. This is a quick and easy way to tune the appearance of your document, yet with the price of a large file size (> 700KB) since the whole Bootstrap library needs to be packed in.

For package vignettes, we can use the html_vignette engine to generate a more lightweight HTML file that is meant to minimize the package size, but the output HTML is less stylish than the html_document ones.

So can we do BOTH, a lightweight yet nice-looking theme for R Markdown?

The prettydoc Engine

The answer is YES! (At least towards that direction)

The prettydoc package provides an alternative engine, html_pretty, to knit your R Markdown document into pretty HTML pages. Its usage is extremely easy: simply replace the rmarkdown::html_document or rmarkdown::html_vignette output engine by prettydoc::html_pretty in your R Markdown header, and use one of the built-in themes and syntax highlighters. For example

---
title: Nineteen Years Later
author: Harry Potter
date: July 31, 2016
output:
  prettydoc::html_pretty:
    theme: cayman
    highlight: github
---

You can also create documents from prettydoc templates in RStudio.

Step 1: Click the "New File" button and choose "R Markdown".

Step 1

Step 2: In the "From Template" tab, choose one of the built-in templates.

Step 2

Options and Themes

The options for the html_pretty engine are mostly compatible with the default html_document (see the documentation) with a few exceptions:

  1. Currently the theme option can take the following values. More themes will be added in the future.
    • cayman: Modified from the Cayman theme.
    • tactile: Modified from the Tactile theme.
    • architect: Modified from the Architect theme.
    • leonids: Modified from the Leonids theme.
    • hpstr: Modified from the HPSTR theme.
  2. The highlight option takes value from github and vignette.
  3. A new math parameter to choose between mathjax and katex for rendering math expressions. The katex option supports offline display when there is no internet connection.
  4. Options code_folding, code_download and toc_float are not applicable.

Offline Math Expressions

By default, html_pretty uses MathJax to render math expressions. However, using MathJax requires an internet connection. If you need to create documents that can show math expressions offline, simply add one line math: katex to the document metadata:

---
title: Nineteen Years Later
author: Harry Potter
date: July 31, 2016
output:
  prettydoc::html_pretty:
    theme: cayman
    highlight: github
    math: katex
---

This option will enable KaTeX for rendering the math expressions, and all resource files will be included in for offline viewing. The offline document will be ~800k larger.

Related Projects

  • tufte provides the Tufte style for R Markdown documents.
  • BiocStyle provides standard formatting styles for Bioconductor PDF and HTML documents.
  • rmdformats by Julien Barnier contains HTML formats and templates for R Markdown documents, with some extra features such as automatic table of contents, lightboxed figures, and dynamic crosstab helper.
  • markdowntemplates by Bob Rudis is a collection of alternative R Markdown templates.
  • prettyjekyll by Florian Privé uses prettydoc to convert R Markdown documents to Jekyll Markdown for blog posting.

Gallery

Here are some screenshots of the HTML pages generated by prettydoc with different themes and syntax highlighters.

Cayman Theme

Tactile (demo page)

Tactile Theme

Architect (demo page)

Architect Theme

Leonids (demo page)

Leonids Theme
HPSTR Theme

prettydoc's People

Contributors

marlycormar avatar maybegeek avatar yihui avatar yixuan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

prettydoc's Issues

How to Add Title for Table of Contents

Is there a way to add a title for the table of contents using prettydoc ?

Something like the following below where the toctitle (assuming this is the YAML variable for this example) is set to Contents:

Contents

  • Item 1
  • Item 2

Compatibility with R Notebooks (html_notebook)?

I really love the new themes, but I mostly use R Notebooks (html_notebook) these days rather than the default html_document.

Is there a way to use pretty doc with the html_notebook format?

html templates should not have xmlns attribute in html tag

The html templates in this project suffer the same problem mentioned in these rmarkdown issues:
rstudio/rmarkdown#1640 rstudio/rmarkdown#995

Namely, the output is not valid XHTML, and using a strict XML parser will result in an error. They are valid HTML5.

The <html> tags include a xmlns attribute, which wrongly declares the file to be XML. In certain real-world cases (see rstudio/rmarkdown#1640) this can cause a parser error to be displayed in a browser instead of the document.

The xmlns attribute should be deleted from the html templates to remove this issue, as was done here:
rstudio/rmarkdown@41d8ae4

Maybe "borrow" from the BioC vignettes?

Loving this project -- immediately installed when I saw the CRANberries notice earlier.

One format I have played with is the BioCStyle style which is also more lightweight. Maybe include (with attribution) or borrow from it? Or maybe just refer to it from the documentation as "yet another light(er)weight alternative" ?

tabset sections do not work

The tabset tag beside a section is supposed to make content in the subheadings appear as tabs. I know prettydoc doesn't support certain features such as floating table of contents, but the documentation makes no statements about not supporting tabset sections, so I assume it's supposed to. I can't get it to work. Instead it appears as a normal section. Below is some code that reproduces it.

I'm using the theme architect, if it helps. Rmarkdown is updated to the latest version. Apologies for the formatting. I can't seem to get it to look like a script because the site automatically formats the markdown unless I bold the hashtags and such, which makes it appear all in-line.


title: "example"
author: "me"
output:
prettydoc::html_pretty:
theme: architect

tabset.section {.tabset}

One

plot(Sepal.Width ~ . , data=iris)

Two

plot(Sepal.Length ~ . , data=iris)

Inconsistent font size on mobile(?)

prettydoc seems to be outputting inconsistent font size when viewed on mobile.

Example of how code looks on a regular page on mobile:

mobile1_small

Example of how code looks on a prettydoc page on mobile:

mobile2_small

Is this documented/expected? Is there any workaround?

Italic not working

I'm using prettydoc theme cayman, and I've done the following:

---
title: "Title"
author: "Author"
date: "`r Sys.Date()`"
output:
  prettydoc::html_pretty:
    theme: cayman
    highlight: github
---

*italic* text 

But the word "italic" is normal in HTML.

italico

Is code folding possible in prettydoc?

I was trying to add 'code_folding: hide' to my YAML header for prettydoc html output. The error I got was:

Error in overlay(...) :
You must use a theme when specifying the 'code_folding' option

I'm not sure what it means by specifying a theme, since I already had a theme (I used the architect theme). When I leave everything else the same, except instead I render it as a regular old html_document, the code_folding works.

Thank you! I love the prettydoc look!

including italic for regular/400 and bold/700 of Open Sans font family

Hi,

as of now, Open Sans is included just with the

  • regular / 400 and
  • bold / 700.

All italic or bold-italic will not get the Open Sans in these cases.

I would propose including these and referencing these in our (s)css ... for a typographically more adequate appearance.

(I would also include woff and woff2 ... discussion on so)

I would be glad to help,
thanks
christoph

html associated XXX_files directory

Hi,

When I render the following document test.md a directory test_files is generated along the html file test.html.

  • build.R
rmarkdown::render("test.md")

test.md

---
title: "Test"
output:
  prettydoc::html_pretty
---

test_files contains fonts, images and styles not even referenced in the html.

Is it possible to generate a single html file without the XXX_files folder ?

Regards,

Bernard

quick question about the code wrap

Hi,

The html_pretty is extremely PRETTY! I just have a quick question about the code wrap.

It seems if some line of the code is long, then html_pretty just keep part of them rather than wrap the code as html_document does. Is there anyway available that I could wrap the code?

Thanks,

Jiaqiang

prettydoc: about scrolling catalogue in html and head-hiding in markdown

Hello, I found prettydoc a useful tool for beautiful html production.
Here's some usage problems I meet.

  1. Could the head of the markdown hided automatically in the .md?
---
title: "XXX"
author: "XXX"
date: "`r Sys.Date()`"
output:
  prettydoc::html_pretty:
    theme: architect
    highlight: github
    math: katex
    keep_md: true
---
  1. In the .html, could a scrolling catalogue possible?

Thank you very much!

Adding title to hpstr theme

Hi there,

I am trying to use your hpstr template from an rmarkdown doc, but I am unable to write a text in the header (top of the page where a picture is shown). How can I do this?

Thanks!

cayman css :first-child for .main-content interferes with leaflet (i.e.)

Hi there,

cayman scss does not scope the :first-child selector enough, so html-widget in rmarkdown, i.e. leaflet, getting their margin-top: 0 too.

.main-content {
// ...
  :first-child {
    margin-top: 0;
  }
// ...
}

architect scss, on the other hand, uses this:

#main-content {
  > :first-child {
    margin-top: 0;
  }
// ...
}

which converts to: #main-content > :first-child {margin-top: 0;} and therefore does not descend further down the dom.

I would appreciate the > in cayman too.

Some options for html_document do not work in html_pretty

Some options relies on Bootstrap, so they are not applicable in html_pretty. Also a certain number of features are based on the Bootstrap template, and their CSS need to be added to the built-in themes of prettydoc.

  • code_folding: Relies on Bootstrap (documented)
  • code_download: Relies on Bootstrap (documented)
  • toc_float: Relies on Bootstrap (documented)
  • toc: Need CSS (updated)

We need to at least document these problems in prettydoc.

Problem properly selecting parts of code chunks (in browser)

I've made a detailed post (with screenshots and sample code) on stackoverflow, and someone commented that he could confirm the problem, thought it was a bug, and that I should post it here. But basically I'm not able to select part of text from code chunks using common browsers such as Chrome, Edge, or Explorer, though I don't have this issue when not using prettydoc.

Change styling attributes for code messages/warnings?

Is it possible to change the background color or other styling attributes for the div containing the code output/messages/warnings? Please see below - both the code and the corresponding message look similar. Thanks!

image

Alignment of Table of Contents

Table of Contents are aligned to the left side of the page, unlike the actual content. Please check the attached image.
rstudio -tmp-rtmpr1m6zk-preview-58b03178925a dir-stubthat html_002

Table of content on the left-hand side. Possible?

I think it would be handy to jump in between headers by clicking an item on the table of content. The item on the table of content represents a section.

It would make sense to me to place the table of content on the left side and set it to be available all the time.

shiny elements in Rmd

Is prettydoc compatible with shiny app elements?

output:
    prettydoc::html_pretty
    theme: leonids
    runtime: shiny

I am having this error

Error in yaml::yaml.load(..., eval.expr = TRUE) : 
  Scanner error: mapping values are not allowed in this context at line 6, column 10
Calls: <Anonymous> ... parse_yaml_front_matter -> yaml_load -> <Anonymous>
Execution halted

add support for # title {.tabset}

Thanks for this awesome package!

I've found the # title {.tabset} feature in plain rmarkdown very useful (see the following screenshot for example). But it seems this feature is not supported in prettydoc package.

image

Would you mind considering adding this feature into the prettydoc package.? Thanks!

'self_contained: false' not working correctly

I created some sample renders of your themes, and I wanted to move the assets to a dedicated directory to remove redundancy, hence the self_contained: false.

However, when pushing to my server, the files don't render correctly.

I checked the source HTML and in the header it specifies a CSS file located in what I assume to be my local machine's temp dir:

Is this a solvable issue or are these templates not meant to be used with self_contained: false?

devtools::build() does not result in vignettes that are "pretty"

Hi,

My goal is to have vignettes in my package built with the prettydoc engine so the generated html's included in the package and hosted on CRAN are pretty, similar to what you have here.

My Rmd vignette file does have the following:

output:
  prettydoc::html_pretty:
    theme: architect
    highlight: github
    toc: true
vignette: >
  %\VignetteIndexEntry{Example: Multi-Ethnicity Categorization}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}

My DESCRIPTION files does have the following:

Suggests: knitr,
    rmarkdown,
    markdown,
    prettydoc
VignetteBuilder: knitr, rmarkdown

I am building my package directory using the devtools::build() function.

The resulting tar.gz file has the vignettes built in inst/doc, but the generated html files do not display the theme.

Am I missing a step? Or does your package not work with devtools::build?

Thank you for your assistance.

How to shrink the left margin using cayman theme

Hi

I am using the "cayman" theme with the following YAML:

output:
  prettydoc::html_pretty:
    toc: true
    theme: cayman

I find that the left margin (the white space before the content) is quite large, is there a way to shrink (resize) this ?

I have googled this but didn't find anything that helped.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.